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。

  • 它甚至有助于处理需要部分应用具有特定参数的函数的情况，这些参数可以表示事件的当前上下文。

  • 它允许创建高度可配置的中间件函数，这些函数可用于代码的不同部分。

打印页面
上一页
下一页
广告