Can you bind ' this ' in an arrow function?

在JavaScript中，箭头函数与普通函数（如函数表达式或函数声明）有一个关键的不同：箭头函数不绑定自己的 this，它们会捕获其所在上下文的 this 值，并作为自己的 this 值使用。

由于箭头函数没有自己的 this 绑定，尝试在箭头函数中绑定 this 是不起作用的。举例来说，如果你尝试使用 .bind()、.call() 或 .apply() 方法改变箭头函数的 this 指向，这些方法将不会对箭头函数产生预期的绑定效果。

例如，考虑下面的代码段：

javascript
let group = {
  title: "Our Group",
  members: ["John", "Pete", "Alice"],
  showList() {
    this.members.forEach(
      (member) => {
        console.log(this.title + ': ' + member);
      }
    );
  }
};

group.showList();

在这个例子中，showList 方法中的箭头函数继承了 showList 方法的 this，即指向 group 对象。因此，箭头函数内部的 this.title 成功地指向了 group.title。

如果我们尝试将箭头函数替换为一个常规函数并使用 .bind(this)，结果会相同，但不是因为 .bind() 起了作用，而是因为普通函数需要显式绑定 this：

javascript
showList() {
  this.members.forEach(function(member) {
    console.log(this.title + ': ' + member);
  }.bind(this)); // 使用 .bind(this) 来绑定 this
}

总结来说，箭头函数不支持使用 .bind()、.call() 或 .apply() 方法来改变其 this 的指向，它们自动捕获其创建时所处上下文的 this 值。这种特性使得箭头函数在处理 this 时更简单、更直观，特别是在需要维护上下文连贯性的场景中。