柯理化函数
柯理化函数编程思想：利用闭包的保存机制，事先把一些信息存储起来（存储到不释放的上下文中），这样可以供下级上下文中调用，我们把这种预先存储的思想叫做柯理化函数编程思想
function fn(...outerArgs) {
// outerArgs = [1,2]
return function anonymous(...innerArgs) {
// innerArgs = [3]
let args = outerArgs.concat(innerArgs); // 可以用[...outerArgs, ...innerArgs]
return args.reduce((sum, item) => {
return sum + item;
}, 0);
}
}
let res = fn(1, 2)(3);
console.log(res); // => 6 1 + 2 + 3
// reduce依次遍历数组中的每一项，每一次遍历都会触发回调函数执行
// n：如果reduce不传递第二个参数，第一次获取的是数组第一项，其余每一次获取的值是上一次回调函数处理的结果（传递第二个参数，第一次获取的是第二个实参信息）
// m：依次遍历的数组每一项
let arr = [10, 20, 30, 40];
let total = arr.reduce((n, m) => {
// 第一次: n = 10，m = 20
// 第二次：n = 30，m = 30
// 第三次：n = 60，m = 40
console.log(n, m);
return n + m; // 这里有返回值，如果没有指定返回值，就是返回undefined
});
console.log(total);
// 补充代码
let fn = function fn(...args1) {
return function fn2(...args2) {
return function (...args3) {
let arr = [...args1, ...args2, ...args3]
console.log(arr)
return arr.reduce((a, b) => {
console.log(a, b)
return a + b
}, 0)
}
}
}
let res = fn(1, 2)(3)(4);
console.log(res); // 10
组合函数 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函数的编写
// funcs: 存储的是最后需要按照顺序依次执行的函数集合
function compose(...funcs) {
// 要返回一个函数，外面才能传参调用
return function anonymous(...args) {
// args: 存储的是给第一个函数执行传递的实参集合
if (funcs.length === 0) return args.length <= 1 ? args[0] : args;
if (funcs.length === 1) return funcs[0](...args);
// funcs = [add1, add1, mul3, div2]
// args = [0]
/*
return funcs.reduce((result, item) => {
// 通过判断是否是函数类型
return typeof result === "function" ?
item(result(...args)) :
item(result);
});
*/
// 不用判断是否是函数类型
let n = 0;
return funcs.reduce((result, item) => {
n++;
return n === 1 ? item(result(...args)) : item(result);
});
};
}
const add1 = (x) => x + 1;
const mul3 = (x) => x * 3;
const div2 = (x) => x / 2;
// => 0 如果不指定任何函数, 直接把最后传递的结果返回，传递一个返回一个值，传递多个返回一个数组
let result = compose()(0);
console.log(result);
// => add1(0) 只指定一个函数，就是把最后的结果传递这个函数，执行函数获取其返回值即可
result = compose(add1)(0);
console.log(result);
result = compose(add1, add1, mul3, div2)(0);
console.log(result);
// --------------------------
Array.prototype.reduce = function reduce(callback) {
// this -> arr
let result = this[0];
for (let i = 1; i < this.length; i++) {
let item = this[i];
if (typeof callback === "function") {
result = callback(result, item);
}
}
return result;
};
let arr = [10, 20, 30, 40];
let result = arr.reduce((a, b) => {
return a + b;
});
console.log(result);
惰性函数
// JS中的事件绑定 DOM2事件绑定
// => 新版浏览器中: [元素].addEventListener([type],[func])
// => 老版浏览器中：[元素].attachEvent([on+type],[func])
// 都不支持 [元素].ontype=[func]
// 属性 in 对象：检测对象中是否存在这个属性
/* 惰性思想：懒，能够执行一次搞定的，绝对不会重复干两次 */
function handleEvent(element, type, func) {
if ('addEventListener' in element) {
element.addEventListener(type, func);
} else if ('attachEvent' in element) {
element.attachEvent('on' + type, func);
} else {
element['on' + type] = func;
}
}
// -----------------------
// 第二次调用handleEvent的时候，就是调用重写后的handleEvent了
function handleEvent(element, type, func) {
if ('addEventListener' in element) {
handleEvent = function (element, type, func) {
element.addEventListener(type, func);
};
} else if ('attachEvent' in element) {
handleEvent = function (element, type, func) {
element.attachEvent('on' + type, func);
};
} else {
handleEvent = function (element, type, func) {
element['on' + type] = func;
};
}
// 第一次执行重写方法后，需要执行一次，才能保证第一次事件也绑定了
handleEvent(element, type, func);
}
handleEvent(document.body, 'click', function () {
console.log('BODY点击');
});
handleEvent(document.documentElement, 'mouseenter', function () {
console.log('HTML进入');
});