04 js高阶函数（惰性函数、柯里化函数、compose函数）和
高阶函数的定义
在《javascript设计模式和开发实践》中是这样定义的。
- 函数可以作为参数被传递；
- 函数可以作为返回值输出。
结合这两个特点，首先想到的肯定是回调函数，回调函数也是高阶函数的一种，除了回调函数，还有很多的高阶函数，这篇文章主要是惰性函数、柯里化函数、compose函数这三种。
一、惰性函数
概念
懒，执行过一遍的东西，如果第二遍执行还是一样的效果，则我们就不想让其重复执行第二遍了
栗子
我们要封装一个获取元素属性的方法，因为低版本的ie浏览器不支持getComputedStyle方法，做了一个容错处理
function getCss(element, attr) {
if ('getComputedStyle' in window) {
return window.getComputedStyle(element)[attr];
}
return element.currentStyle[attr];
}
但是每次进这个方法都要做一下判断，为了提高性能，我们可以存一个变量，然后每次进去判断变量就好了
var flag = 'getComputedStyle' in window
function getCss(element, attr) {
if (flag) {
return window.getComputedStyle(element)[attr];
}
return element.currentStyle[attr];
}
这样每一次还是需要判断，有没有更好的方法呢？惰性函数的思想就可以完美解决这个问题
function getCss(element, attr) {
if ('getComputedStyle' in window) {
getCss = function (element, attr) {
return window.getComputedStyle(element)[attr];
};
} else {
getCss = function (element, attr) {
return element.currentStyle[attr];
};
}
// 为了第一次也能拿到值
return getCss(element, attr);
}
getCss(document.body, 'margin');
getCss(document.body, 'padding');
getCss(document.body, 'width');
第一次执行，如果有getComputedStyle这个方法，getCss就被赋值成
function (element, attr) {
return window.getComputedStyle(element)[attr];
};
而后的每一次就会执行上面这个函数，否则则相反
总结
惰性载入函数有两个主要优点，
-
1、是显而易见的效率问题，虽然在第一次执行的时候函数会意味赋值而执行的慢一些，但是后续的调用会因为避免的重复检测更快；
-
2、是要执行的适当代码只有当实际调用函数是才执行，很多JavaScript库在在加载的时候就根据浏览器不同而执行很多分支，把所有东西实现设置好，而惰性载入函数将计算延迟，不影响初始脚本的执行时间。
二、函数柯理化
定义
利用闭包保存机制，把一些信息预先存储下来（预处理的思想）
function fn() {
}
let res = fn(1, 2)(3);
console.log(res); //=>6 1+2+3
封装一个方法，调用以后求出和（两次执行的传参个数都不固定）
解题思路：
函数第二次执行，第一个函数的返回值一定是一个函数,第二个函数的返回值应该是求和的数值
function fn(...outerArgs) {
return function anonymous(...innerArgs) {
// args:外层和里层函数传递的所有值都合并在一起
let args = outerArgs.concat(innerArgs);
return args.reduce((n, item) => n + item);
};
}
第二个函数使用了第一个函数的值，所以函数1不会被释放，利用闭包的保护机制，将值预先保存起来
三、compose函数
定义
组合函数，把多层函数嵌套调用扁平化
栗子
下面四个方法，每种方法都会把参数0进行处理，给x传一个值如果要得出四种方法以后的和：
const fn1 = (x, y) => x + y + 10;
const fn2 = x => x - 10;
const fn3 = x => x * 10;
const fn4 = x => x / 10;
let res = fn4(fn2(fn3(fn1(20))));
let res1 = compose(fn1, fn3, fn2, fn4)(20, 30);
res得出的值，可以实现这个需求，但是需要函数套函数，现在可以定义一个compose函数，使得res和res1的值相等，将函数实现扁平化
function compose(...funcs) {
// FUNCS:存储按照顺序执行的函数(数组) =>[fn1, fn3, fn2, fn4]
return function anonymous(...args) {
// ARGS:存储第一个函数执行需要传递的实参信息(数组) =>[20]
if (funcs.length === 0) return args;
if (funcs.length === 1) return funcs[0](...args);
return funcs.reduce((N, func) => {
// 第一次N的值:第一个函数执行的实参 func是第一个函数
// 第二次N的值:上一次func执行的返回值，作为实参传递给下一个函数执行
return Array.isArray(N) ? func(...N) : func(N);
}, args);
};
}
完美实现compose函数，不用再函数套函数
react中的redux源码中的compose函数用的是另外思想实现的
四、单例设计模式
定义
var obj1 = {
name: 'wanghuahua'
}
var obj2 = {
name: 'jerry'
}
console.log(obj1.name)
console.log(obj2.name)
上面的两个obj就是最基础的单例
单例模式就是：用单独的实例来管理当前事物的相关特征[属性和方法]（类似于实现一个分组的特点）
而此时obj1/obj2不仅仅叫做一个对象，也被成为命名空间
特点
- 类只有一个实例
- 全局可访问该实例
- 自行实例化（主动实例化）
- 可推迟初始化，即延迟执行（与静态类/对象的区别）
虽然全局变量可以实现单例，但因其自身的问题，不建议在实际项目中将其作为单例模式的应用，特别是中大型项目的应用中，全局变量的维护该是考虑的成本。
高级单例设计模式
基于闭包管控的单例模式称为：高级单例设计模式，以此来实现模块划分（最早的模块化思想）
let wanghuahua = (function () {
function query() {}
function tools() {}
return {
name: 'AREA',
tools
};
})();
wanghuahua.tools();
let jerry = (function () {
function fn() {
meimei.getXxx();
}
function query() {}
return {
query
}
})();
let meimei = (function () {
function fn() {}
function getXxx() {}
jerry.query();
return {
getXxx
}
})();
// 每个模块都可以有自己私有的方法，想要暴露给全局的就return出去
// es6的export已经不需要这么写了
公众号：
image
