有人可以解释箭头功能吗？（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()在这种情况下使用该方法，因为如果没有它，它将返回未定义状态。我认为这是因为在这种情况下，this关键字inconsole.log(this.id);指向该counter对象，默认情况下，它找不到id该obj对象的。

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

Answer 1

从文档：箭头函数没有自己的this。使用this封闭的词法作用域的值；箭头函数遵循正常的变量查找规则。因此，在搜索this当前范围中不存在的内容时，最终会this从其包围范围中找到它们。箭头功能确实在做什么.bind(this)。您的两个示例都是等效的。