es6使用箭頭函數需要注意的問題

this問題

箭頭函數沒有它自己的this值，箭頭函數內的this值繼承自外圍作用域，誰定義的函數，this指向誰

箭頭函數要實現類似純函數的效果，必須剔除外部狀態。所以箭頭函數不具備普通函數里常見的 this、arguments 等，當然也就不能用 call()、apply()、bind() 去改變 this 的指向

對於箭頭函數來說，並沒有自己的 this ，它的 this 將始終指向讓它生效的對象，即它的外部調用者：

const obj1 = {
    arrowFunc: () => { console.log(this) },
    normalFunc: function () { console.log(this) }
}

// obj1.arrowFunc 在全局對象 window 下生效，指向 window
obj1.arrowFunc() // window
// 普通方式聲明的函數 this 指向持有這個函數的對象，即 obj1
obj1.normalFunc() // obj1

　　

const obj2 = {
    arrowFunc: function () {
      setTimeout(() => { console.log(this) }, 0)
    },
    normalFunc: function () {
      setTimeout(function () { console.log(this) }, 0)
    }
}

// arrowFunc 中的箭頭函數在 obj2 下生效，指向 obj2
obj2.arrowFunc() // obj2
// normalFunc 中的匿名函數的 this 始終指向 window
obj2.normalFunc() // window

　　

arguments 關鍵字

在函數中，可以通過 arguments 關鍵字來獲取到當前函數中傳入的參數，但是在箭頭函數中是沒有這個關鍵字的，該對象在函數體內不存在。如果要用，可以用 rest 參數代替。

不可以使用yield命令，因此箭頭函數不能用作 Generator 函數。

不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。

箭頭函數轉成 ES5 的代碼如下

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}