JavaScript - 柯里化

上一頁
下一頁

在 JavaScript 中，柯里化是一種函數語言程式設計技術，用於將接受多個引數的函式轉換為一系列每個函式只接受單個引數的函式序列。柯里化主要用於事件處理以及避免多次將相同的變數作為函式引數傳遞。

如何在 JavaScript 中實現柯里化？

如以下所示，在 JavaScript 中實現柯里化主要有兩種不同的方法。

  • 使用閉包函式

  • 使用 bind() 方法

使用閉包進行柯里化

在 JavaScript 中，閉包是一種技術，其中內部函式可以訪問外部函式的變數。為了使用閉包技術實現柯里化，我們可以使用一系列函式，每個函式都只接受一個引數。

語法

使用者可以按照以下語法使用閉包實現柯里化。

function funcName(a) {
   return function (b) {
      // add more functions
      // OR
      return a * b;
   }
}
funcName(a)(b);

在上面的語法中，'funcName()' 函式接受單個引數，並且包含內部函式。內部函式也接受一個引數，我們在內部函式的主體中使用外部和內部函式的引數。

上面語法中給出的函式類似於下面的函式。

function funcName(a, b) {
   return a * b;
}
funcName(a, b);

讓我們透過示例瞭解柯里化。

示例

在下面的程式碼中，我們建立了 mul() 函式，該函式將單個值作為引數並返回一個以 'b' 為引數的函式。內部函式還返回另一個函式，該函式以 'c' 為引數，並返回 'a'、'b' 和 'c' 的乘積。

當我們呼叫 mul(2) 函式時，它將返回整個內部函式，如下所示。

return function (b) {
   return function (c) {
      return a * b * c;
   }
}

當我們呼叫 mul(2)(3) 函式時，

return function (c) {
return a * b * c;
}

當我們呼叫 mul(2)(3)(4) 時，它將返回第二個內部函式的結果。

在輸出中，您可以看到該函式返回結果 24，這是 3 個值的乘積。

<html>
<head>
   <title>JavaScript currying using using closures</title>
</head>
<body>
   <div id = "output"> </div>
   <script>
      // Achieving the currying 
      function mul(a) {
         return function (b) {
            return function (c) {
               return a * b * c;
            }
         }
      }
      // Calling the currying function
      let result = mul(2)(3)(4);
      document.getElementById("output").innerHTML = "The result is: " + result;
</script>
</body>
</html>

輸出

The result is: 24

這樣，柯里化有助於使程式碼更模組化和可重用，因為它使用了高階函式。每當必須傳遞與函式引數數量相等的多個引數才能獲得準確的結果時，柯里化都是有用的。例如，如果您在上面的示例中沒有傳遞 3 個引數，它將不會返回結果。

使用 bind() 方法進行柯里化

在 JavaScript 中，bind() 方法用於建立一個新函式並將其儲存在變數中。bind() 經常用於將引數部分預先新增到函式的當前引數中，有效地允許您對函式進行柯里化。

語法

使用者可以按照以下語法使用 bind() 方法在 JavaScript 中實現柯里化。

let multiplyByTwo = multiply.bind(null, 2);
let multiplyByTwoAndThree = multiplyByTwo.bind(null, 3);
multiplyByTwoAndThree(4); // Outputs: 24

在上面的語法中，'multiply' 可以是一個接受多個引數的函式。我們使用 bind() 方法逐個新增引數，並實現柯里化。

示例

在下面的程式碼中，multiply() 函式接受 3 個引數並返回乘積結果。multiply.bind() 向 multiply() 函式新增一個引數，並返回更新後的函式。類似地，multiplyByTwoAndThree() 函式儲存具有兩個預定義引數繫結到它的 multiply 函式。

當我們使用單個引數呼叫 'multiplyByTwoAndThree()' 函式時，它將返回 60，這是所有 3 個引數的乘積。

<html>
<head>
   <title>JavaScript currying using bind() method</title>
</head>
<body>
   <div id = "output"> </div>
   <script>
      // Original multiply function that accepts three arguments
      function multiply(x, y, z) {
         return x * y * z;
      }
      // Using the bind() method to achieve currying by partially applying the first argument (2)
      let multiplyByTwo = multiply.bind(null, 2);

      // Further currying by partially applying the second argument (3).
      let multiplyByTwoAndThree = multiplyByTwo.bind(null, 3);

      // Finally calling the curried function with the third argument (10) and outputting the result
      document.getElementById("output").innerHTML = "The result is: " + multiplyByTwoAndThree(10);
   </script>
</body>
</html>

輸出

The result is: 60

柯里化的用例

柯里化技術在即時軟體開發的許多場景中都有應用，因為它允許程式碼更模組化和可重用。這裡，我們給出了一些柯里化的即時用例。

  • 柯里化可用於處理非同步操作，其中函式返回 Promise。

  • 它甚至有助於處理需要部分應用具有特定引數的函式的情況，這些引數可以表示事件的當前上下文。

  • 它允許建立高度可配置的中介軟體函式，這些函式可用於程式碼的不同部分。

列印頁面
上一頁
下一頁
廣告