ES6 中的箭头与 classic 方法 class

Question

有什么理由写出ES6方法的经典语法吗？

class MyClass {

    myMethod() {
        this.myVariable++;
    }

}

当我使用 myMethod() 作为某些事件的回调时，我必须写这样的东西（在 JSX 中）：

// Anonymous function.
onClick={() => { this.myMethod(); }}

// Or bind this.
onClick={this.myMethod.bind(this)}

但是如果我将方法声明为箭头函数：

class MyClass {

    myMethod = () => {
        this.myVariable++;
    }

}

我只能写（在 JSX 中）：

onClick={this.myMethod}

Answer 1

您使用的功能不是 ES6 的一部分。这是 class fields proposal。它使您无需编写构造函数即可初始化实例属性。 IE。你的代码：

class MyClass {

    myMethod = () => {
        this.myVariable++;
    }

}

与

完全相同

class MyClass {

    constructor() {
        this.myMethod = () => {
            this.myVariable++;
        };
    }

}

这也向您展示了普通 class 方法与通过 class 字段创建的方法之间的区别：

因此，与 Use of 'prototype' vs. 'this' in JavaScript? 中提出的所有原因都适用，但简而言之：

如果您需要每个实例一个方法，请使用 "class field methods"。需要访问当前实例的事件处理程序就是这种情况。访问 this 也只有在使用箭头函数时才有效。
在所有其他情况下使用正常的 class 方法。

Arrow vs classic method in ES6 class