JS学习笔记——高级编程中compose函数的介绍和基本实现

1、前言

在之前探讨redux的中间件的时候，applyMiddleware源码中有遇到过compose()函数，当时不太明白起作用，所以就上网好好查了一下，做了个总结。

2、普通函数

在函数式编程当中有一个很重要的概念就是函数组合，实际上就是把处理数据的函数像管道一样连接起来，然后让数据穿过管道得到最终的结果。

例1：
const fn1 = (x) => x + 10;
const fn2 = (x) => x * 10;
const fn3 = (x) => x - 10;
console.log(fn3(fn2(fn1(1))))   ===>  100

我们想输出的是一个多层函数嵌套的运行结果，即把前一个函数的运行结果赋值给后一个函数。但是如果需要嵌套多层函数，那这种类似于f(g(h(x)))的写法可读性太差，我们考虑能不能写成(f, g, h)(x)这种简单直观的形式，于是compose()函数就正好帮助我们实现。

3、compose函数

3.1、compose的概念

先介绍一下compose()函数的概念

概念：将需要嵌套执行的函数扁平化处理。嵌套执行指的是，一个函数的返回值将作为另一个函数的参数
作用：实现函数式编程中的 pointfree 风格（无参数），使我们专注于【转换】而不是【数据】
实现：接收多个函数作为参数，从右到左，一个函数的输入为另一个函数的输出
意义：编程更精练、算法更清晰、无参数干扰
威力：【任意组合】
缺点：不能直观的看到参数

3.2、compose的实现

首先，我们先看一下参数，funcs就是需要给出不确定个数的具体函数：

function compose(...funcs) {//=>funcs:传递的函数集合
}

接着，我们看到compose函数执行后跟个()，说明外层函数执行完会再执行一个函数，即函数执行完会返回一个新函数，而且也会给出第一次调用函数时的参数：

function compose(...funcs) {//=>funcs:传递的函数集合return function proxy(...args) { //=>args:第一次调用函数传递的参数集合}
}

紧接着，我们需要判断给出的函数集合的个数：

如果没有给函数，我们只需将后一个的参数返回；
如果只给出一个函数，我们只需把后一个的参数赋给这个函数去执行即可：

function compose(...funcs) {//=>funcs:传递的函数集合return function proxy(...args) {//=>args:第一次调用函数传递的参数集合let len = funcs.length;if (len === 0) {//=>一个函数都不需要执行,直接返回参数argsreturn args;}if (len === 1) {//=>只需要执行第一个函数，把函数执行，把其结果返回即可return funcs[0](...args);}};
}

如果给出的函数参数集合是两个及以上，那就是把前一个函数的执行结果赋给后一个函数。说到这，应该会想到一个满足这个需求的数组方法——reduce：

 function compose(...funcs) {//=>funcs:传递的函数集合return function proxy(...args) {//=>args:第一次调用函数传递的参数集合let len = funcs.length;if (len === 0) {//=>一个函数都不需要执行,直接返回参数argsreturn args;}if (len === 1) {//=>只需要执行第一个函数，把函数执行，把其结果返回即可return funcs[0](...args);}return funcs.reduce((x, y) => {//TODO});};
}

最后，我们需要注意的是，第一次执行的时候，参数x是个函数，之后再执行的时候x是个函数执行的结果，所以需要进行判断：

function compose(...funcs) {//=>funcs:传递的函数集合return function proxy(...args) {//=>args:第一次调用函数传递的参数集合let len = funcs.length;if (len === 0) {//=>一个函数都不需要执行,直接返回ARGSreturn args;}if (len === 1) {//=>只需要执行一个函数，把函数执行，把其结果返回即可return funcs[0](...args);}return funcs.reduce((x, y) => {return typeof x === "function" ? y(x(...args)) : y(x)});};
}

这样，我们就完成了compose函数，我们将开始普通函数的案例改为compose函数：

unction compose(...funcs) {//=>funcs:传递的函数集合console.log('---funcs---',funcs)return function proxy(...args) {//=>args:第一次调用函数传递的参数集合let len = funcs.length;if (len === 0) {//=>一个函数都不需要执行,直接返回argsreturn args;}if (len === 1) {//=>只需要执行一个函数，把函数执行，把其结果返回即可return funcs[0](...args);}return funcs.reduce((x, y) => {console.log('--x--',x)console.log('--y--',y)return typeof x === "function" ? y(x(...args)) : y(x)});};
}
const fn1 = (x) => x + 10;
const fn2 = (x) => x * 10;
const fn3 = (x) => x - 10;
let result = compose(fn3, fn2, fn1)(1);
console.log('--result--',result);

我们看出，第一次执行时，x是一个函数；第二次执行时，x是一个常数
但是我们发现执行的结果是从左到右，即fn3 ——> fn2 ——> fn1，并不是我们期望的从右向左。所以我们可以使用reduceRight()或者reverse()帮助我们实现

我们将reduce改为reduceRight或reverse()：

function compose(...funcs) {//=>funcs:传递的函数集合console.log('---funcs---',funcs)return function proxy(...args) {//=>args:第一次调用函数传递的参数集合let len = funcs.length;if (len === 0) {//=>一个函数都不需要执行,直接返回argsreturn args;}if (len === 1) {//=>只需要执行一个函数，把函数执行，把其结果返回即可return funcs[0](...args);}//方式一return funcs.reduceRight((x, y) => {console.log('--x--',x)console.log('--y--',y)return typeof x === "function" ? y(x(...args)) : y(x)});//方式二return funcs.reverse().reduce((x, y) => {console.log('--x--',x)console.log('--y--',y)return typeof x === "function" ? y(x(...args)) : y(x)});};
}
const fn1 = (x) => x + 10;
const fn2 = (x) => x * 10;
const fn3 = (x) => x - 10;
let result = compose(fn3, fn2, fn1)(1);
console.log('--result--',result);

这次，我们就实现了最初普通函数时这种(fn3(fn2(fn1(1))))嵌套逻辑，即利用compose函数compose(fn3, fn2, fn1)(1)

4、redux源码中的compose

在redux源码中compose有这样一种写法：

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

这种写法更简便，不用对第一个参数函数进行判断，与我们自己写compose函数的区别就是：x(y)还是y(x)，这点我们要注意

同样，我们用刚才的案例测试redux源码中的compose函数：

function compose(...funcs) {if (funcs.length === 0) {return arg => arg}if (funcs.length === 1) {return funcs[0]}console.log('---funcs---',funcs)return funcs.reduce((a, b) => (console.log('--a--',a),console.log('--b--',b),(...args) => a(b(...args))))
}
const fn1 = (x) => x + 10;
const fn2 = (x) => x * 10;
const fn3 = (x) => x - 10;
let result = compose(fn3, fn2, fn1)(1);
console.log('--result--',result);

本文参考博客：

js高级编程技巧之——compose函数
JS - compose 代码组合
JS高阶编程技巧–COMPOSE函数