javascript - ES6 中 funcName() {} 和 funcName = () => {} 的区别

Question

这个问题已经有答案了:

Are 'Arrow Functions' and 'Functions' equivalent / interchangeable? (5 个回答)

已关闭 5 年前。

我最近一直在学习 React Native，我需要在组件之后访问自定义组件的属性，例如感动。我定义了以下组件:

export class OperationBox extends React.Component {
  constructor(props) {
    super(props);
  }

  startOperation() {
    Alert.alert("starting operation " + this.props.operation);
  }

  render() {
    return (
      <TouchableHighlight onPress={this.startOperation}>
          <Text>{this.props.operation}</Text>
      </TouchableHighlight>

    );
  }
}

当组件被触摸时，应用程序崩溃，并显示 undefined is not an object when evaluating this.props.operation 。但是，如果我定义函数 startOperation()像这样:startOperation = () => { ... } ，我得到了预期的行为。

现在，我想我明白了这些箭头函数是如何工作的。来自 Swift 背景，我认为它们就像闭包一样，但我肯定错过了一些东西吗？为什么第一种方法不行，而第二种方法可以？

Answer 1

简单回答:在 ES6 Classes

funcName() {} 创建“类方法”，但 funcName = () => {} 不会。

这就是全部ECMASCRIPT 2015 语法标准。

但是，您可以克服这个问题；)

Is it possible to use arrow functions in classes with ES6?