在类中，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()。

有人可以解释一下创建这种方法的区别以及它们与函数原型的关系吗？

- kevguy

---

@ShubhamKhatri 这个问题不是重复的，因为我所问的本质上是不同的。我实际上是在询问在JavaScript class中使用两种不同语法的区别，以及我想知道它们如何在function prototypes上工作。我只是在使用React时注意到了它，我甚至没有询问任何关于React或任何处理的内容。请取消重复，您甚至还没有查看我在这里提出的问题和解决方案。 - kevguy

当然，虽然这个问题可能不是我标记的那个问题的完全重复，但它确实回答了你的问题的一部分，即为什么this.setState不起作用。但是，它确实没有回答函数原型问题。https://dev59.com/YFgR5IYBdhLWcg3wftOq#41278440 - Shubham Khatri

相关：ECMA6中nameFunction() {}和nameFunction () => {}的区别。 - Sebastian Simon

Answer 1

首先，这段代码依赖于类字段，尽管它们是第3阶段的提案，但很可能很快会被采纳成为该语言的一部分。这段代码在实例上设置了一个属性（就像在构造函数中一样），该属性是一个箭头函数（因此关闭了this）。它等价于这个：

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

第二种方法是方法语法，它在prototype对象上创建一个属性，该属性用作新实例的原型，并且在this方面是一种“正常”的函数（例如，其内部的this取决于其如何被调用）。

就this处理而言，它们之间的区别非常显着：这意味着如果您将bar用作属性，在第一个示例中，您不必担心this管理（但会为每个实例创建一个新函数）；而对于方法语法，则确实需要关注this管理（根据您的处理方式，这也可能最终创建一个新函数）。

- T.J. Crowder

---

那么如果我使用 function 语法，即 bar = function() { this.setState({ ... }) }，在上下文方面，特别是 this 方面就不会有任何区别了吗？ - kevguy

@kevguy：如果你使用了一个function函数，this就像方法语法一样，但是该函数将在实例上（每个实例都有一个不同的函数），而不是在用作实例原型的对象上（所有实例共享一个函数）。 - T.J. Crowder

Answer 2

如果您将要使用这种样式：

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

你需要将this绑定到当前上下文，就像这样：

class Foo extends React.component {
    constructor(props) {
       super(props);
       this.bar = this.bar.bind(this);
    }

    bar() {
        this.setState({ ... })  // works
    }
}

- codejockie