ES6 箭头函数 vs ES5：使用 ES5 非箭头函数时如何知道将 `this` 绑定到哪个函数

Question

我正在阅读this article 使用 ES6 箭头函数。它给出了下面的例子，你必须使用bind(this)，然后是相应的带有箭头函数的代码。

var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(function() {
      console.log(this.id);
    }.bind(this), 1000);
  }
};

上面写着In the ES5 example, .bind(this) is required to help pass the this context into the function。

我想知道的： 为什么你使用bind(this) 和setTimeout 的回调而不是counter 函数？即为什么上面的代码不是这样的：

var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(function() {
      console.log(this.id);
    }, 1000);
  }.bind(this);
};

Answer 1

为什么你将bind(this) 与setTimeout 的回调一起使用，而不是与计数器函数一起使用？

因为counter 函数（其工作方式类似于obj 对象的方法）已经具有正确的this，因为您将其称为obj.counter()，因此它通过将其称为obj.counter() 得到this .假设你将 counter 调用为obj.counter()，那么如果你在counter() 函数的第一行执行console.log(this.id)，它将正确显示id 的值。

您传递给setTimeout() 的回调没有自然的this 值，除非您在回调函数本身上使用箭头函数或.bind()，因为当setTimeout() 调用您的回调时，它不会设置特定的@987654338 @value（它只是将您的回调作为普通函数调用），因此 this 值变为默认值。这意味着如果运行严格模式，this 将是 undefined，如果在 setTimeout() 回调内以松散-goosey 模式运行，则为全局对象。

查看调用函数时this的值设置here的6种方式。

---

我还应该提到，如果你按照你的提议做了这样的事情：

var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(function() {
      console.log(this.id);
    }, 1000);
  }.bind(this);
};

它不仅对setTimeout() 回调没有任何帮助，而且还会将this 的错误值绑定到counter() 方法。您将得到 this 在 var obj 定义之前的任何内容（也称为 this 的词法值）。