js函数柯里化的方法和作用实例分析

2023年5月28日上午10:13 • JavaScript

下面是 JS 函数柯里化的方法和作用实例分析的攻略：

什么是函数柯里化

函数柯里化是一种将接受多个参数的函数转换为接受一个单一参数的函数，并返回一个新的函数的技术。这个新函数能够接着接受剩下的参数，直到接收到所有参数为止。

举个例子，假设有一个 sum 函数可以接受多个数值参数：

function sum(a, b, c) {
  return a + b + c;
}

我们可以通过函数柯里化将其转换为接受单一参数的函数，比如这样：

function curriedSum(a) {
  return function(b) {
    return function(c) {
      return a + b + c;
    };
  };
}

// 用法
curriedSum(1)(2)(3); // 6

这个 curriedSum 函数是通过逐步接受参数，最终返回总和的。

可能你会问，为什么要这样做？函数柯里化有什么用处呢？

函数柯里化的作用

函数柯里化可以帮助我们更方便地复用各种函数，实现更加灵活的函数调用方式，以及更加细粒度的函数组合。

具体来说，函数柯里化的作用有以下几个：

参数复用

通过柯里化，我们可以更方便地复用函数的参数。比如，我们可以将一个接受很多参数的函数，转换为若干个仅接受部分参数的函数。这些函数可以共享部分参数，提高代码的复用性和可读性。

示例：

// 一个接收多个参数的函数
function add(x, y, z) {
  return x + y + z;
}

// 把函数进行柯里化，变成接收一个参数的函数
function curryAdd(x) {
  return function(y) {
    return function(z) {
      return add(x, y, z);
    };
  };
}

// 创建一个新的函数，共享 x 参数
const add5 = curryAdd(5);

console.log(add5(1)(2)); // 8
console.log(add5(3)(4)); // 12

在此例中，我们将一个接收三个参数的函数 add，通过柯里化的方式转换成了一个接收一个参数的函数 curryAdd。通过 curryAdd(x) 调用时，返回一个接收一个参数的函数，这个函数可以继续通过 .then() 的方式调用下一个参数，最后获取结果。函数内部实现了参数复用。

延迟执行

通过柯里化，我们可以将函数的执行分开，先接收一部分参数，然后在一定的时机再执行。这种方式可以帮助我们延迟执行函数，避免频繁生成闭包。

示例：

function delay(fn) {
  return function() {
    var args = Array.prototype.slice.call(arguments);
    setTimeout(function() {
      fn.apply(null, args);
    }, 1000);
  };
}

function displayMsg(msg) {
  console.log(msg);
}

var delayDisplayMsg = delay(displayMsg);
delayDisplayMsg('Hello world!'); // 等待 1 秒后输出 "Hello world!"

在此例中，我们通过 delay() 函数对 displayMsg() 函数进行柯里化，延迟了函数的执行。

如何实现函数柯里化

实现函数柯里化的方法有很多，下面介绍两种常用的方法。

最初版本

最初版本的函数柯里化实现就是第一个例子中的 curriedSum。

通过闭包和递归实现柯里化的过程。如果知道柯里化的参数数量，则直接调用柯里化后的函数；否则返回一个新的闭包。

function curry(fn) {
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    var innerArgs = Array.prototype.slice.call(arguments);
    var finalArgs = args.concat(innerArgs);
    if (finalArgs.length < fn.length) {
      return curry.apply(null, [fn].concat(finalArgs));
    } else {
      return fn.apply(null, finalArgs);
    }
  };
}

// 使用
var sum = function(a, b, c) {
  return a + b + c;
};
var curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 6

ES6 版本

ES6 的函数柯里化实现使用了 rest paramters 和 arrow function 语法，使得代码更加简洁。

const curry = (fn, ...args) =>
  args.length < fn.length
    ? (...nextArgs) => curry(fn, ...args, ...nextArgs)
    : fn(...args);

// 使用
const sum = (x, y, z) => x + y + z;
const curriedSum = curry(sum);

console.log(curriedSum(1)(2)(3)); // 6