高阶函数

高阶函数是指至少满足下列条件之一的函数：

• 函数可以作为参数传递
• 函数可以作为返回值输出

JavaScript语言中的函数显然满足高阶函数的条件，在实际开发中，无论是将函数作为参数传递，还是让函数的执行结果返回另外一个函数，这两种情形都有很多应用场景，下面就列举一些高阶函数的应用场景
1、函数作为参数传递
把函数当做参数传递，这代表我们可以抽离出一部分容易变化的业务逻辑，把这部分业务逻辑放在函数参数中，这样一来可以分离业务代码中变化与不变化的部分。其中一个重要应用场景就是常见的回调函数。

• 回调函数

在ajax异步请求的应用中，回调函数的使用非常频繁。当我们想在ajax请求返回之后做一些事情，但又并不知道请求返回的确切时间时，最常见的方案就是把callback函数当做参数传入发起ajax请求的方法中，待请求完成之后执行callback函数：

var getUserInfo = function( userId, callback ) {
    $.ajax('http://xxx.com/getUserInfo?'+userId,function(data){
        if(typeof callback === 'function') {
            callback( data );
        }
    };
};
getUserInfo( 13175, function(data) {
    alert( data.userName);
});

回调函数的应用不仅只在异步请求中，当一个函数不适合执行一些请求时，我们也可以把这些请求封装成一个函数，并把它作为参数传递给另外一个函数，“委托”给另外一个函数来执行。
比如，我们想在页面中创建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';
    }
};
appendDiv();

把div.style.display = ‘none’的逻辑硬编码在appendDiv里显然是不合理的，appendDiv未免有点个性化，成为了一个难以复用的函数，并不是每个人创建了节点之后就希望它们立刻被隐藏。于是我们把div.style.display = ‘none’这行代码抽出来，用回调函数的形式传入appendDiv方法：

var appendDiv = function(callback) {
    for(var i = 0;i<100;i++) {
        var div = document.createElement('div');
        div.innerHTML = i;
        document.body.appendChild( div );
        if( typeof callback === 'function') {
            callback( div );
        }
    };
};
appendDiv(function(node) {
    node.style.display = 'none';
};)

可以看到，隐藏节点的请求实际上是由客户发起的，但是客户并不知道节点什么时候会创建好，于是把隐藏节点的逻辑放在回调函数中，“委托”给appendDiv方法。appendDiv方法当然知道节点什么时候创建好，所以在节点创建好的时候，appendDiv会执行之前客户传入的回调函数。

• Array.prototype.sort

Array.ptototype.sort接受一个函数当做参数，这个函数里面封装了数组元素的排序规则。从Array.prototype.sort的使用可以看到，我们的目的是对数组进行排序，这是不变的部分；而使用什么规则去排序，则是可变的部分。把可变的部分封装在函数参数里，动态传入Array.prototype.sort，使Array.prototype.sort方法成为了一个非常灵活的方法，代码如下：

//从小到大排序
[1,4,3].sort( function(a,b) {
    return a-b;
});
//输出: [1,3,4]

//从大到小排序
[1,4,3].sort( function( a,b ) {
    return b - a;
});
//输出：[4,3,1]

2、函数作为返回值输出
相比把函数当做参数传递，函数当做返回值输出的场景也许更多，也更能体现函数式编程的巧妙。让函数继续返回一个可执行的函数，意味着运算过程是可延续的。

• 判断数据的类型

我们来看看这个例子，判断一个数据是否是数组，在以往的实现中，可以基于鸭子类型的概念来判断，比如判断这个数据有没有length属性，有没有sort方法或者slice方法等。但更好的方式是用Object.prototype.toString来计算。Object.prototype.toString.call( obj )返回一个字符串，比如Object.prototype.toString.call( [1 , 2 , 3 ] )总是返回“[ object Array]”，而Object.prototype.toString.call( “str” )总是返回“[ object String ]”。所以我们可以编写一系列的isType函数。代码如下：

var isString = function( obj ) {
    return Object.prototype.toString.call( obj ) === '[ object String ]';
};
var isArray = function( obj ) {
    return Object.prototype.toString.call( obj ) === '[ object Array ]';
};
var isNumber = function( obj ) {
    return Object.prototype.toString.call( obj ) === '[ object Number ]';
};

我们发现，这些函数的大部分实现都是相同的，不同的只是Object.prototype.toString.call(obj)返回的字符串。为了避免多余的代码，我们尝试把这些字符串作为参数提前植入isType函数。代码如下：

var isType = function( type ) {
    return function( obj ) {
        return Object.prototype.toString.call(obj)==='[object'+type+']';
    }
};
var isString = isType( 'String' );
var isArray = isType( 'Array' );
var isNumber = isType( 'Number');
console.log(isArray( [1,2,3] ));// true

我们还可以用循环语句，来批量注册这些isType函数：

var Type = {};
for(var i=0,type;type=['String', 'Array', 'Number'][i++];) {
    (function(type) {
        Type['is'+type]=function(obj) {
            return Object.prototype.toString.call(obj)==='[object'+type+']';
        }
    })(type)
};
Type.isArray( [] ); //true
Type.isString( 'str' ) // true

- getSingle

下面是一个单例模式的例子，在第三部分设计模式的学习中，我们将进行更深入的理解，这里暂且只了解其代码实现：

var getSingle = function( fn ) {
    var ret;
    return function () {
        return ret || ( ret = fn.apply(this, arguments));
    }
};
这个高阶函数的列子，既把函数当做参数传递，又让函数执行后返回了另外一个函数。我们可以看看getSingle函数的效果：

var getScript = getSingle(function(){
    return document.createElement('script');
});
var script1 = getScript();
var script2 = getScript();
alert( script1 === script2 ); // true

3、高阶函数实现AOP
AOP（面向切面编程）的主要作用是把一些核心业务逻辑模块无关的功能抽离出来，这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后，再通过“动态织入”的方式掺入业务逻辑模块中。这样做的好处首先是可以保持业务逻辑模块的纯净和高内聚性，其次是可以很方便的复用日志统计等功能模块。
通常，在JavaScript中实现AOP，都是指把一个函数“动态织入”到另外一个函数之中，具体的实现技术有很多，本节我们通过扩展Function.prototype来做到这一点。代码如下：

Function.prototype.before = function( beforefn ) {
    var _self = this; //保存原函数的引用
    return function(){ //返回包含了原函数和新函数的“代理”函数
        beforefn.apply( this, arguments ); //执行新函数，修正this
        return _self.apply( this, arguments );//执行原函数
    }
};

Function.prototype.after = function( afterfn ) {
    var _self = this;
    return function(){
        var ret=_selft.apply( this, arguments );
        afterfn.apply( this, arguments );
        return ret;
    }
};
var func = function(){
    console.log( 2 );
};
func = func.before(function(){
    console.log(1);
}).alter(function(){
    console.log(3);
});
func(); // 1,2,3

这种使用AOP的方式来给函数添加职责，也是JavaScript语言中一种非常特别的巧妙的装饰者模式实现。这种装饰者模式在实际开发中非常有用。
4、高阶函数的其他应用
- currying
- uncurrying
- 函数节流
- 分时函数
- 惰性加载函数
在web开发中，因为浏览器之间的实现差异，一些嗅探工作总是不可避免。比如我们需要一个在各个浏览器中能够通用的事件绑定函数addEvent，常见的写法如下：

var addEvent = function(elem,type,handler) {
    if(window.addEventListener){
        return elem.addEventListener(type,handler,false);
    }
    if(window.attachEvent){
        return elem.attachEvent('on'+type,handler);
    }
};

这个函数的缺点是，当它每次被调用的时候都会执行里面的if条件分支，虽然执行这些if分支的开销不算大，但也许有一些方法可以让程序避免这些重复的执行过程。
第二种方案是这样，我们把嗅探浏览器的操作提前到代码加载的时候，在代码加载的时候就立刻执行一次判断，以便让addEvent返回一个包裹了正确逻辑的函数。代码如下：

var addEvent = (function(){
    if(window.addEventListener){
        return function(elem,type,handler){
            elem.addEventListener(type,handler,false);
        }
    }
    if(window.attachEvent){
        return function(elem,type,handler){
            elem.attachEvent('on'+type,handler);
        }
    }
})();

目前的addEvent函数依然有个缺点，也许我们从头到尾都没有使用过addEvent函数，这样看来，前一次的浏览器嗅探就是完成多余的操作，而且这也会稍稍延长页面ready的时间。
第三种方案即是我们将要讨论的惰性载入函数方案。此时addEvent依然被声明为一个普通函数，在函数里依然有一些分支判断。但是在第一次进入条件分支之后，在函数内部会重写这个函数，重写之后的函数就是我们期望的addEvent函数，在下一次进入addEvent函数的时候，addEvent函数里不再存在条件分支语句：

<body>
    <div id="div1">点我绑定事件</div>
    <script>
        var addEvent=function(elem,type,handler){
            if(window.addEventListener){
                addEvent = function(elem,type,handler) {
                    elem.addEventListener(type,handler,false);
                }
            } else if (window.attachEvent){
                addEvent = function(elem,type,handler) {
                    elem.attachEvent('on'+type,handler);
                }
            }
            addEvent( elem, type, handler );
        };
        var div = document.getElementById( 'div1' );
        addEvent( div, 'click', function({alert(2)});
    </script>
</body>