ES6 でアロー関数を使用してクラス メソッドを簡素化するにはどうすればよいですか?

ES6 クラスのクラス メソッドとしてのアロー関数

ES6 クラスでは、アロー関数を使用してクラス メソッドを定義できます。このアプローチには、次のようないくつかの利点があります。

• アロー関数はデフォルトでクラス インスタンスにバインドされ、明示的なバインドの必要がなくなります。
• これらは簡潔で読みやすい構文を提供します。

構文

へアロー関数を使用してクラス メソッドを指定するには、単にアロー関数をクラス オブジェクトのプロパティに割り当てます。ただし、通常のプロパティとは異なり、アロー関数では矢印の前に this キーワードを置く必要はありません。

例:

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

スコープ

アロー関数は字句スコープにバインドされます。これは、アロー関数がクラス オブジェクトのスコープを継承することを意味します。したがって、handleInputChange メソッドを呼び出すと、このコンテキストは自動的にクラス インスタンスに設定され、適切なスコープが保証されます。

使用法

アロー関数のクラス メソッドを渡すことができます。バインディングを気にせずにコールバック関数として使用できます。たとえば、SomeClass.handleInputChange を setTimeout に割り当てて、クラス インスタンスのスコープ内で関数呼び出しをスケジュールできます。

Configuration

アロー関数をクラスとして使用することに注意してください。メソッドは JavaScript の実験的な機能です。この機能を有効にするには、Babel 構成で「experimental」オプションを true に設定する必要があります。これを実現するには、transform-class-properties Babel プラグインをインストールします。

Babel プラグイン設定の構文は次のとおりです。

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

アロー関数をクラス メソッドとして利用することで、コールバック関数の適切なスコープを確保しながらコードを合理化し、読みやすさを向上させることができます。

以上がES6 でアロー関数を使用してクラス メソッドを簡素化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。