カリー化は JavaScript の複数の矢印関数でどのように機能しますか?

JavaScript での複数の矢印関数によるカリング

React アプリケーションでは次のようなコードに遭遇する可能性があります:

handleChange = field => e => {
  e.preventDefault();
  /// Do something here
}

この不可解な構文は、カレーとして知られるものを表します。 function.

カリー化とは何ですか?

カリー化は、関数を部分的に定義できるようにする手法です。例:

const add = x => y => x + y

これは従来の関数と同等です:

const add = function (x) {
  return function (y) {
    return x + y
  }
}

戻り値に焦点を当てる

アロー関数では、戻り値は次のように表されます:

const f = someParam => returnValue

したがって、add 関数はfunction:

const add = x => (y => x + y)

関数の呼び出し:

add(2)(3)  // returns 5

これは、外部関数呼び出しが内部関数を返すために発生します。

handleChange コードについて

これをハンドルに適用するChangeコード:

handleChange = function(field) {
  return function(e) {
    e.preventDefault()
    // Do something here
  };
};

アロー関数はコンテキストを保持するため、実質的には次のようになります。

handleChange = function(field) {
  return function(e) {
    e.preventDefault()
    // Do something here
  }.bind(this)
}.bind(this)

このコードは、特定のフィールドの関数を作成します。 React では、コードを複製せずにさまざまな入力フィールドのリスナーを設定するために使用されます。

複数のアロー関数

複数のアロー関数をシーケンスでき、次のような驚くべき機能を実現できます。 this:

const $ = x => k =>
  $ (k(x))

このカリー化された関数は $ と呼ばれます (Lisp の語呂合わせとして)構文) は、任意の数の引数を受け入れ、アリティの概念を抽象化しているようです。

以上がカリー化は JavaScript の複数の矢印関数でどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。