箭头与ES6类中的经典方法

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。它允许您初始化实例属性，而无需编写构造函数。即你的代码：

class MyClass {

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

}

与

完全相同

class MyClass {

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

}

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

• 在类的所有实例之间共享一个普通方法（它在原型上定义）
• 每个实例
创建一个“类字段方法”

所有与Use of 'prototype' vs. 'this' in JavaScript?中提出的理由相同，但简而言之：

• 如果每个实例需要一个方法，请使用“类字段方法”。对于需要访问当前实例的事件处理程序来说就是这种情况。只有在使用箭头功能时，才能访问this。
• 在所有其他情况下使用普通的类方法。