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 fields proposal。它允许你初始化实例属性而不必写一个构造函数。即您的代码：

class MyClass { 

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

} 

是完全一样的

class MyClass { 

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

} 

，这也说明你的区别是正常类方法之间有什么经类字段创建一个方法：

• 一个普通的方法在该类的所有实例之间共享（它在原型上定义）
• A “类场法”的每个实例

因此，所有相同的原因创建为呈现在Use of 'prototype' vs. 'this' in JavaScript?适用，但在短：

• 使用“类字段的方法：”如果你需要为每个实例的方法。需要访问当前实例的事件处理程序就是这种情况。访问this也只适用于使用箭头功能。
• 在所有其他情况下使用普通的类方法。

Answer 2

但如果我声明的方法箭头功能：

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

比我可以只写（在JSX）：

onClick={this.myMethod} 

，你的代码将打破在许多方面。

这不起作用的原因与onClick={() => { this.myMethod(); }}的工作原理相同。箭头功能没有自己的this对象，它们包围了周围的一个。在这种情况下最有可能是全球范围内的。

在最好的情况，你可以考虑myMethod:() => ...为静态（和所有实例共享相同的this在此方法）;在这种方法中最坏的情况是this === window;

Imo最好的方法是将实例绑定到构造函数中的方法。

class MyClass { 
    constructor(){ 
     this.myMethod = this.myMethod.bind(this); 
    } 
    myMethod() { 
     this.myVariable++; 
    } 
} 

，你可以在你的render()方法使用onClick={this.myMethod}。

或者你坚持

// Anonymous function. 
onClick={() => { this.myMethod(); }} 

// Or bind this. 
onClick={this.myMethod.bind(this)}