箭头与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 MyClass {

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

}

与...完全相同

class MyClass {

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

}

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

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

所以与JavaScript中使用'prototype'和'this'中提出的原因一样？申请,但简而言之:

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