矢印と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

にこだわります。それは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になります。

これは、インスタンスをコンストラクタ内のメソッドにバインドするのに最適な方法です。

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

、あなたのrender()方法でonClick={this.myMethod}を使用することができます。

それとも、あなたが使用している機能はES6の一部ではない

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

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