ES6 类中的箭头与经典方法

Posted 2023-02-18

【中文标题】ES6 类中的箭头与经典方法

【英文标题】：Arrow vs classic method in ES6 class

【发布时间】：2021-12-08 08:31:37

【问题描述】：

有什么理由要编写 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

【问题讨论】：

我得到的只是一个语法错误。

我不确定它是否正常工作，但使用 Babel (Webpack) 可以工作。

那些无关的 是错误的。

抱歉，onClick=... 在 JSX 中，没有 html。

How to use arrow functions (public class fields) as class methods? 的可能重复项

【参考方案1】：

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

class MyClass 

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

完全一样

class MyClass 

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

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

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

因此，与Use of 'prototype' vs. 'this' in javascript? 中提出的原因相同，但简而言之：

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