闭包及高阶应用2（柯理化和COMPOSE）

柯理化函数：预先存储或者叫做预先处理的概念

//例题：实现下面的函数
let res = fn(1, 2)(3);
console.log(res); 
//=======================
//实现如下：
function fn(x, y) {
	// 第一次执行函数，形成一个临时不被释放的上下文（闭包），在闭包中我们保存下来传递的参数信息，当后期执行小函数的时候，可以基于作用域链机制，找到闭包中存储的信息，并且拿来使用，所以形成的闭包类似于预先把一些信息进行存储，这种思想就就叫柯理化函数思想
	return function (z) {
		// 最后小函数执行的时候，需要把之前传递的值和最新传递的值进行累加
		return x + y + z;
	}
}
let res = fn(1, 2)(3);
console.log(res); 

柯理化思想：大函数执行返回小函数，相当于大函数执行形成的上下文里面的东西被外面的变量占用了，所以大函数的执行上下文是不会被释放的，之前先传递给大函数的实参预先被保留下来，在返回的这个小函数中一定要用到这个之前传递给大函数的实参，这就是柯理化函数的思想。
单例设计模式也用到了柯理化函数的思想，在大函数中返回小函数，并且小函数也用到了大函数中的一些东西。
柯理化思想：首先，预先给大函数传递一个东西进来，然后保存在大函数的执行上下文中，然后在返回的小函数中要用到之前传递进来的这个东西，这叫柯理化思想。

//这个例子也是经典的柯理化函数：柯理化嵌套柯理化
function fn(x){
    return function(y){
        return function(z){
            return x+y+z;
        }
    }
}

Function.prototype.bind 预先处理THIS的，利用的就是柯理化的思想
React中的redux/react-redux源码以及vue中的很多核心源码都是这样处理的

COMPOSE函数

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

const add1 = (x) => x + 1;
const mul3 = (x) => x * 3;
const div2 = (x) => x / 2;
div2(mul3(add1(add1(0)))); //=>3

把一个函数执行后的返回结果作为实参传入下一个函数中，把下一个函数执行后的返回结果作为实参传入下一个函数中，再把下一个函数执行后的返回结果作为实参传入下一个函数中，最后实现我们的效果。
而这样的写法可读性明显太差了，我们可以构建一个compose函数，它接受任意多个函数作为参数（这些函数都只接受一个参数），然后compose返回的也是一个函数，达到以下的效果：

const operate = compose(div2, mul3, add1, add1)
operate(0) //=>相当于div2(mul3(add1(add1(0)))) 
operate(2) //=>相当于div2(mul3(add1(add1(2))))

简而言之：compose可以把类似于f(g(h(x)))这种写法简化成compose(f, g, h)(x)，请你完成 compose函数的编写

const add1 = (x) => x + 1;
const mul3 = (x) => x * 3;
const div2 = (x) => x / 2;
//将以上3个函数按照此顺序执行，编写compose函数

function compose(...funcs) {
	// funcs接收的就是所有传递进来的函数 [div2, mul3, add1, add1]
	return function anonymous(val) {
		// val第一个函数执行时候需要的实参  0
		//div2(mul3(add1(daa1(0))));
		//因为执行顺序是add1 > add1 > mul3 > div2,所以要把数组倒过来
		//[add1,add1mul3,div2]
		funcs.reverse().reduce((prev,next)=>{
			//第一次默认prev是add1，将val传递给这个函数执行，并将返回结果作为实参传递给next(是第二个函数add1)，并且返回这个第2个add1执行后的返回结果
			//之后prev不再是函数，只是一个返回值，将其作为实参传入next函数
			return typeof prev === "function" ? next(prev(val)):next(prev);
		});
	}
}
let result = compose(div2, mul3, add1, add1)(0);
console.log(result);

在上面代码的基础上，有几种特殊情况需要处理一下，首先如果给compose函数是空数组，一个函数都不传，那么传什么返回什么

const add1 = (x) => x + 1;
const mul3 = (x) => x * 3;
const div2 = (x) => x / 2;
function compose(...funcs) {
	// funcs接收的就是所有传递进来的函数 [] 
	return function anonymous(val) {

		//1.如果一个函数都不传，那么返回传入的这个值
		if(funcs.length === 0) return val;
		//2.如果传递一个函数，就将val传递给这个函数并执行
		if(funcs.length === 1) return funcs[0](val);
		//上述两种情况都不是，则执行下面代码
		return funcs.reverse().reduce((prev,next)=>{
			return typeof prev === "function" ? next(prev(val)):next(prev);
		});
	}
}
let result = compose(div2, mul3, add1, add1)(0);
//先给add1传递一个值0，add1(0)执行后的返回结果作为实参传递给第二个add1，将第2个add1执行后的返回结果作为实参传给mul3执行，mul3执行后的返回结果作为实参传给div2执行
console.log(result);//3

优化上述代码

const add1 = (x) => x + 1;
const mul3 = (x) => x * 3;
const div2 = (x) => x / 2;
function compose(...funcs) {
	// funcs接收的就是所有传递进来的函数 [] 
	return function anonymous(val) {
		if(funcs.length === 0) return val;
		if(funcs.length === 1) return funcs[0](val);
		/*
		return funcs.reverse().reduce((prev,next)=>{
			return next(prev);
		},val);//将val传递给reduce的第2个参数，这样next的初始值是val，之后都是函数执行的返回值
		*/
		//简写为一行
		//return funcs.reverse().reduce((prev,next)=>next(prev),val);
		//reverse().reduce()可以直接合并成 reduceRight();reduceRight将传递进来的参数从右向左执行
		return funcs.reduceRight((prev,next)=>next(prev),val);
	}
}
let result = compose(div2, mul3, add1)(5);
console.log(result);//9

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)))
}

redux源码中提供的compose函数代码分析：

function compose(...funcs) {
	//1.没有传递函数参数
	if (funcs.length === 0) {
		/*
		这个箭头函数的意思：传递进来什么返回什么
		return function(arg){
			return arg;
		}
		*/
		return arg => arg
	}

//2.如果只有一个参数就返回这个传进来的函数执行后的返回值
	if (funcs.length === 1) {
		return funcs[0]
	}
//3.否则返回一个reduce，没有传递第2个参数，只是做来一个嵌套
	return funcs.reduce((a, b) => (...args) => a(b(...args)));
	/*
	return funcs.reduce(function (a,b){
		return function (...args) {
			return a(b(...args));
		}
	});
	
	*/
}

总结：

1. 自己写的compose函数是大函数执行的时候返回小函数，小函数执行的时候一步步执行需要执行的函数；
2. redux源码中的compose函数是直接在大函数执行的时候就直接执行了所有的代码，把该做的事做了。

因为compose函数使用了数组的迭代方法reduce，所以这里简单了解一下reduce的使用

let arr=[10,20,30,40];
arr.reduce((prev,next)=>{
    console.log(prev,next)
})//没有返回值
/*
10 20
undefined 30
*/

let arr=[10,20,30,40];
arr.reduce((prev,next)=>{
    console.log(prev,next)
    return prev+next
});
//reduce只传递一个回调函数，那么prev第一次默认是第一项，后续的prev是上一次函数执行的处理结果。next从数组的第二项开始遍历
/*
第一次：10 20
第二次：30 30
第三次：60 40
*/

let arr=[10,20,30,40];
arr.reduce((prev,next)=>{ 
    console.log(prev,next)
    return prev+next
},0);//reduce的第二个参数就是给prev赋值的初始值 next从数组的第一项开始遍历
/*
0 10 
10 20
30 30
60 40
*/
//reduce函数的第二个参数是否传递影响的是prev第一次的默认值，之后的循环遍历prev的值都为这个函数的返回值