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函數傳回一個函數：

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

呼叫函數：

add(2)(3)  // returns 5

發生這種情況是因為外部函數呼叫傳回內部函數。

理解handleChange程式碼

將其應用到handleChange程式碼：

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