难以理解的compose

一般用的中间，如redux、koa研究中间件原理时都会遇到一个compose,或是洋葱圈模型，这属于设计模式中的责任连模式。

自己虽然也看过几次，但每次看到这里就又不理解了，昨天又揣摩了半夜，整理下思路

function f1(arg) {
  console.log("f1", arg);
  return arg;
}
function f2(arg) {
  console.log("f2", arg);
  return arg;
}
function f3(arg) {
  console.log("f3", arg);
  return arg;
}
function f4(arg) {
  console.log("f4", arg);
  return arg;
}

要组合成这样

const res = f1(f2(f3("omg")));
console.log("res", res);

由简入繁便于理解

const compose=(fn1,fn2)=>(...args)=>fn1(fn2(...args))
const fn=compose(f1,f2)
console.log(fn(4))

有局限性只能传两个函数作为参数

扩展

const compose = (...[first,...other]) =>(...args)=>{
    let ret = first(...args)
    other.forEach(fn=>{
        ret = fn(ret)
    })
    return ret
}

特点：参数是函数，最终返回的还是函数

另一直种写法

function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg;
  }
  if (funcs.length === 1) {
    return funcs[0];
  }
  function sun(a, b) {
    return (...args) => {
       return a(b(...args))
    }
  } 
  return funcs.reduce(sun);
}

我试了也可以直接这么写

function compose(...funcs) {
  function sun(a, b) {
    return (...args) => {
       return a(b(...args))
    }
  } 
  return funcs.reduce(sun);
}

如

compose(f1,f2,f3)

第一次a = f1 返回函数 c=>f1(f2(c))

第二次 a = c=>f1(f2(c)), b = f3函数，带入 d=>a(b(d)),a要执行实参为f3(d),f1(f2(f3(d)))，那么最终返回的函数是 d=>f1(f2(f3(d)))

compose执行后返回的是一个要接收参数的函数。上面c和d只是形参，...args和c或d的区别前者可以多个参数，后者只是一个参数，而在累积的时候实参其实就是一个，c是f3(d)

断点

最终这样写比较简练

function compose(...funcs) {
	return funcs.reduce((a, b) => (...args) => a(b(...args)));
}

太难理解了，实在佩服第一个人是怎么想出来的