ES6 でアロー関数はクラスメソッドを永続的にバインドできますか?

ES6 クラスでアロー関数を使用してクラス関数を永続的にバインドする方法

ES6 クラスは、オブジェクト指向 JavaScript コードを記述するためのより簡潔な方法を提供します。ただし、クラス メソッドを定義することになると、開発者は、CoffeeScript でできることと同様に、アロー関数を使用してメソッドをクラス インスタンスに永続的にバインドできるかどうか疑問に思うかもしれません。

問題:

伝統的に、クラス メソッドはコンストラクター内の binding() メソッドを使用してインスタンスにバインドされます。ただし、アロー関数を使用すると、構文上の違いが生じ、アプローチの変更が必要になります。

構文:

アロー関数を使用してクラス関数をクラス インスタンス メソッドとしてバインドするには、次の構文を使用できます:

class SomeClass extends React.Component {
  handleInputChange = (val) => {
    console.log('selectionMade: ', val);
  }
}

違い:

従来のアプローチと比較して、アロー関数ではプロパティ名の後に等号 (=) が必要です。

実験的機能:

この機能は現在、Babel で実験的であると考えられています。これを使用するには、transform-class-properties プラグインを有効にする必要があります。これは、Babel 設定ファイルのプラグイン セクションに追加することで実行できます:

{
  "plugins": [
    "transform-class-properties"
  ]
}

使用例:

機能が有効になると、開発者はクラス メソッドをコールバック関数として使用すると、ウィンドウ オブジェクトではなくクラス インスタンスにスコープが設定されます。たとえば、次のコードは SomeClass インスタンス内から 'val' の値をログに記録します。

setTimeout(SomeClass.handleInputChange, 1000, 'foo');

結論:

アロー関数を活用し、開発者は、transform-class-properties プラグインを使用して、クラス メソッドをクラス インスタンスに永続的にバインドできます。このアプローチにより、バインディング プロセスが簡素化され、ES6 でクラス メソッドを定義するための簡潔で一貫した構文が提供されます。

以上がES6 でアロー関数はクラスメソッドを永続的にバインドできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。