有人可以解釋箭頭功能嗎？ （ES6）

Question

我正在嘗試了解箭頭功能。

我知道使用箭頭功能時，作用域有所不同。 但是，我仍然對這一切的工作方式感到困惑。

這是一個我不太了解的例子。

// ES5
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(function() {
      console.log(this.id);
    }.bind(this), 1000);
  }
};

現在，這里是完全相同的代碼塊，但使用了箭頭功能。

// ES6
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(() => {
      console.log(this.id);
    }, 1000);
  }
};

看着它，在我看來，這全都關乎水平。 如果我錯了，請糾正我，但是在ES5中，我們將在此實例中使用.bind()方法，因為如果沒有它，它將返回未定義狀態。 我認為這是因為在這種情況下， console.log(this.id);的this關鍵字console.log(this.id); 是指counter對象，默認情況下，它找不到obj對象的id 。

有點令人困惑，但我認為僅此而已。 現在，使用箭頭功能，我不確定為什么console.log(this.id); 會工作。 這是否意味着只要它在同一代碼塊中，就可以使用？

非常感謝！

Answer 1

在第一個例子，如果你不會用bind() ，那么this將參考setTimeout回調。 因為使用了.bind()您this引用更改為obj對象。 這就是為什么您將42作為this.id 。

在第二個示例中，不需要bind()因為箭頭函數沒有自己的this ，它與父this相同，因此在這種情況下，它指向obj對象，這就是為什么您還獲得42作為this.id

Answer 2

從文檔 ：

箭頭函數沒有它自己的this 。 使用封閉詞匯范圍的this值； 箭頭函數遵循正常的變量查找規則。 因此，盡管尋找this其中不存在於當前范圍內，他們最終找到this從它的封閉范圍內。

箭頭函數正好執行.bind(this)作用。 您的兩個示例都是等效的。

Answer 3

眾所周知，ES6箭頭功能沒有this因此可以使用其“父級”的this 。 但是您也不會注意到ES6中的另一個差異：在js對象中，您不需要使用function詞，如下所示

 // ES6 var obj = { id: 42, counter() { setTimeout(() => { console.log(this.id / 7); }, 1000); } }; console.log('start') obj.counter();