javascript - 有人可以解释箭头功能吗？ (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 关键字指的是 counter 对象，并且默认情况下，它找不到 obj 对象的 id。

有点令人困惑，但我认为就是这样。现在，有了箭头功能，我不确定为什么 console.log(this.id); 会起作用。这是否意味着只要在同一个代码块中，就可以使用？

非常感谢!

Answer 1

在第一个示例中，如果您不使用 bind()，则 this 将引用 setTimeout 回调。因为您使用了 .bind()，所以您将 this 引用更改为 obj 对象。这就是您将 42 作为 this.id 的原因。

在第二个例子中，不需要bind()因为箭头函数没有自己的this，它和父this是一样的code>，所以在这种情况下它指向 obj 对象，这就是为什么您还得到 42 作为 this.id