JavaScript 中的多個巢狀箭頭函數如何運作？

理解JavaScript 中的多個箭頭函數

在JavaScript 中，你可能會遇到這樣的程式碼：

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

在JavaScript 中，你可能會遇到這樣的程式碼：

柯里化函數

這段程式碼示範了柯里化函數。柯里化函數是一個傳回函數的函數，可讓您部分套用參數。

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

箭頭函數的行為如下（注意回傳值）：

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

因此，在我們的add 函數中，一個數字傳回一個函數：

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

這表示數字相加回傳一個函數：

呼叫柯里化函數

add(2)(3)  // returns 5

要使用柯里化函數，請以不同的方式呼叫它：

這是因為第一個函數呼叫傳回第二個函數。只有第二個函數呼叫才能給出實際結果。

在您的程式碼中的應用程式

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

在您的程式碼中：

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

沒有箭頭函數：

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

由於箭頭函數在詞法上綁定this，它看起來更像this:

這意味著handleChange為指定欄位建立一個函數。這是一種為每個輸入設定事件監聽器而無需重複的 React 技術。

更多箭頭

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

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中文網其他相關文章！