如何使用箭头函数（公共类字段）作为类方法？

javascript arrow-functions ecmascript-next class-fields

2022-08-30 01:14:50

我是将 ES6 类与 React 一起使用的新手，以前我一直在将我的方法绑定到当前对象（如第一个示例所示），但是 ES6 是否允许我使用箭头将类函数永久绑定到类实例？（作为回调函数传递时很有用。当我尝试像使用CoffeeScript一样使用它们时，我遇到了错误：

class SomeClass extends React.Component {

  // Instead of this
  constructor(){
    this.handleInputChange = this.handleInputChange.bind(this)
  }

  // Can I somehow do this? Am i just getting the syntax wrong?
  handleInputChange (val) => {
    console.log('selectionMade: ', val);
  }

因此，如果我要传递给，例如，它将限定为类实例，而不是对象。SomeClass.handleInputChangesetTimeoutwindow

答案 1

语法略有不同，只是在属性名称后缺少一个等号。

class SomeClass extends React.Component {
  handleInputChange = (val) => {
    console.log('selectionMade: ', val);
  }
}

这是一项实验性功能。您需要在 Babel 中启用实验性功能才能对其进行编译。下面是启用了实验性的演示。

要在 babel 中使用实验性功能，您可以从这里安装相关插件。对于此特定功能，您需要转换类属性插件：

{
  "plugins": [
    "transform-class-properties"
  ]
}

您可以在此处阅读有关类字段和静态属性提案的更多信息

答案 2

不可以，如果要创建绑定的、特定于实例的方法，则必须在构造函数中执行此操作。但是，您可以使用箭头函数，而不是在原型方法上使用：.bind

class SomeClass extends React.Component {
  constructor() {
    super();
    this.handleInputChange = (val) => {
      console.log('selectionMade: ', val, this);
    };
    …
  }
}

有一个建议可能允许您省略并直接将赋值放在具有相同功能的类范围内，但我不建议使用它，因为它是高度实验性的。constructor()

或者，您始终可以使用 .bind，它允许您在原型上声明方法，然后将其绑定到构造函数中的实例。此方法具有更大的灵活性，因为它允许从类的外部修改方法。

class SomeClass extends React.Component {
  constructor() {
    super();
    this.handleInputChange = this.handleInputChange.bind(this);
    …
  }
  handleInputChange(val) {
    console.log('selectionMade: ', val, this);
  }
}