时间戳

首页 > 解决方案 > Javascript 类语法并在方法中绑定 this

javascript - Javascript 类语法并在方法中绑定 this

问题描述

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

// 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 等

标签： javascriptreactjsecmascript-6

解决方案

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

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)

someFn调用上下文也将失败myObj- 浏览器只知道调用传递给点击侦听器的回调；myObj像这样传递时，调用上下文会丢失。

推荐阅读