ES6學習心得

ECMAScript 6.0（簡稱ES6）是 JavaScript 一個制定於2015年的新標準，它於2015年6月正式發佈。

它的目的是想讓JavaScript成爲一個企業級的開發語言，能夠去開發大型的複雜應用。

個人ES6學習心得將分爲如下三個部分來闡述：

1.ECMAScript 6.0簡介

2.ECMAScript 6.0新特性

3.ECMAScript 6.0性能總結與我的體會

4.參考文獻

 

1.ECMAScript 6.0簡介

想要弄清楚ECMAScript 6.0，那麼咱們要先弄清楚它是什麼，它怎麼來的。

（1）ECMAScript

ECMA是「European Computer Manufactures Association」的縮寫，中文稱歐洲計算機制造聯合會。這個組織的目標是評估，開發和承認電信和計算機標準。

1996年的時候，Javascript的創造公司將Javascript提交給ECMA，但願這種語言可以成爲國際標準。

次年，ECMA 發佈262號標準文件（ECMA-262）的初版，規定了瀏覽器腳本語言Javascript的標準，並將這種語言稱爲 ECMAScript，這個版本就是1.0版。

因此咱們這裏總結一下ECMAscript與Javascript之間的關係：

ECMAscript是Javascript的標準/規格

Javascript是ECMAscript的實現（另外的 ECMAScript 語言還有 Jscript 和 ActionScript）

可是咱們通常平常說的ECMAScript就是Javascript的意思，這兩個詞是能夠互換的，不過仍是要清楚它們的區別。

　　

（2）ECMAScript 6.0（ES6） / ECMAScript 2015（ES2015）

2011年，ECMAScript 5.1版發佈後，就開始制定6.0版了。所以，ES6 這個詞的原意，就是指 ECMAScript 5.1版的下一個版本。

由於ECMA標準委員會會在每一年6月份更新並正式發佈一次新的ECMAScript標準，做爲當年的正式版本。

而後接下來的時間就是在這個版本的基礎上面作改動，一直到下年的6月份。這樣一來其實就不須要用版本號來區分了了，用年份標記便可。

ES6 的第一個版本，就這樣在2015年6月發佈了，正式名稱就是《ECMAScript 2015標準》（簡稱 ES2015）。

2016年6月，小幅修訂的《ECMAScript 2016標準》（簡稱 ES2016）如期發佈，這個版本能夠看做是 ES6.1 版，由於二者的差別很是小（只新增了數組實例的includes方法和指數運算符），基本上是同一個標準。根據計劃，2017年6月發佈 ES2017 標準。

所以，ECMAScript6.0既是一個版本名稱，也是一個類別。版本名稱是指5.1版之後的 ECMAScript 的下一代標準，類別是指它涵蓋了ES201五、ES201六、ES2017等等。

而ES2015 則是正式名稱，特指該年發佈的正式版本的語言標準。

 

2.ECMAScript 6.0新特性

以前剛開始接觸Javascript的時候ES6還沒推出，用的仍是ES5的標準，那麼新推出的ES6有哪些新特性呢？

下文我將總結一些在ES6的學習中接觸到的一些比較經常使用的語法特性，具體有如下幾項：

（1）let, const

（2）class, extends, super

（3）arrow function

（4）template string

（5）destructuring

（6）default, reat

 

--------------------華麗麗的分界線---------------------

 

（1）let, const

let, const的做用與var相似，都是用於聲明變量的，可是它們減小了var在做用域以及賦值方面的缺陷，下面咱們來看一下。

①var在做用域方面的缺陷

var name = 'zach'

while (true) {
    var name = 'obama'
    console.log(name)  //obama
    break
}

console.log(name)  //obama

使用var兩次輸出都是obama，這是由於ES5只有全局做用域和函數做用域，沒有塊級做用域，這帶來不少不合理的場景。第一種場景就是你如今看到的內層變量覆蓋外層變量。而let則實際上爲JavaScript新增了塊級做用域。用它所聲明的變量，只在let命令所在的代碼塊內有效。

let name = 'zach'

while (true) {
    let name = 'obama'
    console.log(name)  //obama
    break
}

console.log(name)  //zach

另一個var帶來的不合理場景就是用來計數的循環變量泄露爲全局變量，看下面的例子：

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代碼中，變量i是var聲明的，在全局範圍內都有效,因此全局只有一個變量i。每一次循環，變量i的值都會發生改變，而循環內被賦給數組a的function在運行時，會經過閉包讀到這同一個變量i，致使最後輸出的是最後一輪的i的值，也就是10。而使用let則不會出現這個問題。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

 上面代碼中，變量i是let聲明的，當前的i只在本輪循環有效，因此每一次循環的i其實都是一個新的變量，因此最後輸出的是6。你可能會問，若是每一輪循環的變量i都是從新聲明的，那它怎麼知道上一輪循環的值，從而計算出本輪循環的值？這是由於 JavaScript 引擎內部會記住上一輪循環的值，初始化本輪的變量i時，就在上一輪循環的基礎上進行計算。

另外，for循環還有一個特別之處，就是循環語句部分是一個父做用域，而循環體內部是一個單獨的子做用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

上面代碼輸出了3次abc，這代表函數內部的變量i和外部的變量i是分離的。

 

 

②var在賦值方面的缺陷

從上面的例子咱們能夠看出，var的賦值是能夠很輕易地被改變的

var name = 'zach'

while (true) {
    var name = 'obama'
    console.log(name)  //obama
    break
}

console.log(name)  //obama

這就帶來了一個問題，一些程序中比較重要的變量很容易就會被他人，特別是你絕不知情的隊友改變了，這就給咱們大型程序的開發帶來了麻煩。

固然上文僅僅是我設想的一個場景，咱們的程序中更多的時候是須要一些約定俗成，值不變的常量，好比說pi。

在ES6中，咱們添加了const特性來聲明常量。一旦聲明，常量的值就不能改變。

const PI = Math.PI

PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

當咱們嘗試去改變用const聲明的常量時，瀏覽器就會報錯。
const有一個很好的應用場景，就是當咱們引用第三方庫的時聲明的變量，用const來聲明能夠避免將來不當心重命名而致使出現bug：

const monent = require('moment')

 

（2）class, extends, super

 ES6還有一大特色就是它跟咱們所熟知的入門級語言C、C++更像了，由於它引入了class（類）這個概念。

在ES5的年代，js是沒有特定的class這個概念的，因此咱們以前通常經過構造函數定義並生成新對象，以下圖：

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

可是上面這種寫法跟傳統的面嚮對象語言（好比C++和Java）差別很大，很容易讓剛接觸的程序員感到困惑。

ES6提供了更接近傳統的面嚮對象語言的寫法，引入了Class（類）這個概念。

在ES6中，經過class關鍵字，咱們能夠定義類。

但其實ES6的class僅僅是個名字/寫法而已，由於它的絕大部分功能，ES5均可以作到。

不過新的class寫法讓對象原型的寫法更加清晰、更像面向對象編程的語法，這樣就能夠更接近企業級的開發語言。

上面的代碼用ES6的「類」改寫，就是下面這樣。

//定義類
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

上面代碼首先用class定義了一個「類」，能夠看到裏面有一個constructor方法，這就是構造方法，而this關鍵字則表明實例對象。簡單地說，constructor內定義的方法和屬性是實例對象本身的，而constructor外定義的方法和屬性則是全部實例對象能夠共享的。

Point類除了構造方法，還定義了一個toString方法。注意，定義「類」的方法的時候，前面不須要加上function這個關鍵字，直接把函數定義放進去了就能夠了。另外，方法之間不須要逗號分隔，加了會報錯。

ES6的類，徹底能夠看做構造函數的另外一種寫法。

class Point {
  // ...
}

typeof Point // "function"
Point === Point.prototype.constructor // true

 

Class之間能夠經過extends關鍵字實現繼承，這比ES5的經過修改原型鏈實現繼承，要清晰和方便不少。下面定義了一個Cat類，該類經過extends關鍵字，繼承了Animal類的全部屬性和方法。

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        console.log(this.type + ' says ' + say)
    }
}

let animal = new Animal()
animal.says('hello') //animal says hello

class Cat extends Animal {
    constructor(){
        super()
        this.type = 'cat'
    }
}

let cat = new Cat()
cat.says('hello') //cat says hello

super關鍵字，它指代父類的實例（即父類的this對象）。子類必須在constructor方法中調用super方法，不然新建實例時會報錯。這是由於子類沒有本身的this對象，而是繼承父類的this對象，而後對其進行加工。若是不調用super方法，子類就得不到this對象。

ES6的繼承機制，實質是先創造父類的實例對象this（因此必須先調用super方法），而後再用子類的構造函數修改this。

 

 

（3）arrow function

 ES6帶來的還有一個新特性，就是簡潔。

arrow function應該是ES6最最經常使用的一個新特性了，用它來寫function比原來的寫法要簡潔清晰不少:

function(i){ return i + 1; } //ES5
(i) => i + 1 //ES6

若是function有多行內容，則須要用{}將其括起來：

function(x, y) { 
    x++;
    y--;
    return x + y;
}//ES5
(x, y) => {x++; y--; return x+y}//ES6

 

另外ES5在使用this的時候也須要當心混淆：

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout(function(){
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}

 var animal = new Animal()
 animal.says('hi')  //undefined says hi

運行上面的代碼會報錯，這是由於setTimeout中的this指向的是全局對象。

通常用ES5的解決方法有傳遞this或者bind(this)這些， 但如今咱們有了箭頭函數，就不須要這麼麻煩了：

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says('hi')  //animal says hi

當咱們使用箭頭函數時，函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
並非由於箭頭函數內部有綁定this的機制，實際緣由是箭頭函數根本沒有本身的this，它的this是繼承外面的，所以內部的this就是外層代碼塊的this。

 

 

可是在這裏咱們要說的是，arrow function也並非一勞永逸的，特別是在你並不知道this指向哪的時候，你須要慎用arrow function。

由於arrow function是 Lexical scoping（詞法做用域），this指向定義Arrow Function時外圍, 而不是運行時的對象。

詞法做用域： 變量的做用域是在定義時決定而不是執行時決定，也就是說詞法做用域取決於源碼，經過靜態分析就能肯定，所以詞法做用域也叫作靜態做用域。

下面咱們將根據文章：Do ES6 Arrow Functions Really Solve 「this」 In JavaScript? 來分析。

以下代碼：

// run this in node v4 to see the "expected" behavior

this.test = "attached to the module";

var foo = {
  test: "attached to an object"
};

// a method to create methods
foo.method = function(name, cb){
  this[name] = cb;
};

// use an arrow function and get
// lexical analysis of "this"
foo.method("bar", () => {
  // not what you expected, maybe?
  console.log(this.test); 
});

foo.bar();

輸出爲：「attached to the module」而不是「attached to an object」

由於

就像咱們所說的，arrow function是 Lexical scoping，由於在foo.method("bar", () => {的外圍並無包含着它的代碼，因此，foo.bar()中的this.test值將永遠是「attached to the module」。

 

 

（4）template string

 這個新特性能夠幫助咱們插入大段的html內容到文檔中去。傳統的寫法通常比較麻煩，因此以前咱們一般會引用一些模板工具庫，好比mustache等等。代碼以下：

$("#result").append(
  "There are <b>" + basket.count + "</b> " +
  "items in your basket, " +
  "<em>" + basket.onSale +
  "</em> are on sale!"
);

咱們要用一堆的'+'號來鏈接文本與變量，而使用ES6的新特性模板字符串``後，咱們能夠直接這麼來寫：

$("#result").append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

在ES6中，咱們用`來標識開始和結尾，用${}來引用變量，並且全部的空格和縮進都會被保留在輸出之中。

 

 

（5）destructuring

 ES6容許按照必定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲解構（Destructuring）。

當使用ES5的時候，咱們通常是這麼寫的：

let cat = 'ken'
let dog = 'lili'
let zoo = {cat: cat, dog: dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}

用ES6徹底能夠像下面這麼寫：

let cat = 'ken'
let dog = 'lili'
let zoo = {cat, dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}

反過來能夠這麼寫：

let dog = {type: 'animal', many: 2}
let { type, many} = dog
console.log(type, many)   //animal 2

 

 

（6）default, reat

 default很簡單，意思就是默認值。你們能夠看下面的例子，調用animal()方法時忘了傳參數，傳統的作法就是加上這一句type = type || 'cat'來指定默認值。

function animal(type){
    type = type || 'cat'  
    console.log(type)
}
animal()

若是用ES6咱們能夠直接這麼寫：

function animal(type = 'cat'){
    console.log(type)
}
animal()

 

最後一個rest語法也很簡單，直接看例子：

function animals(...types){
    console.log(types)
}
animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

而若是不用ES6的話，咱們則得使用ES5的arguments。

 

 

3.ECMAScript 6.0性能總結與我的體會

整體來看，ES6正在朝着更簡潔、更友好、可讀性更強、更模塊化的方向發展，這些特性都能支持其成爲一個企業級的開發語言，能夠去開發大型的複雜應用。

本文章從ES6的來歷，講到ES6的一些新特性。但以上僅僅列出了ES6中一些比較經常使用的新特性，並且分析的並不夠深刻，因此咱們仍是須要再去深一步學習和摸索的。「實踐是檢驗真理的惟一方法」，之後在實戰項目中遇到的問題我會再來寫博客分析的。

 

 

4.參考文獻

http://www.jianshu.com/p/ebfeb687eb70

http://es6.ruanyifeng.com/#docs/function

http://cnodejs.org/topic/57266e375a26c4a841ecbf40

https://derickbailey.com/2015/09/28/do-es6-arrow-functions-really-solve-this-in-javascript/

http://www.cnblogs.com/jiangyi666/p/5998914.html

http://blog.csdn.net/pengju_guo/article/details/7292080