redux源码分析(3) — compose

[dark9wesley]

compose.js

compose函数其实是函数式编程里常用的组合函数，作用就是将传入的多个函数组合起来，使多个函数可以组合调用。

下面看一下代码：

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args: any) => a(b(...args)))
}

初看时是一脸懵逼的，尤其是套娃式的组合函数，层层的return让人头大，我们慢慢分析。

compose函数会处理三种情况：

1. 当没有传入函数时，返回一个【接受什么就返回什么】的函数

compose()(1) === 1

2. 当只传入了一个函数时，返回这个函数

const a = (num) => num + 1

compose(a)(1) === 2

3. 当传入的函数>=2，调用reduce方法，将传入的函数组合成一个新函数（懵逼了）

举个栗子🌰

let x = 10
function fn1 (x) {return x + 1}
function fn2(x) {return x + 2}
function fn3(x) {return x + 3}
function fn4(x) {return x + 4}

// 假设我这里想求得这样的值
let a = fn1(fn2(fn3(fn4(x)))) // 10 + 4 + 3 + 2 + 1 = 20

// 根据compose的功能，我们可以把上面的这条式子改成如下：
let composeFn = compose(fn1, fn2, fn3, fn4)
let b = composeFn(x) // 理论上也应该得到20

我们重点看一下这段代码：

funcs.reduce((a, b) => (...args: any) => a(b(...args)))

这里用了js原生的reduce方法，reduce就不多说了（懒）。

我们还是用上面的例子来逐步分析一下，compose(fn1, fn2, fn3, fn4)根据 compose 的源码, 其实执行的就是：

[fn1, fn2, fn3, fn4].reduce((a, b) => (...args) => a(b(...args)))

第几轮循环	a的值	b的值	返回的值
1	fn1	fn2	(...args) => fn1(fn2(...args))
2	(...args) => fn1(fn2(...args))	fn3	(...args) => fn1(fn2(fn3(...args)))
3	(...args) => fn1(fn2(fn3(...args)))	fn4	(...args) => fn1(fn2(fn3(fn4(...args))))

经过compose的处理后，返回的是一个层层嵌套的函数，当传入参数，会从里向外依次执行，每个函数执行的结果，都会变成下一个函数的参数，最后将总结果返回。