什么是高阶函数？
- 满足以下条件之一的函数
- 函数可以作为参数被传递
- 函数可以做为返回值输出
函数作为参数传递
把函数作为参数传递，这代表我们可以抽离出一部分容易变化的业务逻辑，把这部分业务逻辑放在函数的参数中，这样一来可以分离业务代码中变化与不变的部分。其中一个重要的应用场景就是常见的回调函数。
例如：在ajax的异步请求应用中，当我们想ajax请求返回之后做一些事情，但又并不知道请求返回的确切时间，最常见的方案就是把callback函数当做参数传入发起ajax的请求中，待请求完成之后执行callback函数。
当然，回调函数不仅仅应用在异步请求中，当一个函数不适合执行一些请求时，我们也可以把这些请求封装成一个函数，并把他们作为参数传递给另外一个函数，“委托”给另外一个函数执行。
//比如：在页面创建100个div，然后把这些div都设置为隐藏。
//下面是一种编码的方式
var appendDiv = function(){
for(var i=0; i<100; i++){
var div = document.createElement('div');
div.innerHTML = i;
document.body.appendChild(div);
div.style.display = 'none';
}
}
//上面这个函数 未免有点太个性化了，并不是每个人都希望创建出来的div马上隐藏。于是我们把div.style.display = 'none'抽离出来：
var appendDiv = function(fn){
for(var i=0; i<100; i++){
var div = document.createElement('div');
div.innerHTML = i;
document.body.appendChild(div);
if(typeof fn == 'function'){
fn(div)
}
}
}
appendDiv(function (node){
node.style.display = 'none';
})
//可以看到，隐藏节点的请求实际上是由客户发起的，但是客户并不知道节点什么时候创建好，于是把隐藏节点的逻辑放在回调函数中，“委托”给appednDiv方法。appendDiv方法当然知道节点什么时候创建好，所以在节点创建好的时候，appendDiv会执行之前客户传入的回调函数。
函数作为返回值输出
- 相比把函数作为参数传递，函数作为返回值输出的应用场景也许更多，也更能体现函数式编程的巧妙。让函数继续返回一个可执行的新的函数，意味着运算过程是可以延续的。
应用场景
- 判断数据类型
比如，在判断一个数据是否为数组，在以往的实现中，可以基于鸭子类型的概念来判断，比如判断某个数据有没有length属性，有没有sort方法等。但是更好的方式是通过 Object.prototype.toString 来判断。
- Object.prototype.toString.call(obj) 返回一个字符串
- 例如:Object.prototype.toString.call([]) ===> "[object Array]"
//所以我们可以编写一系列的isType函数，代码如下：
var isString = function (obj){
return Ojbect.prototype.toString.call(obj) == '[object String]';
};
var isArray = function (obj){
return Ojbect.prototype.toString.call(obj) == '[object Array]';
};
var isNumer = function (obj){
return Ojbect.prototype.toString.call(obj) == '[object Number]';
};
//我们发现，这些函数的大部分实现都是相同的，不同的只是返回的字符串。为了避免多余的代码，我们尝试把这些字符串作为参数植入isType函数。
var isType = function (type){
return function (obj){
return Object.prototype.toString.call(obj) === `[object ${type}]`;
}
}
var isString = isType('String');
var isArray = isType('Array');
console.log(isArray([])) //true
//我们还可以循环来批量注册
var Type = {};
for(var i=0,type;type = ['Array','String','Number'][i++];){
(function (type){
Type[`is${type}`] = function (obj){
return Object.prototype.toString.call(obj) === `[object ${type}]`
};
})(type)
}
getSingle
- 下面是一个单列模式的例子，好好理解下！
var getSingle = function (fn){
var ret;
return function (){
console.log(this);
return ret || (ret = fn.apply(this,arguments));
}
};
上面这个高阶函数，即把函数当做的参数，又让函数执行后返回了另外一个函数。可以看看它的效果：
var getScript = getSingle(function (){
return document.createElement('script');
});
var script1 = getScript();
var script2 = getScript();
alert(script1 == script2); //true
理解：上面的代码 第二次调用 script2 实际上是ret已经存储的第一次调用的函数引用，所以最后会弹出true。
高阶函数实现AOP
AOP（面向切片编程）的主要作用是把一些跟核心的业务逻辑模块无关的功能抽离出来，这些跟业务逻辑无关的功能通常包括日志、安全统计、异常处理等。把这些功能抽离出来之后，再通过“动态织入”的方式掺入业务逻辑模块中。这样做的好处首先是可以保持业务逻辑模块的纯净和高内聚性，其次是可以很方便地复用日志统计等功能模块。
^
在JS中想实现AOP技术，非常简单，这是JS与生俱来的能力。通常在JS中实现AOP，都是指把一个函数“动态织入”到另外一个函数之中，具体的实现技术有很多种，比如：
Function.prototype.before = function (before){
var _this = this; //保存原函数引用
return function (){ //返回包含了原函数和新函数的“代理”函数
before.apply(this,arguments);
return _this.apply(this,arguments);
}
};
Function.prototype.after = function(after){
var _this = this;
return function (){
var ret = _this.apply(this,arguments);
after.apply(this,arguments);
return ret;
};
};
var fn = function (){
console.log(1);
}
var f = fn.before(function(){console.log(2)}).after(function(){console.log(3)})
f() // 2 1 3
这种使用AOP的方式来给函数添加职责，也是JS语言中的一种非常特别和巧妙的装饰者模式实现，这种模式在开发中非常有用。
高阶函数的其他应用
01.函数 currying 柯里化
何为Curry化/柯里化？
curry化来源与数学家 Haskell Curry的名字 （编程语言 Haskell也是以他的名字命名）。
柯里化通常也称部分求值，其含义是给函数分步传递参数，每次传递参数后部分应用参数，并返回一个更具体的函数接受剩下的参数，这中间可嵌套多层这样的接受部分参数函数，直至返回最后结果。
因此柯里化的过程是逐步传参，逐步缩小函数的适用范围，逐步求解的过程。
柯里化一个求和函数:
var concat3Words = function (a, b, c) {
return a+b+c;
};
var concat3WordsCurrying = function(a) {
return function (b) {
return function (c) {
return a+b+c;
};
};
};
console.log(concat3Words("foo ","bar ","baza"));// foo bar baza
console.log(concat3WordsCurrying("foo ")); // [Function]
console.log(concat3WordsCurrying("foo ")("bar ")("baza"));// foo bar baza
可以看到， concat3WordsCurrying("foo")是一个Function，每次调用都返回一个新的函数，该函数接受另一个调用，然后又返回一个新的函数，直至最后返回结果，分布求解，层层递进。（PS：这里利用了闭包的特点）
- 那么现在我们更进一步，如果要求可传递的参数不止3个，可以传任意多个参数，当不传参数时输出结果？
- 首先来个普通的实现:
var add = function(items){
return items.reduce(function(a,b){
return a+b
});
};
console.log(add([1,2,3,4]));
- 但如果要求把每个数乘以10之后再相加，那么：
var add = function (items,multi) {
return items.map(function (item) {
return item*multi;
}).reduce(function (a, b) {
return a + b
});
};
console.log(add([1, 2, 3, 4],10));
好在有 map 和 reduce 函数，假如按照这个模式，现在要把每项加1,再汇总，那么我们需要更换map中的函数。
下面看一下柯里化实现：
var adder = function () {
var _args = [];
return function () {
if (arguments.length === 0) {
return _args.reduce(function (a, b) {
return a + b;
});
}
[].push.apply(_args, [].slice.call(arguments));
return arguments.callee;
}
};
var sum = adder();
console.log(sum); // Function
sum(100,200)(300); // 调用形式灵活，一次调用可输入一个或者多个参数，并且支持链式调用
sum(400);
console.log(sum()); // 1000 （加总计算）
上面 adder是柯里化了的函数，它返回一个新的函数，新的函数接收可分批次接受新的参数，延迟到最后一次计算。
通用的柯里化函数
更典型的柯里化会把最后一次的计算封装进一个函数中，再把这个函数作为参数传入柯里化函数，这样即清晰，又灵活。
例如 每项乘以10, 我们可以把处理函数作为参数传入：
var currying = function (fn) {
var _args = [];
return function () {
if (arguments.length === 0) {
return fn.apply(this, _args);
}
Array.prototype.push.apply(_args, [].slice.call(arguments));
return arguments.callee;
}
};
var multi=function () {
var total = 0;
for (var i = 0, c; c = arguments[i++];) {
total += c;
}
return total;
};
var sum = currying(multi);
sum(100,200)(300);
sum(400);
console.log(sum()); // 1000 （空白调用时才真正计算）
//这样 sum = currying(multi)，调用非常清晰，使用效果也堪称绚丽，例如要累加多个值，可以把多个值作为做个参数 sum(1,2,3)，也可以支持链式的调用，sum(1)(2)(3)
柯里化的基础
上面的代码其实是一个高阶函数（high-order function）, 高阶函数是指操作函数的函数，它接收一个或者多个函数作为参数，并返回一个新函数。此外，还依赖与闭包的特性，来保存中间过程中输入的参数。即：
- 函数可以作为参数传递
- 函数能够作为函数的返回值
- 闭包
柯里化的作用
- 延迟计算。上面的例子已经比较好的说明了。
- 参数复用。当在多次调用同一个函数，并且传递的参数绝大多数是相同的，那么该函数可能是一个很好的柯里化候选。
- 动态创建函数。这可以是在部分计算出结果后，在此基础上动态生成新的函数处理后面的业务，这样省略了重复计算。或者可以通过将要传入调用函数的参数子集，部分应用到函数中，从而动态创造出一个新函数，这个新函数保存了重复传入的参数（以后不必每次都传）。例如，事件浏览器添加事件的辅助方法：
var addEvent = function(el, type, fn, capture) {
if (window.addEventListener) {
el.addEventListener(type, function(e) {
fn.call(el, e);
}, capture);
} else if (window.attachEvent) {
el.attachEvent("on" + type, function(e) {
fn.call(el, e);
});
}
};
- 每次添加事件处理都要执行一遍 if...else...，其实在一个浏览器中只要一次判定就可以了，把根据一次判定之后的结果动态生成新的函数，以后就不必重新计算。
var addEvent = (function(){
if (window.addEventListener) {
return function(el, sType, fn, capture) {
el.addEventListener(sType, function(e) {
fn.call(el, e);
}, (capture));
};
} else if (window.attachEvent) {
return function(el, sType, fn, capture) {
el.attachEvent("on" + sType, function(e) {
fn.call(el, e);
});
};
}
})();
- 这个例子，第一次 if...else... 判断之后，完成了部分计算，动态创建新的函数来处理后面传入的参数，这是一个典型的柯里化。
除了这些 函数的 bind 方法也是柯里化的典型实现。
02.函数 uncurrying 反柯里化
- 反柯里化的作用在与扩大函数的适用性，使本来作为特定对象所拥有的功能的函数可以被任意对象所用.
- 即把如下给定的函数签名，
obj.func(arg1, arg2)
- 转化成一个函数形式，签名如下：
func(obj, arg1, arg2)
这就是 反柯里化的形式化描述。
在JS中，当我们调用对象的某个方法的时候，其实不用去关系该对象原本是否被设计为拥有这个方法，这是动态类型语言的特点，也就是常说的鸭子类型。这也是反柯里化的前提。
先来看一个f反柯里化的基本实现：
Function.prototype.uncurrying = function (){
var _this = this;
return function (){
return Function.prototype.call.apply(_this,arguments);
}
};
function fn(){
console.log(`hello ${this.value},${[].slice.call(arguments)}`);
}
var uncurryfn = fn.uncurrying();
console.log(uncurryfn({value:'world'},'fq')); //hello world,fq
深度解析
- fn.uncurrying() 执行的时候_this = fn执行结果就是uncurrying内部的返回值函数
function (){
return Function.prototype.call.apply(_this,arguments);
}
所以 uncurryfn 存储的就是上面这个函数。
- 接下来 uncurryfn() 执行的时候，相当于
Function.prototype.call.apply(fn,[{value:'world'},'fq']);
也就是动态修改了call这个方法的上下文，相当于:
fn.call({value:'world'},'fq');
- 这个时候相当于调用 fn() 并且是 {value:'world'} 这个对象调用的，所以fn中的this就是 {value:'world'}，而fn的参数就是'fq'。所以打印出后面的结果！
通用反柯里化函数
- 把uncurrying写进prototype里面好像是不太好，所以可以单独提取出来。
var uncurrying = function (fn){
return function (){
var args = [].slice.call(arguments,1);
return fn.apply(arguments[0],args);
};
};
var str = '123';
var uncurrySplit = uncurrying(''.split);
var arr = uncurrySplit(str,'');
console.log(arr) // [1,2,3]
深度解析
- 把字符串的split函数传递给uncurrying，这个时候uncurrySplit相当于里面的返回值函数：
/*
uncurrySplit ==> function (){
var args = [].slice.call(arguments,1);
return fn.apply(arguments[0],args);
};
*/
- 这个时候去调用 uncurrySplit(str,'')，args就变成['']，然后返回的函数实际是 String.prototype.split.apply(str) 相当于 str调用了split('');
03.函数节流
- JS中函数大多数情况都是由用户主动调用的，除非是函数本身实现不合理，否则我们一般不会遇到跟性能有关的问题。但是在一些少数的情况下，函数的触发不是由用户直接控制的。在这些场景下，函数有可能频繁地调用，而造成性能问题，例如：window.onresize事件，window.onmousemove事件。上传进度事件。这个时候就就需要函数节流。
实现原理有很多种，例：
var delayExec = function (fn,delay){
var _self = fn, timer = null, firstTime = true;
return function (){
var args = arguments, _this = this;
if(firstTime){
_self.apply(this,args);
return firstTime = false;
}
if(timer){
return false;
}
timer = setTimeout(function(){
clearTimeout(timer);
timer = null;
_self.apply(_this,args);
},delay||0);
}
};
来源：http://www.cnblogs.com/copperhaze/p/6240947.html