深入理解 JavaScript 柯里化: 提升函数的复用性和灵活性

引言

在 JS 编程中, 函数是一等公民, 具备了强大的灵活性和复用性。而 柯里化 作为一种高阶技术, 可以进一步提升函数的复用性和灵活性。通过柯里化, 可以大大简化函数的调用方式, 并创建更加灵活和可复用的函数

在本篇博客中, 我们将深入探讨 JS 中柯里化的概念和原理, 并了解其在实际开发中的应用场景。通过学习柯里化, 您将能够编写出更加简洁、可读性更高且易于维护的代码, 提升自己的 JS 编程技能

让我们开始探索 JS 柯里化的奇妙世界吧！

一、什么是柯里化

柯里化 (Currying), 又称 部分求值 (Partial Evaluation), 是函数编程的一种高级技巧, 通常只需要传递给函数 一部分参数 来调用它, 让它返回一个新的函数去 处理剩下的参数

如下 👇🏻 代码, sum 是一个常规求和函数, sumCurry 则是使用 柯里化 思想编写的一个求和函数, 它们区别就很明显了, sum 在执行时需要一次性进行传参, 但是 sumCurry 则不是, 它可以进行进行 分批传入参数

// 常规求和函数
const sum = (a, b) => {
  console.log(a + b)
}
sum(1, 2) // 3

// 使用「柯里化」思想编写的一个求和函数
const sumCurry = (a) => (b) => {
  console.log(a + b)
}

sumCurry(1)(2) // 3

补充说明: 柯里化 是函数高级技巧, 允许分批次处理参数, 很多文章更多讨论的是如何将一个普通函数转为 柯里化 函数, 我们需要将这两者区分开来, 柯里化 并不是指将一个函数从可调用的 f(a, b, c) 转换为可调用的 f(a)(b)(c) 这个过程, 而是指转换后的函数被称为 柯里化

二、柯里化作用

柯里化 的优势在于它为函数提供了更高的 灵活性 和 复用性, 我们可以先提供部分函数参数, 并在后续调用中根据需要提供剩余的参数, 这种灵活性使得代码更具可读性、可维护性, 并且能够创建具有不同功能的相关函数, 下面我来看几个具体的例子, 感受下 柯里化 的魅力

2.1 参数复用

如下代码, sumCurry 是 柯里化 函数, 同时存在变量 age, 基于 age 我们调用了函数 sumCurry 获得到一个新的函数 addAge, 在后面我们可以随时调用该函数, 基于最初给的的参数 age 追加数值

// 使用「柯里化」思想编写的一个求和函数
const sumCurry = (a) => (b) => {
  console.log(a + b)
}

const age = 18
const addAge = sumCurry(age)

addAge(1) // 19
addAge(10) // 28
addAge(8) // 26
addAge(0) // 18

2.2 函数复用

下面我们有这么一个需求, 需要抽取对象数组中 name 属性, 并返回一个数组, 可实现代码如下:

const users = [
  { name: 'lh', age: 18 },
  { name: 'myj', age: 28 },
  { name: 'jl', age: 20 },
]

const names = users.map(v => v.name)

console.log(names) // ['lh', 'myj', 'jl']

上面 👆🏻 代码通过 map 来抽取数组对象中的 name 的属性, 接下来我们尝试使用 柯里化 对代码进行简单的优化:

// 使用「柯里化」创建一个提供 map 使用的、可复用函数 
const prop = (key) => (obj) => obj[key]

const users = [
  { name: 'lh', age: 18 },
  { name: 'myj', age: 28 },
  { name: 'jl', age: 20 },
]

const names = users.map(prop('name'))

console.log(names) // ['lh', 'myj', 'jl']

上面代码很简单, 但却是 柯里化 的一个实践, 有了 prop 函数, 我们就可以很方便的, 抽取对象数组中指定元素, 而且在代码阅读上也相对来说清晰很多, 比如在上面基础之上我们想要获取所有 age 只需要这么编写即可:

const ages = users.map(prop('age'))

2.3 提前计算

如下代码, 是常见的一种兼容性代码的写法, 代码中通过判断 addEventListener 以及 attachEvent 为现代浏览器或 IE 浏览器的事件添加方法

const addEvent = (el, type, fn, capture) => {
  if (window.addEventListener) {
    el.addEventListener(type, (e) => {
      fn.call(el, e);
    }, capture);
  } else if (window.attachEvent) {
    el.attachEvent("on" + type, (e) => {
      fn.call(el, e);
    });
  } 
};

上面 👆🏻 代码写法没啥毛病, 中规中距, 唯一的毛病可能就是在每次执行 addEvent 时都需要进行一次判断, 这里我们就可以通过 柯里化 改造下, 提前 对兼容性进行判断, 最后返回添加事件的一个 主体方法

// 柯里化, 提前计算, 返回主体方法
const useEvent = () => {
  if (window.addEventListener) {
    return (el, sType, fn, capture) => {
      el.addEventListener(sType, (e) => {
        fn.call(el, e);
      }, (capture));
    };
  } else if (window.attachEvent) {
    return (el, sType, fn, capture) => {
      el.attachEvent("on" + sType, (e) => {
        fn.call(el, e);
      });
    };
  }
}

const addEvent = useEvent()

2.4 延迟计算(运行)

延迟计算其实也好理解, 就是每次函数执行都会 收集一部分参数, 直到所有参数都准备完毕, 才会进行计算, 如下代码:

// 使用「柯里化」思想编写的一个求和函数
const sumCurry = (a) => (b) => (c) => (d) => {
  console.log(a + b + c + d)
}

sumCurry(1)(2)(3)(4) // 10

三、普通函数如果转换为「柯里化」

接下来我们尝试写一个转换函数 curry, 通过它我们可以将普通函数 f(a, b, c, d) 转为柯里化函数 f(a)(b)(c), 转换后 柯里化 函数的 精髓 在于: 接收一部分参数, 返回一个函数接收剩余参数, 当接收到足够参数后, 执行原函数

如下代码所示, 我们实现了简单的一个转换函数 curry, _curry 是个中转函数, 也是重点:

1. _curry 本身就是个 柯里化 函数, 它接收一个 原函数、以及 当前已经接收到的参数
2. _curry 返回一个 新的函数, 用于 接收剩余的参数
3. 新函数接收若干参数, 内部会将之前收集的参数以及接收到的参数进行合并, 并对 参数个数进行判断, 如果接收到足够的参数了, 则执行原函数, 如果接收的参数不够则执行 _curry 函数, 并返回一个新的函数继续接收处理剩余的参数

/**
 * 中转函数
 * @param fun           待柯里化的原函数
 * @param allArgs       已接收的参数列表
 * @returns {Function}  返回一个接收剩余参数的函数  
 */
const _curry = (fun, ...allArgs) => {
  // 1. 返回一个接收剩余参数的函数    
  return (...currentArgs) => {
    // 2. 当前接收到的所有参数
    const _args = [...allArgs, ...currentArgs] 

    // 3. 接收到的参数大于或等于函数本身的参数时, 执行原函数
    if (_args.length >= fun.length) {
      return fun.call(this, ..._args)
    }

    // 4. 继续执行 _curry 返回一个接收剩余参数的函数 
    return _curry.call(this, fun, ..._args)
  }
}

/**
 * 将函数柯里化
 * @param fun  待柯里化的原函数
 * @returns {Function} 返回「柯里化」函数
 */
const curry = (fun) => _curry.call(this, fun)


// 测试
const sum = (a, b, c) => (a + b + c) // 原函数
const currySum = curry(sum) // 柯里化 函数

currySum(1)(2)(3) // 6
currySum(1)(2, 3) // 6
currySum(1, 2, 3) // 6

四、参数个数不定

下面我们回到 柯里化 本身, 还记得我们上文写的 sumCurry 函数吗? 该 柯里化 函数每次调用都只能传一个参数

// 使用「柯里化」思想编写的一个求和函数
const sumCurry = (a) => (b) => {
  return a + b
}

sumCurry(1)(2) // 3

这里我们对 sumCurry 进行改造, 允许在每次调用时传递任意个数参数

// 使用「柯里化」思想编写的一个求和函数
const sumCurry = (...preArgs) => (...nextArgs) => {
  return [...preArgs, ...nextArgs].reduce((total, ele) => (total + ele), 0)
}

sumCurry(1, 2, 3)() // 6
sumCurry(1, 2, 3)(4) // 10
sumCurry()(1, 4) // 5
sumCurry(1)(2) // 3

五、无限参数

上文我们所演示的 柯里化 函数允许被 连续调用次数 是固定的, 如果我们要实现一个可以 无限调用 的柯里化函数又该怎么处理呢? 实现原理其实也简单, 重点就以下两点:

1. 只需要写个 循环调用 即可, 函数每次返回新函数, 新函数调用原函数并将上一次结果传给原函数
2. 修改函数 toString 方法, 用于取值

// 使用「柯里化」思想编写的一个求和函数
const sumCurry =  (...preArgs) => {
  // 1. 计算当前结果
  const preTotal = preArgs.reduce((total, ele) => (total + ele), 0)

  // 2. 使用 bind, 基于原函数创建新函数, 并将上一次结果作为第一个参数
  const _sumCurry = sumCurry.bind(this, preTotal)

  // 3. 修改 toString 返回值, 用于值值
  _sumCurry.toString = () => preTotal

  return _sumCurry
}

// 使用 + 强制调用 toString 方法
console.log(+sumCurry(1)) // 1
console.log(+sumCurry(1, 2, 3)) // 6
console.log(+sumCurry(1)(2)) // 3
console.log(+sumCurry(1)(2)(3)(4)(5)) // 15
console.log(+sumCurry(1)()(3)(4)(5)) // 13

六、柯里化和闭包的关系

闭包 和 柯里化 是两个不同的概念, 但它们之间有一定的关联:

1. 在编程中, 闭包允许函数捕获并访问其定义时的上下文中的变量, 即使在其定义环境之外被调用时也可以使用这些变量, 闭包可以通过函数返回函数的方式创建, 从而使得内部函数可以访问外部函数的变量

2. 柯里化是指高阶函数使用技巧, 柯里化函数的特点是, 允许被连续调用 f(a)(b)(c) 每次调用传递若干参数, 同时返回一个 接受剩余参数 的 新函数, 直到所有参数都被传递完毕, 才会执行主体逻辑

3. 闭包和柯里化之间的关系在于, 柯里化函数 通常会 使用闭包 来 实现, 当我们将一个函数进行柯里化时, 每次返回一个新的函数, 这个新的函数会捕获前一次调用时的参数和上下文, 这个上下文就形成了闭包, 使得新函数可以在后续调用中继续访问之前传递的参数和上下文

// 形成闭包, 返回的新函数, 允许访问父级函数的变量 a
const sumCurry = (a) => (b) => {
  console.log(a + b)
}

七、参考

• 柯里化 (Currying)
• 「前端进阶」彻底弄懂函数柯里化
• 柯里化
• 柯里化 (curry)
• JS中的柯里化(currying)
• 从函数柯里化聊到add(1)(2)(3) add(1, 2)(3), 以及柯里化无限调用