有人可以解释箭头功能吗？ （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();