Javascript类语法并将其绑定在方法中[重复]

Question

我想了解以下语法工作方式之间的基本区别。

// Syntax 1
class Component extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    // ...
  }
}

// Syntax 2

handleClick = () => {
  console.log('this is:', this)
}
<button onClick={this.handleClick}>
  {'Click me'}
</button>

虽然语法 1 需要在构造函数中指定显式绑定。但是，似乎不需要语法 2。 语法2是如何实现自动绑定的？

我假设这种理解/语法可以扩展到任何框架，包括 React、Angular、Ember 等

Answer 1

类字段 - 即直接在类主体内定义的属性 - 本质上只是构造函数内相同事物的语法糖。所以，这个：

class Something {
  handleClick = () => {
    console.log('this is:', this)
  }
}

是，脱糖的：

class Something {
  constructor() {
    this.handleClick = () => {
      console.log('this is:', this)
    };
  }
}

去掉加糖，应该清楚发生了什么 - 箭头函数表示this 指的是构造函数中的this，即实例本身，不需要绑定。

这不仅仅是一个 React 或框架的东西 - 这些是 vanilla JavaScript 中的标准规则。

如果你不绑定方法或使用箭头函数或类似的东西，那么：

<button onClick={this.handleClick}>

失败的原因与

someButton.addEventListener('click', myObj.someFn)

也将无法使用myObj 的调用上下文调用someFn - 浏览器只知道调用传递给点击监听器的回调； myObj 的调用上下文在这样传递时会丢失。