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 的下一代標准，類別是指它涵蓋了ES2015、ES2016、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