JavaScript 柯里化（Currying）

柯里化是一种函数式编程技术，用于将接受多个参数的函数转换为一系列只接受单个参数的函数。柯里化主要用于事件处理，以及避免多次将相同的变量作为函数参数传递。

在 JavaScript 中如何实现柯里化？

有两种不同的方式可以在 JavaScript 中实现柯里化，如下所示：

使用闭包函数
使用 bind() 方法

使用闭包实现柯里化

在 JavaScript 中，闭包是一种技术，其中内部函数可以访问外部函数的变量。要使用闭包技术实现柯里化，我们可以使用一系列函数，每个函数都只接受一个参数。

语法

用户可以按照以下语法来使用闭包实现柯里化：

function funcName(a) {
   return function (b) {
      // 添加更多函数
      // 或者
      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，这是三个值的乘积。

<html>
<head>
   <title>使用闭包实现 JavaScript 柯里化</title>
</head>
<body>
   <div id="output"> </div>
   <script>
      // 实现柯里化
      function mul(a) {
         return function (b) {
            return function (c) {
               return a * b * c;
            }
         }
      }
      // 调用柯里化函数
      let result = mul(2)(3)(4);
      document.getElementById("output").innerHTML = "结果是: " + result;
   </script>
</body>
</html>

输出

结果是: 24

这种方法下，柯里化有助于使代码更具模块化和可重用性，因为它使用了高阶函数。每当必须传递等于函数参数数量的参数才能获得准确结果时，柯里化都是有用的。例如，在上面的例子中，如果不传递 3 个参数，它将不会返回结果。

使用 `bind()` 方法实现柯里化

在 JavaScript 中，bind() 方法用于创建一个新的函数并将其存储在变量中。bind() 经常用于部分地向当前函数的参数前置参数，实际上允许你实现函数的柯里化。

语法

用户可以遵循以下语法来使用 bind() 方法在 JavaScript 中实现柯里化：

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

在上面的语法中，multiply 可以是一个接受多个参数的函数。我们使用 bind() 方法逐个前置参数，以此来实现柯里化。

示例

在下面的代码中，multiply() 函数接受 3 个参数并返回乘积结果。multiply.bind() 向 multiply() 函数添加了一个参数，并返回更新后的函数。同样地，multiplyByTwoAndThree() 函数存储了带有两个预定义参数绑定的 multiply 函数。

当我们用单个参数调用 multiplyByTwoAndThree() 函数时，它返回所有三个参数的乘积 60。

<html>
<head>
   <title>使用 bind() 方法实现 JavaScript 柯里化</title>
</head>
<body>
   <div id="output"> </div>
   <script>
      // 原始的接受三个参数的乘法函数
      function multiply(x, y, z) {
         return x * y * z;
      }
      // 使用 bind() 方法通过部分应用第一个参数 (2) 来实现柯里化
      let multiplyByTwo = multiply.bind(null, 2);

      // 进一步通过部分应用第二个参数 (3) 来实现柯里化
      let multiplyByTwoAndThree = multiplyByTwo.bind(null, 3);

      // 最终调用柯里化函数并传入第三个参数 (10)，然后输出结果
      document.getElementById("output").innerHTML = "结果是: " + multiplyByTwoAndThree(10);
   </script>
</body>
</html>

输出

结果是: 60

柯里化的应用场景

柯里化技术在实际软件开发中有很多场景中被使用，因为它可以让代码更加模块化和可重用。以下是一些实际的柯里化应用场景：

柯里化可用于处理异步操作，其中函数返回 Promise。
它甚至有助于处理需要部分应用具有代表当前事件上下文的特定参数的情况。
它允许创建高度可配置的中间件函数，这些函数可以在代码的不同部分使用。