摘要：但是，的本質(zhì)仍然是函數(shù)，是構(gòu)造函數(shù)的另外一種寫法。報錯原生構(gòu)造函數(shù)的繼承對于一些原生的構(gòu)造函數(shù)，比如，，，等，在是無法通過方法實現(xiàn)原生函數(shù)的內(nèi)部屬性，原生函數(shù)內(nèi)部的無法綁定，內(nèi)部屬性獲得不了。

在沒有學(xué)習(xí) ES6 之前，學(xué)習(xí) React，真的是一件非常痛苦的事情。即使之前你對 ES5 有著很好的基礎(chǔ)，包括閉包、函數(shù)、原型鏈和繼承，但是 React 中已經(jīng)普遍使用 ES6 的語法，包括 modules、class、箭頭函數(shù)等，還有 JSX 語法。所以，在學(xué)習(xí) React 之前一定要先學(xué)習(xí) ES6。

關(guān)于 ES6 你必須要知道的一個教程，ECMAScript 6入門。這本書對于 ES6 的講解非常詳細(xì)，一步一步跟著來，絕對會對 ES6 的語法都了解到。

學(xué)習(xí) ES6，還要知道一個 ES6 的語法編譯器，Babel。ES6 出來很久了，并不是所有瀏覽器都支持，Babel 就可以把 ES6 代碼轉(zhuǎn)換成 ES5，讓所有瀏覽器都支持你寫的代碼。Babel 內(nèi)嵌了對 JSX 的支持，學(xué)習(xí) React 必備。在線實驗是一個 Babel 的在線編譯器，可以用來練習(xí) ES6 語法，并實時觀測轉(zhuǎn)換成 ES5 的代碼效果。

準(zhǔn)備工作做完了，接下來開始今天的主題，你不得不學(xué)的 ES6！

講真，自從出了箭頭函數(shù)之后，再也不用擔(dān)心 this 問題了，而且就簡化代碼這一方面來說，箭頭函數(shù)可謂是裝逼神器。

箭頭函數(shù)有幾點需要注意，如果 return 值就只有一行表達(dá)式，可以省去 return，默認(rèn)表示該行是返回值，否則需要加一個大括號和 return。如果參數(shù)只有一個，也可以省去括號，兩個則需要加上括號。比如下面的例子：

var f = v => v*2;
// 等價于
var f = function(v){
  return v*2;
}

// 判斷偶數(shù)
var isEven = n => n % 2 == 0;

// 需要加 return
var = (a, b) => {
  if(a >= b)
    return a;
  return b;
}

還有 this 的問題，我覺得這篇文章說的非常好。普通函數(shù)的 this 是可變的，我們把函數(shù)歸為兩種狀態(tài)，一種是定義時，一種是執(zhí)行時，如果仔細(xì)研究會發(fā)現(xiàn)，函數(shù)中的 this 始終是指向函數(shù)執(zhí)行時所在的對象。比如全局函數(shù)執(zhí)行時，this 執(zhí)行 window，對象的方法執(zhí)行時，this 執(zhí)行該對象，這就是函數(shù) this 的可變。而箭頭函數(shù)中的 this 是固定的，看下面的例子：

function obj(){
  setTimeout(()=>console.log(this.id), 20);
}
var id = 1;
obj.call({id: 2}); // 2

執(zhí)行的結(jié)果是 2 而不是全局的 1，表示 setTimeout 函數(shù)執(zhí)行的時候，this 指向的不是 window，這和普通函數(shù)是有區(qū)別的。

實際上，箭頭函數(shù)并沒有 this 對象，將箭頭函數(shù)轉(zhuǎn)成 ES5 會發(fā)現(xiàn)：

// ES6
function obj() {
  setTimeout(()=>console.log(this.id), 20);
}

// ES5
function foo() {
  var _this = this;
  setTimeout(function () {
    console.log(_this.id);
  }, 20);
}

通過 call aply 等方法是無法綁定 箭頭函數(shù)中的 this：

var f = () => this.x;
var x = 1;
f.call({x: 2}); // 1

對 this 的一個總結(jié)就是 在對象的方法中直接使用箭頭函數(shù)，會指向 window，其他箭頭函數(shù) this 會指向上一層的 this，箭頭函數(shù)并沒有存儲 this：

var obj = {
  id: 1,
  foo: ()=>{
    return this.id;
  }
}
var id = 2;
obj.foo(); // 2

除了 this 之外，箭頭函數(shù)的 arguments 也是不存在，不能使用 new 來構(gòu)造，也不能使用 yield 命令。

盼星星盼月亮，終于盼來了 JS 的繼承。但是 ES6 中的繼承和已經(jīng)很完善的 ES5 中流行的繼承庫，到底有多少差異？

先來看一個例子：

//定義類
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  // 注意函數(shù)構(gòu)造的方式
  toString() {
    return "(" + this.x + ", " + this.y + ")";
  }
}
var p1 = new Point(5, 5);
p1.toString(); //"(5, 5)"

typeof Point // function
p1.constructor == Point //true

直接使用 class 關(guān)鍵字，constructor 作為構(gòu)造方法，函數(shù)可以直接 toString(){} 的方式。

但是，class 的本質(zhì)仍然是函數(shù)，是構(gòu)造函數(shù)的另外一種寫法。既然 class 的本質(zhì)是函數(shù)，那么必不可少的一些 proto，prototype 方法也是存在的。

通過關(guān)鍵字 extends 可以實現(xiàn) class 的繼承，

class Square extends Point{
  constructor(x){
    super(x, x);
  }
  toString(){
    return super.toString() + "Square!";
  }
}
var s1 = new Square(4);
s1.toString(); //"(4, 4)Square!"
s1 instanceof Point // true
s1 instanceof Square // true

既然說到了繼承，對 es5 中繼承了解到小伙伴，肯定會疑惑關(guān)于 class 中的 proto 和 prototype 是一個什么樣的關(guān)系。

子類的 proto 指向父類，子類的 prototype 的 proto 指向父類的 prototype，這和 ES5 并沒有區(qū)別。

Square.__proto__ === Point
// true
Square.prototype.__proto__ === Point.prototype
// true

在 Java 等語言中，是有 super 繼承父類函數(shù)，JS 中更加靈活，可以用作父類的構(gòu)造函數(shù)，又可以用作對象。

子類的 constructor 必須要調(diào)用 super 方法，且只能在 constructor 方法中調(diào)用，其他地方調(diào)用會報錯。

class A {
  constructor(a){
    this.x = a;
  }
}
A.prototype.y = 2;
class B extends A{
  constructor(a){
    super();
  }
  getY(){
    super() // 報錯
    return super.y
  }
}

對于一些原生的構(gòu)造函數(shù)，比如 Array，Error，Object，String 等，在 ES5 是無法通過 Object.create 方法實現(xiàn)原生函數(shù)的內(nèi)部屬性，原生函數(shù)內(nèi)部的 this 無法綁定，內(nèi)部屬性獲得不了。原生構(gòu)造函數(shù)的繼承。

ES6 的 class 可以解決這個問題。

class MyArray extends Array {
  constructor(...args) {
    super(...args);
  }
}

var arr = new MyArray();
arr[0] = 12;
arr.length // 1

arr.length = 0;
arr[0] // undefined

extends 關(guān)鍵字不僅可以用來繼承類，還能用來繼承原生的構(gòu)造函數(shù)，在原生函數(shù)的基礎(chǔ)上，自定義自己的函數(shù)。

ES6 支持 static 關(guān)鍵字，該關(guān)鍵字定義的方法，不會被實例繼承，但可以被子類繼承：

class A{
  static add(x, y){
    return x + y;
 }
}
A.add(1, 2);
var a = new A();
a.add()// error
class B extends A{}
B.add(2, 2)// 4 

ES6 之前，JS 一直沒有 modules 體系，解決外部包的問題通過 CommonJS 和 AMD 模塊加載方案，一個用于服務(wù)器，一個用于瀏覽器。ES6 提出的 modules （import／export）方案完全可以取代 CommonJS 和 AMD 成為瀏覽器和服務(wù)器通用的模塊解決方案。

關(guān)于模塊，就只有兩個命令，import 用于導(dǎo)入其他模塊，export 用于輸出模塊。

// profile.js
var firstName = "Michael";
var lastName = "Jackson";
var year = 1958;

export {firstName, lastName, year};

// main.js
import {firstName, lastName, year} from "./profile";
console.log(firstName, lastName) // Michael Jackson

import 加載的模塊可以只加載用到的，但是必須使用同名的原則，可以用 as 來解決名字問題，同樣，as 也可以解決 export 問題：

//main.js
import { lastName as surname } from "./profile";
console.log(surname); // Jackson

//profile.js
export {firstName as name}

export 可以輸出的內(nèi)容很多，包括變量、函數(shù)、類，貌似都可以輸出，還可以借助 export default 來加載默認(rèn)輸出。

//default.js
function add(a, b){
  return a + b;
}
export default add;
// 實際上
export {add as default};

// main.js
import add from "./default"
//實際上 add 名字可以隨便起
import {default as add} from "./default"

這部分 ES6模塊加載的實質(zhì) 完全只能參考了，因為對模塊加載用的不多，沒有一點經(jīng)驗，但是看到作者提到了拷貝和引用，感覺逼格很高的樣子。

ES6模塊加載的機(jī)制，與CommonJS模塊完全不同。CommonJS模塊輸出的是一個值的拷貝，而ES6模塊輸出的是值的引用。

比如一個 CommonJS 加載的例子：

// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
};

// main.js
var mod = require("./lib");

console.log(mod.counter);  // 3
mod.incCounter();
console.log(mod.counter); // 3

這個值會被 mod 緩存，而取不到原始的值。

ES6 中不一樣，它只是生成一個引用，當(dāng)真正需要的時候，才會到模塊里去取值，

// lib.js
export let counter = 3;
export function incCounter() {
  counter++;
}

// main.js
import { counter, incCounter } from "./lib";
console.log(counter); // 3
incCounter();
console.log(counter); // 4

循環(huán)加載也比較有意思，經(jīng)常能看到 nodejs 中出現(xiàn)加載同一個模塊，而循環(huán)加載卻不常見，nodejs 使用 CommonJS 模塊機(jī)制，CommonJS 的循環(huán)加載采用的是加載多少，輸出多少，就像是我們平時打了斷點一樣，會跳到另外一個文件，執(zhí)行完在跳回來。

//a.js
exports.done = "1";
var a = require("./b.js");
console.log("half a=%s", a);
exports.done = "3";
console.log("done a");

//b.js
exports.done = "2";
var b = require("./a.js");
console.log("half b=%s", b);
exports.done = "4";
console.log("done b");

//main.js
var a = require("./a.js");
var b = require("./b.js");
console.log("all done! a=%s,b=%s",a,b)

node main.js 的結(jié)果：

half a=2
done a
half b=3
done b
all done! a=3,b=4

這就是 CommonJS 所謂的循環(huán)加載。

而 ES6 采用的加載模式也不一樣，因為使用動態(tài)引用，必須要開發(fā)者保證能 import 到值：

// a.js如下
import {bar} from "./b.js";
console.log("a.js");
console.log(bar);
export let foo = "foo";

// b.js
import {foo} from "./a.js";
console.log("b.js");
console.log(foo);
export let bar = "bar";

結(jié)果：

$ babel-node a.js
b.js
undefined
a.js
bar

循環(huán)加載稍有不慎，就會 underfined。

ES6 在字符串上面可是下了不少功夫，先是解決了字符 unicode 的 bug，增加了一些處理多字節(jié)字符串 codePointAt 函數(shù)，還多了字符串的遍歷接口 for...of，這個遍歷借口有點仿造 python 的感覺。只要有迭代器功能的對象，都可以用 for...of 來遍歷。

ES6 添加了一些有意思的函數(shù)，比如 repeat()，前幾天比較火的文章‘五道經(jīng)典的前端面試題’，就有提到一個在字符串上實現(xiàn)原生的重復(fù)方法，這里的 repeat 可以直接解決。

關(guān)于字符串上的新內(nèi)容，非常有幫助的還是模版字符串。之前在 js 中跨行的字符串實現(xiàn)起來很別扭，而 python 可以用三個反引號來實現(xiàn)。

ES6 中的模版字符串使用需要注意以下內(nèi)容：

// ` 可以跨行
var html = `
  

    
first
    
second
  
`

//${} 調(diào)用變量和函數(shù)
var name = "window";
var str = `my name is ${name};`;
// my name is window;

var add = (a, b)=> a+b;
var str = `2 + 3 = ${add(2,3)}`;
// "2 + 3 = 5"

用過 ejs 、swig 或 hbs 等模版，它們可以嵌入 js 代碼，ES6 的模版字符串也可以。使用 <%...%> 放置 JavaScript 代碼，使用 <%= ... %> 輸出 JavaScript 表達(dá)式。

var template = `
  

    <% data.forEach(function(item){ %>
      
<%= item %>
    <% }) %>
  
`

下面就可以寫正則表達(dá)式替換掉自定義字符并執(zhí)行函數(shù)：

function compile(str){
  var evalExpr = /<%=(.+?)%>/g;
  var expr = /<%([sS]+?)%>/g;
  str = str.replace(evalExpr, "`); 
  join( $1 ); 
  join(`")
    .replace(expr, "`); 
 $1 
  join(`");
  str = "join(`" + str + "`);";
  var script = `
    (function parse(data){
      var output = "";

      function join(html){
        output += html;
      }

      ${ str }

      return output;
    })
  `
  return script;
}
var strParse = eval(compile(template));
// 使用
var html = strParse(["shanghai", "beijing", "nanjing"]);
//  
    
//    
shanghai
//    
beijing
//    
nanjing
//  

通過兩次使用字符串模版，并使用 eval 函數(shù)，一個 ES6 簡易模版就這樣完成了。

ES5 通過 var 來申明變量，ES6 新添 let 和 const，且作用域是 塊級作用域。

let 使用和 var 非常類似，let 不存在變量提升，也不允許重復(fù)申明，let 的聲明只能在它所在的代碼塊有效，比如 for 循環(huán)，非常適合使用 let：

for(let i = 0; i < data.length; i++){
  console.log(data[i]);
}
console.log(i); // error

如果用 var 來申明 i，最后不會報錯。之前學(xué)閉包的時候，有一個利用閉包解決循環(huán)的問題，用 let 可以解決:

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

const 就是申明常量用的，一旦申明即被鎖定，后面無法更改。

const PI = 3.14;
PI = 3; //error

let 和 const 都是塊級作用域，塊級作用域可以任意嵌套，且 {} 內(nèi)定義的變量，外層作用域是無法獲得的，且內(nèi)外層的作用域可以同名。

function fn() {
  let n = 1;
  if (true) {
    let n = 2;
  }
  console.log(n); // 1
}

解構(gòu)賦值真的很好用，但是我每次都忘記使用。ES6 解構(gòu)賦值基本語法 var [a, b, c] = [1, 2, 3];，從數(shù)組中取值，并按照先后次序來賦值。如果解構(gòu)賦值不成功，就會返回 underfined，解構(gòu)賦值也允許指定默認(rèn)值：

var [a, b] = [1];
b // undefined

// 指定默認(rèn)值
var [a, b = 2] = [1];
b // 2

除了數(shù)組，對象也可以解構(gòu)賦值，但是數(shù)組是有順序的，而對象沒有順序，如果想要成功賦值，必須與對象屬性同名，才能成功賦值，否則返回 underfined：

var {a, b} = {a: 1, b: 2};
a // 1
b // 2

var {a, c} = {a: 1, b: 2};
c // undefined

字符串的解構(gòu)賦值比較有意思，既可以把字符串當(dāng)作可以迭代的數(shù)組，又可以當(dāng)作對象，比如：

var [a1,a2,a3,a4,a5] = "hello";
a2 // e

var {length : len} = "hello";
len // 5

函數(shù)參數(shù)的解構(gòu)賦值，看一個 forEach 的例子：

var data = [[1, 2], [3, 4]];
data.forEach(([a, b]) => console.log(a+b));
// 3
// 7

一直以來，回掉問題都是一件令人頭疼的事，調(diào)試的時候感覺代碼跳來跳去，玩著玩著就暈了。ES6 提供 Promise 對象（函數(shù)），專門用來處理回掉。

var promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

resolve 和 reject 是兩個異步操作調(diào)用函數(shù)，當(dāng)異步操作完成時，調(diào)用 resolve，error 則調(diào)用 reject，這兩個函數(shù)的功能就是把參數(shù)傳遞給回掉函數(shù)。then 函數(shù)用來處理成功或失敗狀態(tài)。

function loadImageAsync(url) {
  var p = new Promise(function(resolve, reject) {
    var image = new Image();

    image.onload = function() {
      resolve(image);
    };

    image.onerror = function() {
      reject(url);
    };

    image.src = url;
  });
  p.then(function(image){
    document.body.appendChild(image);
  }, function(url){
    throw new Error("Could not load "+ url);
  })
}

loadImageAsync("http://yuren.space/images/bg.gif");

上面是一個用 Promise 實現(xiàn)的異步加載圖片的函數(shù)。

Python 中有 for in 運算符，ES6 就搞了個 for...of。當(dāng)使用 for...of 循環(huán)遍歷某種數(shù)據(jù)結(jié)構(gòu)時，該循環(huán)會自動去尋找 Iterator 接口。一種數(shù)據(jù)結(jié)構(gòu)只要部署了 Iterator 接口，我們就稱這種數(shù)據(jù)結(jié)構(gòu)是可遍歷的，對象、數(shù)組、字符串都是可遍歷的。

var str = "hello";
for(let i of str){
  console.log(i);
}
// "h" "e" "l" "l" "o"

...也非常好用，可以直接把可遍歷對象直接轉(zhuǎn)換成數(shù)組：

var str = "hello";
[...str] //["h", "e", "l", "l", "o"]

let arr = ["b", "c"];
["a", ...arr, "d"] 
// ["a", "b", "c", "d"]

有了 ... 之后，方便對非數(shù)組可遍歷的對象進(jìn)行轉(zhuǎn)換，比如 arguments 和 querySelectAll 的結(jié)果：

[...arguments] // Array

var selects = document.querySelectAll("a");
[...selects] // Array

ES6 新增 Set 集合對象，其實像其他語言早都支持了，不過，吃瓜群眾，不覺明厲，以后，再遇到數(shù)組去重算法題，就可以：

[...(new Set([1, 2, 2, 3]))];
//[1, 2, 3]

Set 方法分為操作和遍歷，操作方法有 add-添加成員， delete-刪除成員， has-擁有判斷返回布爾值， clear-清空集合。

遍歷操作有 keys()，values()，entries()，forEach()，...，for of，map 和 filter 函數(shù)也可以用于 Set，不過要進(jìn)行巧妙操作，先轉(zhuǎn)換成數(shù)組，在進(jìn)行操作：

let set = new Set([1,2,3]);
set = new Set([...set].map(a => a*2));
// Set {2, 4, 6}

Map 用來解決對象只接受字符串作為鍵名，Map 類似于對象，也是鍵值對集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當(dāng)作鍵。

Map 可以通過 [set、 get、 has、 delete] 方法來操作：

var m = new Map();
var arr = [1, 2];
m.set(arr, "array");
m.get(arr); // "array"

m.has(arr) // true
m.delete(arr) // true
m.has(arr) // false

參數(shù)默認(rèn)這個功能使用起來還是比較方便的，以前參數(shù)都是通過 || 來實現(xiàn)默認(rèn)，現(xiàn)在可以使用默認(rèn)參數(shù)。不過這個功能在 Python 等語言中已經(jīng)是支持的。

// 以前寫代碼
var sayHello = function(name){
  var name = name || "world";
  console.log("hello " + name);
}

//參數(shù)默認(rèn)
var sayHello = function(name = "world"){
  console.log("hello " + name);
}

sayHello() // "hello world"
sayHello("ES6") // "hello ES6"

對于不定參數(shù)，以前都是對 arguments 對象處理，且 arguments 對象還是個偽數(shù)組，現(xiàn)在方便了：

var add = function(...arr){
  console.log(arr.constructor.name) // Array
  return arr.reduce((a, b) => a+b, 0);
}
add(1,2,3) // 6

總之，對于 ES6 的學(xué)習(xí)還是要活用，當(dāng)我看了一遍 ECMAScript 6入門時候，感覺知識點還是很多，有點亂。當(dāng)接觸了 react 之后，發(fā)現(xiàn)很多語法都非常的熟悉，于是就從頭溫習(xí)了 ES6，并整理了這篇文章?？赡埽氵€不知道，這篇文章，大部分都是參考阮一峰老師的。共勉！

ECMAScript 6入門
30分鐘掌握ES6/ES2015核心內(nèi)容（上）
30分鐘掌握ES6/ES2015核心內(nèi)容（下）
ES6 學(xué)習(xí)筆記
ES6新特性概覽
ES6js.com 官網(wǎng)

歡迎來我博客交流。