JavaScript函数柯里化

首先说一下什么是函数柯里化吧

 

函数柯里化：一种将多参数函数转换成一系列使用一个参数的函数的技术，它在函数式编程中非常常见

执行的条件：通用的柯里化函数，它接收一个函数作为参数，返回一个新函数，新函数可以接收任意数量的参数，当参数数量足够后，就会执行传入的函数

 

下面的例子牵扯到的技术包括：函数递归、bind函数、扩展运算符

function curry(fn, ...args) {
  if (args.length >= fn.length) {
    return fn(...args);
  }
  return function(...newArgs) {
    return curry(fn, ...args, ...newArgs);
  };
}

 

if (args.length >= fn.length) return fn(...args);

在这个代码中，fn 是需要被柯里化的函数，args 是已经传递的部分参数。
当函数 `fn` 的参数数量大于等于 `args` 的长度时，说明所有参数都已经收集齐了，此时就可以直接调用 `fn` 并传入收集到的所有参数，返回结果

 

return function(...newArgs) {
return curry(fn, ...args, ...newArgs);
};

否则，返回一个新的函数，这个函数会接收一个新的参数 newArgs，并使用 curry 函数递归地调用自身。
在这个新函数内部，`args` 和 `newArgs` 会被合并起来，继续等待下一次的调用，直到所有参数被收集完毕，返回结果。
这个过程中，每次调用都会返回一个新的函数，这就是柯里化函数的“柯里化链”，通过链式调用的方式可以逐步收集所有的参数。

这种实现方式具有很好的灵活性和可扩展性，可以适用于不同的函数，不同的参数列表。

 

 

这个是注释后的内容，运行环境VUE3.2你也可以打Debugger查看运行

// 计数器
let count = ref(0);

// 函数进行柯里化 , 柯里化函数的核心逻辑，实现了将一个多参数函数转换为一系列只接受单一参数的函数的过程
function curry(fn, ...args) {
    // args接收的参数是一个一维数组，需要使用扩展运算符展开...

    // 计数器可得知curry函数回调了3次，第一次传入function 2，第二次传入function 2 10 第三次调用
    ++count.value;

    // 当函数 fn 的参数数量大于等于 args 的长度时，说明所有参数都已经收集齐了，此时就可以直接调用 fn 并传入收集到的所有参数，返回结果
    if (args.length >= fn.length) return fn(...args);
    
    // 否则，返回一个新的函数，这个函数会接收一个新的参数 newArgs（也就是传入的值）
    return function(...newArgs) {
        // 在这个新函数内部，args 和 newArgs 会被合并起来，继续等待下一次的调用，直到所有参数被收集完毕，返回结果，
        // 这个过程中，每次调用都会返回一个新的函数，这就是柯里化函数的“柯里化链”，通过链式调用的方式可以逐步收集所有的参数
        
        // 执行第一次function 2、 第二次 function 2 10
        return curry(fn, ...args, ...newArgs);
    };
}

// 普通函数
function add(a, b) {
    return a + b;
}

// 1. 传入普通函数
const curriedAdd = curry(add);
// 2. 传入预设值
const add2 = curriedAdd(2);
// const add3 = curriedAdd(3);
// 3. 调用
console.log(add2(3));