时间戳

首页 > 解决方案 > 有人可以解释箭头功能吗？(ES6)

javascript - 有人可以解释箭头功能吗？(ES6)

问题描述

我目前正在尝试了解箭头功能。

我知道使用箭头函数的作用域有点不同。但是，我仍然对这一切如何运作感到困惑。

这是一个我不太理解的例子。

// 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的 the obj。

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

非常感谢！

标签： javascript

解决方案

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

在第二个示例中，bind()不需要，因为箭头函数没有自己的this，它与 parent 相同this，所以在这种情况下它指向obj对象，这就是为什么你也42得到this.id

推荐阅读