Skip to main content

JavaScript 柯里化

一、什么是柯里化​

Currying ——只传递给函数一部分参数来进行调用，并让它返回一个函数去处理剩下的参数。换句话说，就是用闭包把参数保存起来，当参数的数量足够时，就开始执行函数。

柯里化即 Currying，是一门编译原理层面的技术，用途是实现多参函数，其为实现多参函数提供了一个递归降解的实现思路——把接受多个参数的函数变换成接受第一个参数的函数，并且返回接受剩余参数且返回结果的新函数。

某些编程语言中（如 Haskell）就是通过柯里化技术支持多参函数这一语言特性的。

举个例子：

// 普通函数
function fn(a, b, c, d, e) {
  console.log(a, b, c, d, e)
}
// 生成的柯里化函数
let _fn = curry(fn);

_fn(1, 2, 3, 4, 5); // 1, 2, 3, 4, 5
_fn(1)(2)(3, 4, 5); // 1, 2, 3, 4, 5
_fn(1, 2)(3, 4)(5); // 1, 2, 3, 4, 5
_fn(1)(2)(3)(4)(5); // 1, 2, 3, 4, 5

对于已经柯里化后的 _fn 函数来说，当接收的参数数量与原函数的形参数量相同时，执行原函数；当接收的参数数量小于原函数的形参数量时，返回一个函数用于接收剩余的参数，直至接收的参数数量与形参数量一致，执行原函数。

二、JS 柯里化的实现​

下面实现一个被柯里化的 add 函数，该函数名为 curriedAdd，通过递归来将柯里化返回的函数也自动柯里化：

const add = (x, y) => {
  console.log(x + y)
}

const curry = (fn) => {
  return function judge(...args) {
    // 当接收的参数数量与原函数形参数量一致时，执行原函数
    if (args.length >= fn.length) {
      return fn(...args);
    } else {
      // 否则递归返回一个 judge 函数用于接收剩余的参数
      return (...arg) => {
        return judge(...args, ...arg);
      }
    }
  }
}

const curriedAdd = curry(add)
curriedAdd(1)(2)  // 2
curriedAdd(1, 2)  // 3

以上函数实现了柯里化的核心思想。

JavaScript 中的常用库 Lodash 中的 curry 方法，其核心思想和以上相似，都是对比多次接受的参数总数与函数定义时的入参数量，当接受参数的数量大于或等于被柯里化函数的传入参数数量时，就执行原函数，否则返回一个继续接受参数的函数。

三、柯里化的应用​

1、参数复用​

固定不变的参数，实现参数复用是柯里化的主要用途之一：

const increment = curriedAdd(1)
increment(2) === 3  // true

const addTen = curriedAdd(10)
addTen(2) === 12    // true

上面的 increment, addTen 就是进行参数复用。

2、延迟执行​

延迟执行也是柯里化的一个重要使用场景，而 bind 和箭头函数也能实现同样的功能。

一个常见的场景就是为标签绑定 onClick 事件，同时考虑为绑定的方法传递参数。

以下列出了几种常见的方法，来比较优劣：

2-1、通过 data 属性​

<div data-name="name" onClick={handleOnClick} />

通过 data 属性本质只能传递字符串的数据，如果需要传递复杂对象，只能通过 JSON.stringify(data) 来传递满足 JSON 对象格式的数据，但对更加复杂的对象无法支持。

2-2、通过 bind 方法​

<div onClick={handleOnClick.bind(null, data)} />

bind 方法和以上实现的 curry 方法，在功能上有极大的相似，在实现上也几乎差不多。

唯一的不同就是 bind 方法需要强制绑定 context，即 bind 的第一个参数会作为原函数运行时的 this 指向， 而 curry 不需要此参数。

2-3、通过箭头函数​

<div onClick={() => handleOnClick(data)} />

箭头函数能够实现延迟执行，同时也不像 bind 方法必需指定 context。

但在 react 中，不建议直接在 jsx 标签内写箭头函数（直接在 jsx 标签内写业务逻辑）。

2-4、通过 curry​

<div onClick={curry(handleOnClick, data)} />

注意，curry 函数相比 bind 函数，性能较差，原因是 bind 由浏览器实现，运行效率有加成，但性能影响非常小。而实现的自动柯里化，是另外三个方法所不具备的。

四、柯里化的优劣势​

1、优势​

1-1、为了多参函数复用性​

柯里化让人眼前一亮的地方在于，让人觉得函数还能这样子复用。

通过一行代码，将 add 函数转换为 increment，addTen 等。

对于柯里化的复杂实现中，以 Lodash 为列，提供了 placeholder 对多参函数的复用玩出花样：

import _ from 'loadsh'

function abc(a, b, c) {
  return [a, b, c];
}

var curried = _.curry(abc)

// Curried with placeholders.
curried(1)(_, 3)(2)
// => [1, 2, 3]

1-2、为函数式编程而生​

柯里化是为函数式而生的东西，应运着有一整套函数式编程的东西，纯函数、compose、container 等等。

假如要写 Pointfree Javascript 风格的代码，那么柯里化是不可或缺的。使用 compose、container 等也需要柯里化。

2、劣势​

2-1、柯里化的一些特性有其他解决方案​

如果只想提前绑定参数，那么可以使用 bind，箭头函数等，而且性能比柯里化更好。

2-2、柯里化陷于函数式编程​

上面 curry 的实现是最符合柯里化定义的，也提供了 bind，箭头函数等不具备的“新奇”特性——可持续的柯里化。

但柯里化是函数式编程的产物，它生于函数式编程，也服务于函数式编程，而 JavaScript 并非真正的函数式编程语言，相比 Haskell 等函数式编程语言，JavaScript 使用柯里化等函数式特性有额外的性能开销，也缺乏类型推导。

假如没有准备好去写函数式编程规范的代码，仅需要在 JSX 代码中提前绑定一次参数，那么 bind 或箭头函数就足够了。

四、总结​

  • 柯里化在 JavaScript 中是“低性能”的，但是这些性能在绝大多数场景，是可以忽略的。
  • 柯里化的思想极大地助于提升函数的复用性。
  • 柯里化生于函数式编程，也陷于函数式编程。