什么是箭頭函數(shù)？

ES6標(biāo)準(zhǔn)新增了一種新的函數(shù)：Arrow Function（箭頭函數(shù)）。箭頭函數(shù)相當(dāng)于匿名函數(shù)，并且簡化了函數(shù)定義。
箭頭函數(shù)的語法

(parameters) => { statements }

舉一個常規(guī)的例子

// 使用常規(guī)語法定義函數(shù)
function funcName(params) {
   return params * 3;
 }
funcName(1);
// 3

// 使用箭頭函數(shù)定義函數(shù)
var funcName = (params) => params * 3
funcName(1);
// 3

可以清晰得看到，只須一行代碼就可以搞定一個函數(shù)，簡化了函數(shù)定義，書寫匿名函數(shù)的時候更加方便，在代碼書寫過程中多處可以使用到箭頭函數(shù)。

語法解析

// 通用語法
(parameters) => { statements }
// 只有一個參數(shù)時，可以省略小括號
parameters => { statements }
// 沒有參數(shù)時，簡化為
() => {statements }
// 返回值只有一個表達(dá)式時，可以省略大括號
parameters => expression

//特殊例子，返回帶有大括號的單表達(dá)式
x => { foo: x }  // error
x => ({ foo: x }) // 加上小括號，ok

沒有局部this的綁定

和一般的函數(shù)不同，箭頭函數(shù)不會綁定this。 或則說箭頭函數(shù)不會改變this本來的綁定。
下面舉個例子

function Counter() {
  this.num = 0;
  this.timer = setInterval(function add() {
    this.num++;
    console.log(this.num);
  }, 1000);
}

var b = new Counter();
// NaN
// NaN
// NaN
// ...

上述代碼是使用常規(guī)函數(shù)定義，setInterval是一個普通函數(shù)，而且沒有bind、call、apply等，所以內(nèi)部的this指向的是全局this，全局this沒有num這個屬性，從而這邊輸出的都是NaN。要解決這個問題有多種方法，可以先將Counter函數(shù)的this用一個參數(shù)保存起來，在setInterval函數(shù)內(nèi)部調(diào)用這個參數(shù)；也可以為setInterval綁定一個this，通過bind實現(xiàn)。在這邊，我們考慮使用箭頭函數(shù)來解決這個問題，看看下面的代碼：

function Counter() {
  this.num = 0;
  this.timer = setInterval(() => {
    this.num++;
    console.log(this.num);
  }, 1000);
}

var b = new Counter();
// 1
// 2
// 3
// ...

因為箭頭函數(shù)不會改變this本來的綁定，所以在上述代碼中通過Counter構(gòu)造函數(shù)綁定的this將會被保留。在setInterval函數(shù)中，this依然指向我們新創(chuàng)建的b對象。

通過上述的描述，我們可以知道箭頭函數(shù)沒有局部this的綁定，所以我們使用箭頭函數(shù)來實現(xiàn)React的事件處理。參考：《React事件處理》

總結(jié)

箭頭函數(shù)有兩個突出的優(yōu)點：

• 語法簡單，簡化函數(shù)定義
• 不會改變this的綁定