javascript - func() => {} 和 func = () => {} 有什么区别？

Question

我现在正在学习使用 Class 语法来创建 React 组件，请注意我现在必须声明这样的方法:

class Foo extends React.Component {
    ...
    bar = () => {
        this.setState({ ... })
    }    
}

而不是像这样:

class Foo extends React.Component {
    ...
    bar() {
        this.setState({ ... })  // won't work
    }
}

或者我无法使用 this.setState()。

谁能解释一下创建这样的方法有什么区别以及它们与函数原型(prototype)的关系？

Answer 1

首先是靠class fields ，虽然它们是第 3 阶段的提案并且可能很快就会被采用，但它们还不是语言的一部分。该代码在实例上设置一个属性(就好像它在构造函数中一样)，这是一个箭头函数(因此关闭 this)。它等同于:

class Foo extends React.component {
    constructor() {
        this.bar = () => {
            this.setState({ ... })
        };
    }
}

第二个是方法语法，它在 prototype 对象上创建一个属性，用作新实例的原型(prototype)，这是 this< 的“正常”函数(例如，其中的 this 取决于它的调用方式)。

它们在 this 处理方面的区别是显着的:这意味着如果你使用 bar 作为 prop，对于第一个例子你不必担心 this 管理(但你正在为每个实例创建一个新函数)；使用方法语法，您不必担心 this 管理(这也可能最终创建一个新函数，具体取决于您如何处理它)。