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中的console.log(this.id);关键字是指counter对象，默认情况下，它找不到{{ 1}}对象。

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

非常感谢！

Answer 1

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

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

的原因

Answer 2

来自docs：

箭头功能没有自己的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();

有人可以解释箭头功能吗？（ES6）

3 个答案:

有人可以解释箭头功能吗？ （ES6）

3 个答案:

有人可以解释箭头功能吗？（ES6）