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}

- Vesmy

---

我只得到了一个语法错误。 - ASDFGerte

我不确定它是否正常工作，但使用Babel（Webpack）它可以工作。 - Vesmy

那些多余的 { } 是错误的。 - Pointy

抱歉，onClick={...} 是JSX语法，不是HTML。 - Vesmy

可能是重复的问题：如何将箭头函数（公共类字段）用作类方法？ - Bergi

Answer 1

你正在使用的功能不是ES6的一部分，它是class fields提案。它允许您初始化实例属性而无需编写构造函数。例如，您的代码：

class MyClass {

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

}

完全相同

class MyClass {

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

}

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

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

因此，所呈现的与在JavaScript中使用'prototype' vs. 'this'的情况相同的原因仍适用，简而言之：

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

- Felix Kling