javascript - 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}

score 18 · Accepted Answer

您使用的功能不是 ES6 的一部分。这是类字段提案。它允许您初始化实例属性，而无需编写构造函数。即你的代码：

class MyClass {

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

}

完全一样

class MyClass {

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

}

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

1 回答 1