複数の入れ子になったアロー関数は JavaScript でどのように機能しますか?

JavaScript の複数の矢印関数を理解する

JavaScript では、次のようなコードが表示されることがあります。

  e.preventDefault();
  /// Do something here
}

カレー関数

このコードは、カリー化された関数を示します。カリー関数は関数を返す関数であり、引数を部分的に適用できます。

次の例を考えてみましょう (アロー関数なし):

const add = (x, y) => x + y
add(2, 3) //=> 5

カリー形式:

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

矢印なし関数:

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

戻り値に注目

アロー関数は次のように動作します (戻り値に注意):

const f = someParam => returnValue

したがって、add 関数では、数値は次の関数を返します。

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

これ数値の加算は関数を返すことを意味します:

add(2) // returns (y => 2 + y)

カリー化された関数の呼び出し

カリー化された関数を使用するには、別の方法で呼び出します:

add(2)(3)  // returns 5

これは、最初の関数呼び出しが 2 番目の関数を返すためです。 2 番目の関数呼び出しのみが実際の結果を返します。

コードへの適用

コード内:

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

アロー関数なし:

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

アロー関数がこれを字句的にバインドしているため、次のようになります。 this:

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

これは、handleChange が指定されたフィールドの関数を作成することを意味します。これは、入力ごとにイベント リスナーを重複なく設定するための React テクニックです。

さらに多くの矢印

2 つ以上のアロー関数をシーケンスできます:

const three = a => b => c =>
  a + b + c

const four = a => b => c => d =>
  a + b + c + d

three (1) (2) (3) // 6

four (1) (2) (3) (4) // 10

カレーとArity

カレーはあなたを驚かせるかもしれません。ここで、$ は 2 つのパラメーターを持つカリー関数として定義されていますが、任意の数の引数を指定できます:

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

const mult = x => y =>
  x * y
  
$ (1)           // 1
  (add (2))     // + 2 = 3
  (mult (6))    // * 6 = 18
  (console.log) // 18
  
$ (7)            // 7
  (add (1))      // + 1 = 8
  (mult (8))     // * 8 = 64
  (mult (2))     // * 2 = 128
  (mult (2))     // * 2 = 256
  (console.log)  // 256

以上が複数の入れ子になったアロー関数は JavaScript でどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。