IT技术 - ES6 类中的箭头与经典方法 - 吾爱随笔录

IT技术 javascript jsx arrow-functions ecmascript-next class-fields

2021-02-10 09:36:12

有没有理由编写 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}

1个回答

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

class MyClass {

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

}

完全一样

class MyClass {

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

}

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

其它你可能感兴趣的问题