为什么在React中我们不需要绑定箭头函数？

Question

我们都知道在React中需要绑定函数才能让它正常工作。我知道为什么需要绑定它。

但我不确定为什么我们不需要绑定箭头函数。

例如： 使用箭头函数（无需绑定）

handleClick = () => {
  this.setState({
    isToggleOn: !this.state.isToggleOn
  });

现在，使用函数（需要绑定Bind）

this.handleClick = this.handleClick.bind(this);

handleClick() {
  this.setState({
    isToggleOn: !this.state.isToggleOn
  });

};

我不是在问为什么我们需要在函数中使用bind。我只想知道为什么箭头函数不需要绑定。

谢谢。

- prabin badyakar

---

可能是Can you bind arrow functions?的重复问题。 - Joseph Sible-Reinstate Monica

Answer 1

箭头函数之所以不需要绑定 this 到类中，是因为它的上下文中没有以下内容：

• this
• arguments
• super
• new.target

因此，当在箭头函数内部引用 this 时，它会将 this 视为普通变量，并首先在其范围内查找声明，如果找不到，则会搜索上层范围，这就是引用到 React 组件类中的 this 所需的内容。

- Tarek Essam

---

那么为什么我们不能在对象的箭头函数中使用 this 呢？ - Mauj Mishra

Answer 2

引用MDN的话:

箭头函数表达式的语法比函数表达式更简短，没有它自己的this、arguments、super或new.target。这些函数表达式最适合非方法函数，并且不能用作构造函数。

此外,

在箭头函数之前，每个新函数都会定义自己的this值（基于如何调用函数，在构造函数的情况下是一个新对象，在严格模式函数调用中是未定义的，在函数被称为“对象方法”的情况下是基本对象等等）。这在面向对象的编程风格中证明是不理想的。

所以基本上，我们不需要绑定是因为在箭头函数的上下文中不存在this。所以，它会向上一级并使用它发现那里的this。

- giraffesyo