摘要：在繼承的構(gòu)造函數(shù)中，我們必須如上面的例子那么調(diào)用一次方法，它表示構(gòu)造函數(shù)的繼承，與中利用繼承構(gòu)造函數(shù)是一樣的功能。

在實(shí)際開(kāi)發(fā)中，ES6已經(jīng)非常普及了。掌握ES6的知識(shí)變成了一種必須。盡管我們?cè)谑褂脮r(shí)仍然需要經(jīng)過(guò)babel編譯。

ES6徹底改變了前端的編碼風(fēng)格，可以說(shuō)對(duì)于前端的影響非常巨大。值得高興的是，如果你熟悉ES5，學(xué)習(xí)ES6并不需要花費(fèi)太多的時(shí)間就可以掌握，因?yàn)槌Ｓ玫幕A(chǔ)語(yǔ)法并不多，花少量的時(shí)間，就可以開(kāi)始我們的ES6之旅了。

這篇文章不會(huì)詳細(xì)的告訴你ES6的每一個(gè)細(xì)節(jié)知識(shí)，只會(huì)根據(jù)我自己的開(kāi)發(fā)經(jīng)驗(yàn)，將我在實(shí)際開(kāi)發(fā)中常常用到的知識(shí)點(diǎn)分享給大家，給大家學(xué)習(xí)ES6一個(gè)方向的指引。這是因?yàn)榭紤]到很多同學(xué)雖然知道ES6的重要性，但是不知道自己需要掌握那些ES6的知識(shí)，也不知道這些知識(shí)需要掌握到什么程度，這給新手朋友帶來(lái)了許多困惑，因此這篇文章就算是一個(gè)劃重點(diǎn)吧，掌握這些，就可以輕輕松松得進(jìn)行進(jìn)一步學(xué)習(xí)了。

在學(xué)習(xí)之前，推薦大家使用babel官方提供的在線編譯工具，編寫(xiě)自己的demo，會(huì)在右側(cè)實(shí)時(shí)顯示出編譯之后的代碼，以供參考學(xué)習(xí)  http://babeljs.io/repl/

一、新的變量聲明方式 let/const

與var不同，新的變量聲明方式帶來(lái)了一些不一樣的特性，其中最重要的兩個(gè)特性就是提供了塊級(jí)作用域與不再具備變量提升。

通過(guò)2個(gè)簡(jiǎn)單的例子來(lái)說(shuō)明這兩點(diǎn)。

{
    let a = 20;
}

console.log(a);  // a is not defined

而這個(gè)簡(jiǎn)單的例子，會(huì)被編譯為：

{
    let _a = 20;
}

console.log(a);  // a is not defined

// ES5
console.log(a);   // undefined
var a = 20;

// ES6
console.log(a); // a is not defined
let a = 20;

當(dāng)然，你的代碼編譯成為了ES5之后，仍然會(huì)存在變量提升，這一點(diǎn)只需要我們記住即可。在實(shí)際使用中，也需要盡量避免使用變量提升的特性帶來(lái)的負(fù)面影響。只有在面試題中，才會(huì)對(duì)變量提升不停的濫用。

使用ES6，我們需要全面使用let/const替換var，那么什么時(shí)候用let，什么時(shí)候用const就成為了一個(gè)大家要熟練區(qū)分的一個(gè)知識(shí)點(diǎn)。

我們常常使用let來(lái)聲明一個(gè)值會(huì)被改變的變量，而使用const來(lái)聲明一個(gè)值不會(huì)被改變的變量，也可以稱之為常量。

當(dāng)值為基礎(chǔ)數(shù)據(jù)類型時(shí)，那么這里的值，就是指值本身。
而當(dāng)值對(duì)應(yīng)的為引用數(shù)據(jù)類型時(shí)，那么我這里說(shuō)的值，則表示指向該對(duì)象的引用。這里需要注意，正因?yàn)樵撝禐橐粋€(gè)引用，只需要保證引用不變就可以，我們?nèi)匀豢梢愿淖冊(cè)撘盟赶虻膶?duì)象。

當(dāng)我們?cè)噲D改變const聲明的變量時(shí)，則會(huì)報(bào)錯(cuò)。

寫(xiě)幾個(gè)例子，大家可以仔細(xì)揣摩一下：

let a = null;
a = 20;

const obDev = {
    a: 20,
    b: 30
}

obDev.a = 30;

console.log(obDev); // Object {a: 30, b: 30}

const fn = function() {}
const a = obDev.a;
... ...

只要抓住上面我說(shuō)的特性，那么在使用let/const時(shí)就會(huì)顯得游刃有余。
根據(jù)我自己的經(jīng)驗(yàn)，使用const的場(chǎng)景要比使用let的場(chǎng)景多很多。

二、 箭頭函數(shù)的使用

之前我說(shuō)ES6顛覆了js的編碼習(xí)慣，箭頭函數(shù)的使用占了很大一部分。

首先是寫(xiě)法上的不同:

// es5
var fn = function(a, b) {
    return a + b;
}

// es6 箭頭函數(shù)寫(xiě)法，當(dāng)函數(shù)直接被return時(shí)，可以省略函數(shù)體的括號(hào)
const fn = (a, b) => a + b;

// es5
var foo = function() {
    var a = 20；
    var b = 30;
    return a + b;
}

// es6
const foo = () => {
   const a = 20;
   const b = 30;
   return a + b;
}

箭頭函數(shù)可以替換函數(shù)表達(dá)式，但是不能替換函數(shù)聲明

其次還有一個(gè)至關(guān)重要的一點(diǎn)，那就是箭頭函數(shù)中，沒(méi)有this。如果你在箭頭函數(shù)中使用了this，那么該this一定就是外層的this。

也正是因?yàn)榧^函數(shù)中沒(méi)有this，因此我們也就無(wú)從談起用call/apply/bind來(lái)改變this指向。記住這個(gè)特性，能讓你在react組件之間傳值時(shí)少走無(wú)數(shù)彎路。

var person = {
    name: "tom",
    getName: function() {
        return this.name;
    }
}

// 我們?cè)噲D用ES6的寫(xiě)法來(lái)重構(gòu)上面的對(duì)象
const person = {
    name: "tom",
    getName: () => this.name
}

// 但是編譯結(jié)果卻是
var person = {
    name: "tom",
    getName: function getName() {
        return undefined.name;
    }
};

在ES6中，會(huì)默認(rèn)采用嚴(yán)格模式，因此this也不會(huì)自動(dòng)指向window對(duì)象了，而箭頭函數(shù)本身并沒(méi)有this，因此this就只能是undefined，這一點(diǎn)，在使用的時(shí)候，一定要慎重慎重再慎重，不然踩了坑你都不知道自己錯(cuò)在哪！這種情況，如果你還想用this，就不要用使用箭頭函數(shù)的寫(xiě)法。

// 可以稍做改動(dòng)
const person = {
    name: "tom",
    getName: function() {
        return setTimeout(() => this.name, 1000);
    }
}

// 編譯之后變成
var person = {
    name: "tom",
    getName: function getName() {
        var _this = this;  // 使用了我們?cè)趀s5時(shí)常用的方式保存this引用

        return setTimeout(function () {
            return _this.name;
        }, 1000);
    }
};

先記住箭頭函數(shù)的寫(xiě)法，并留意箭頭函數(shù)中關(guān)于this的特殊性，更過(guò)實(shí)踐與注意事項(xiàng)我們?cè)诜庋breact組件時(shí)再慢慢來(lái)感受。

除此之外，箭頭函數(shù)中無(wú)法訪問(wèn)arguments對(duì)象。

三、模板字符串

模板字符串是為了解決使用+號(hào)拼接字符串的不便利而出現(xiàn)的。它的功能非常強(qiáng)大，但是我們大多數(shù)時(shí)候使用它則非常簡(jiǎn)單?？匆粋€(gè)例子大家就明白怎么使用了。

// es6
const a = 20;
const b = 30;
const string = `${a}+$=${a+b}`;

// es5
var a = 20;
var b = 30;
var string = a + "+" + b + "=" + (a + b);

使用 `` 將整個(gè)字符串包裹起來(lái)，而在其中使用 ${} 來(lái)包裹一個(gè)變量或者一個(gè)表達(dá)式。

當(dāng)然模板字符串還支持換行等強(qiáng)大的功能，更多的大家可通過(guò)參考資料進(jìn)一步學(xué)習(xí)。

四、 解析結(jié)構(gòu)

解析結(jié)構(gòu)是一種全新的寫(xiě)法，我們只需要使用一個(gè)例子，大家就能夠明白解析結(jié)構(gòu)到底是怎么一回事兒。

// 首先有這么一個(gè)對(duì)象
const props = {
    className: "tiger-button",
    loading: false,
    clicked: true,
    disabled: "disabled"
}

當(dāng)我們想要取得其中的2個(gè)值：loading與clicked時(shí)：

// es5
var loading = props.loading;
var clicked = props.clicked;

// es6
const { loading, clicked } = props;

// 給一個(gè)默認(rèn)值，當(dāng)props對(duì)象中找不到loading時(shí)，loading就等于該默認(rèn)值
const { loading = false, clicked } = props;

是不是簡(jiǎn)單了許多？正是由于解析結(jié)構(gòu)大大減少了代碼量，因此它大受歡迎，在很多代碼中它的影子隨處可見(jiàn)。

// 比如
// section1
import React, { Component } from "react";

// section2
export { default } from "./Button";

// section3
const { click, loading } = this.props;
const { isCheck } = this.state;

// more  任何獲取對(duì)象屬性值的場(chǎng)景都可以使用解析結(jié)構(gòu)來(lái)減少我們的代碼量

另外，數(shù)組也有屬于自己的解析結(jié)構(gòu)。

// es6
const arr = [1, 2, 3];
const [a, b, c] = arr;

// es5
var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];

數(shù)組以序列號(hào)一一對(duì)應(yīng)，這是一個(gè)有序的對(duì)應(yīng)關(guān)系。
而對(duì)象根據(jù)屬性名一一對(duì)應(yīng)，這是一個(gè)無(wú)序的對(duì)應(yīng)關(guān)系。
根據(jù)這個(gè)特性，使用解析結(jié)構(gòu)從對(duì)象中獲取屬性值更加具有可用性。

五、 函數(shù)默認(rèn)參數(shù)

之前我們不能直接為函數(shù)指定默認(rèn)參數(shù)，因此很多時(shí)候?yàn)榱吮ＷC傳入的參數(shù)具備一個(gè)默認(rèn)值，我們常常使用如下的方法：

function add(x, y) {
    var x = x || 20;
    var y = y || 30;
    return x + y;
}

console.log(add()); // 50

這種方式并不是沒(méi)有缺點(diǎn)，比如當(dāng)我傳入一個(gè)x值為false，這個(gè)時(shí)候任然會(huì)取到默認(rèn)值，就不是我們的本意了。

來(lái)看看ES6的默認(rèn)值寫(xiě)法：

function add(x = 20, y = 30) {
    return x + y;
}

console.log(add());

在實(shí)際開(kāi)發(fā)中給參數(shù)添加適當(dāng)?shù)哪J(rèn)值，可以讓我們對(duì)函數(shù)的參數(shù)類型有一個(gè)直觀的認(rèn)知。

const ButtonGroupProps = {
    size: "normal",
    className: "xxxx-button-group",
    borderColor: "#333"
}

export default function ButtonGroup(props = ButtonGroupProps) {
    ... ...
}

六、 展開(kāi)運(yùn)算符

在ES6中用...來(lái)表示展開(kāi)運(yùn)算符，它可以將數(shù)組方法或者對(duì)象進(jìn)行展開(kāi)。先來(lái)看一個(gè)例子它是如何使用的。

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];

// 這樣，arr2 就變成了[1, 2, 3, 10, 20, 30];

當(dāng)然，展開(kāi)對(duì)象數(shù)據(jù)也是可以得到類似的結(jié)果

const obj1 = {
  a: 1,
  b: 2,
  c: 3
}

const obj2 = {
  ...obj1,
  d: 4,
  e: 5,
  f: 6
}

// 結(jié)果類似于 const obj2 = Object.assign({}, obj1, {d: 4})

展開(kāi)運(yùn)算符還常常運(yùn)用在解析結(jié)構(gòu)之中，例如我們?cè)赗aect封裝組件的時(shí)候常常不確定props到底還有多少數(shù)據(jù)會(huì)傳進(jìn)來(lái)，就會(huì)利用展開(kāi)運(yùn)算符來(lái)處理剩余的數(shù)據(jù)。

// 這種方式在react中十分常用
const props = {
  size: 1,
  src: "xxxx",
  mode: "si"
}


const { size, ...others } = props;

console.log(others)

// 然后再利用暫開(kāi)運(yùn)算符傳遞給下一個(gè)元素，再以后封裝react組件時(shí)會(huì)大量使用到這種方式，正在學(xué)習(xí)react的同學(xué)一定要搞懂這種使用方式

展開(kāi)運(yùn)算符還用在函數(shù)的參數(shù)中，來(lái)表示函數(shù)的不定參。只有放在最后才能作為函數(shù)的不定參，否則會(huì)報(bào)錯(cuò)。

// 所有參數(shù)之和
const add = (a, b, ...more) => {
    return more.reduce((m, n) => m + n) + a + b
}

console.log(add(1, 23, 1, 2, 3, 4, 5)) // 39

展開(kāi)運(yùn)算符的運(yùn)用可以大大提高我們的代碼效率，但是在剛開(kāi)始使用的時(shí)候比較繞腦，掌握好了用起來(lái)還是非常爽的，記住這些使用場(chǎng)景，平時(shí)在用的時(shí)候可以刻意多運(yùn)用就行了。

七、對(duì)象字面量 與 class

ES6針對(duì)對(duì)象字面量做了許多簡(jiǎn)化語(yǔ)法的處理。

當(dāng)屬性與值的變量同名時(shí)。

const name = "Jane";
const age = 20

// es6
const person = {
  name,
  age
}

// es5
var person = {
  name: name,
  age: age
};

那么這種方式在任何地方都可以使用，比如在一個(gè)模塊對(duì)外提供接口時(shí)

const getName = () => person.name;
const getAge = () => person.age;

// commonJS的方式
module.exports = { getName, getAge }

// ES6 modules的方式
export default { getName, getAge  }

除了屬性之外，對(duì)象字面量寫(xiě)法中的方法也可以有簡(jiǎn)寫(xiě)方式。

// es6
const person = {
  name,
  age,
  getName() { // 只要不使用箭頭函數(shù)，this就還是我們熟悉的this
    return this.name
  }
}

// es5
var person = {
  name: name,
  age: age,
  getName: function getName() {
    return this.name;
  }
};

在對(duì)象字面量中可以使用中括號(hào)作為屬性，表示屬性名也能是一個(gè)變量了。

const name = "Jane";
const age = 20

const person = {
  [name]: true,
  [age]: true
}

在ant-design的源碼實(shí)現(xiàn)中，就大量使用了這種方式來(lái)拼接當(dāng)前元素的className，例如:

let alertCls = classNames(prefixCls, {
      [`${prefixCls}-${type}`]: true,
      [`${prefixCls}-close`]: !this.state.closing,
      [`${prefixCls}-with-description`]: !!description,
      [`${prefixCls}-no-icon`]: !showIcon,
      [`${prefixCls}-banner`]: !!banner,
 }, className);

ant-design是一個(gè)認(rèn)可度非常高的UI組件庫(kù)，官方使用react的方式進(jìn)行了實(shí)現(xiàn)，除此之外，還有vue也有對(duì)應(yīng)的實(shí)現(xiàn)，有興趣的同學(xué)可以去他們的官網(wǎng)了解學(xué)習(xí)。https://ant.design/index-cn

class

ES6為我們創(chuàng)建對(duì)象提供了新的語(yǔ)法糖，這就是Class語(yǔ)法。如果你對(duì)ES5中面向?qū)ο蟮姆绞奖容^熟悉的話，Class掌握起來(lái)也是非常迅速的，因?yàn)槌藢?xiě)法的不同，它并不會(huì)增加新的難以理解的知識(shí)點(diǎn)。我們先利用一個(gè)簡(jiǎn)單的例子來(lái)看看寫(xiě)法的不同。

// ES5
// 構(gòu)造函數(shù)
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 原型方法
Person.prototype.getName = function() {
  return this.name
}

// ES6
class Person {
  constructor(name, age) {  // 構(gòu)造函數(shù)
    this.name = name;
    this.age = age;
  }

  getName() {  // 原型方法
    return this.name
  }
}

babel會(huì)將ES6的寫(xiě)法編譯成為利用Object.defineProperty實(shí)現(xiàn)的方式，這個(gè)方法的具體用處大家可以在《JavaScript高級(jí)編程3》中學(xué)習(xí)了解，包括get，set，等都有詳細(xì)的說(shuō)明

除此之外，我們還需要特別注意在實(shí)際使用中的幾種寫(xiě)法方式的不同，在下面的例子注釋中，我說(shuō)明了他們分別對(duì)應(yīng)的ES5中的含義。

class Person {
  constructor(name, age) {  // 構(gòu)造函數(shù)
    this.name = name;
    this.age = age;
  }

  getName() {   // 這種寫(xiě)法表示將方法添加到原型中
    return this.name
  }

  static a = 20;  // 等同于 Person.a = 20

  c = 20;   // 表示在構(gòu)造函數(shù)中添加屬性 在構(gòu)造函數(shù)中等同于 this.c = 20

// 箭頭函數(shù)的寫(xiě)法表示在構(gòu)造函數(shù)中添加方法，在構(gòu)造函數(shù)中等同于this.getAge = function() {}
  getAge = () => this.age   

}

箭頭函數(shù)需要注意的仍然是this的指向問(wèn)題，因?yàn)榧^函數(shù)this指向不能被改變的特性，因此在react組件中常常利用這個(gè)特性來(lái)在不同的組件進(jìn)行傳值會(huì)更加方便。

繼承 extends

相比ES5，ES6的繼承就要簡(jiǎn)單很多，我們直接來(lái)看一個(gè)例子。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  getName() {
    return this.name
  }
}

// Student類繼承Person類
class Student extends Person {
  constructor(name, age, gender, classes) {
    super(name, age);
    this.gender = gender;
    this.classes = classes;
  }

  getGender() {
    return this.gender;
  }
}

我們只需要一個(gè)extends關(guān)鍵字，就可以實(shí)現(xiàn)繼承了，不用像ES5那樣去擔(dān)心構(gòu)造函數(shù)繼承和原型繼承，除此之外，我們還需要關(guān)注一個(gè)叫做super的方法。

在繼承的構(gòu)造函數(shù)中，我們必須如上面的例子那么調(diào)用一次super方法，它表示構(gòu)造函數(shù)的繼承，與ES5中利用call/apply繼承構(gòu)造函數(shù)是一樣的功能。

// 構(gòu)造函數(shù)中
// es6
super(name, age);

// es5
Person.call(this);

super還可以直接調(diào)用父級(jí)的原型方法，super.getName，但是我自己從來(lái)沒(méi)這樣用過(guò)，也就不擴(kuò)展說(shuō)了。

繼承在react中有大量的使用場(chǎng)景，許多組件都利用繼承來(lái)創(chuàng)建。

import React, { Component } from "react";

class App extends Component {

  defaultProps = {}
  state = {}
  componentWillMount() {}
  componentDidMount() {}

  btnClick = e => {}

  render() {}
}

只要根據(jù)我們上面所學(xué)到的知識(shí)，明確的知道哪些屬性方法是放在構(gòu)造函數(shù)中，哪些屬性方法是放到了原型中，那么我們自己在編寫(xiě)react組件的時(shí)候就要簡(jiǎn)單和清晰很多。

其實(shí)只要我們ES5面向?qū)ο蟮闹R(shí)足夠扎實(shí)，ES6和react掌握起來(lái)也沒(méi)有太多的難度，所有的學(xué)習(xí)難點(diǎn)，并不在ES6這些不同的語(yǔ)法糖上，而在于ES5中的原理，因此我在前面分享ES5的核心知識(shí)的時(shí)候，很多讀者老爺都迫不及待的希望我能夠更多的說(shuō)一說(shuō)ES6的知識(shí)。其實(shí)我們都沒(méi)有必要那么著急，只要前面10多篇文章的知識(shí)足夠扎實(shí)，這篇文章所涉及到的常用的ES6知識(shí)，最多花30分鐘也就掌握了。這些寫(xiě)法上的不同并不會(huì)造成大家理解上的困難，只需要有一個(gè)熟悉過(guò)程就行了。所以大家的重點(diǎn)，還是要回歸到基礎(chǔ)上來(lái)。

八、Promise

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

九、 模塊 Modules

因?yàn)閷W(xué)習(xí)模塊需要一個(gè)學(xué)習(xí)場(chǎng)景，因此我決定在下一篇文章中結(jié)合create-react-app一起分享給大家。

深入學(xué)習(xí)ES6推薦 http://es6.ruanyifeng.com/

前端基礎(chǔ)進(jìn)階系列目錄