[读书笔记]高阶函数

1. 什么是高阶函数

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

2. 高阶函数的示例

2.1 函数作为参数传递

（1） 回调函数（callback）

回调函数类似于C#中的委托，在异步操作中应用较为广泛。如jQuery中的ajax：

var getOrderInfo = function (callback) {
    $.ajax({
        type: 'POST',
        url: '/URL',
        data: "name=John&location=Boston",
        dataType: "json",
    }).then(function (data) {
        if (typeof callback === 'function') {
            // render 
            callback(data);
        }
    }, function () {
        console.error('error');
    });
};

（2） Array.prototype.sort

将排序规则作为回调函数传给Array.prototype.sort方法来得到想要的排序结果：

var s1 = [
    { name: '李雷', age: 12 },
    { name: '陈梅梅', age: 11 },
    { name: '露西', age: 11 },
    { name: '大卫', age: 13 }
],
s2 = [].concat(s1),
ageAsc = function (a, b) {
    return a.age - b.age;
},
ageDesc = function (a, b) {
    return b.age - a.age;
};
// 年龄从小到大
s1.sort(ageAsc);
console.dir(s1);
// 年龄大到小
s2.sort(ageDesc);
console.info(s2);

2.2 函数作为返回值输出

（1） 判断数据类型

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

（2） 获取单例

var getSingle = function (fn) {
    var ret;
    return function () {
        return ret || (ret = fn.apply(this, arguments));
    };
},
getScript = getSingle(function () {
    return document.createElement('script');
});

var script1 = getScript(), // 第一次调用时将执行 (ret = fn.apply(this, arguments)
    script2 = getScript(); // 第二次调用时直接返回 ret
console.log('script1 === script2 is ', script1 === script2); // 输出：true

3. 高阶函数的应用

3.1 高阶函数实现AOP

提起AOP（面向切面编程），可能会想起Spring MVC 中的AOP。实现如下：

Function.prototype.before = function (beforefn) {
    var that = this; // 保存原函数的引用
    console.log(that); // that指向print2()
    // 返回包含了原函数和新函数的"代理"函数
    // return#1
    return function () {
        beforefn.apply(this, arguments); // 执行新函数，修正this
        return that.apply(this, arguments); // 执行原函数
    };
};

Function.prototype.after = function (afterfn) {
    var that = this; // 保存原函数的引用
    console.log(that); // that 指向return#1
    // return#2
    return function () {
        var ret = that.apply(this, arguments); // 执行原函数，并保存原函数的执行结果
        afterfn.apply(this, arguments); // 执行新函数
        return ret; // 在新函数执行完成之后返回原函数的执行结果
    };
};

var print1 = function () {
    console.log(1);
},
print2 = function () {
    console.log(2);
},
print3 = function () {
    console.log(3);
};

print2 = print2.before(print1).after(print3);
print2();

3.2 柯里化（currying）

currying 又称部分求值。一个currying 的函数首先会接受一些参数，接受了这些参数之后，
该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保
存起来。待到函数被真正需要求值的时候，之前传入的所有参数都会被一次性用于求值。

var currying = function (fn) {
    var args = [];
    return function () {
        if (arguments.length === 0) {
            console.log(this);
            return fn.apply(this, args);
        } else {
            console.log(arguments,args);
            [].push.apply(args, arguments);
            // arguments.callee, Returns the Function object being executed
            return arguments.callee; 
        }
    }
},
cost = (function () {
    var money = 0;
    return function () {
        for (var i = 0, l = arguments.length; i < l; i++) {
            money += arguments[i];
        }
        return money;
    }
})();

var cost = currying(cost); // 转化成currying 函数
cost(100); // 未真正求值
cost(200); // 未真正求值
cost(300); // 未真正求值
console.log(cost()); // 求值并输出：600

3.3 反柯里化（uncurrying）

        Function.prototype.uncurrying = function () {
            var self = this;
            return function () {
                return Function.prototype.call.apply(self, arguments);
            }
        };

        var push = Array.prototype.push.uncurrying();

        var obj = {
            name: 'wills',
            age: 26
        };
        push(obj, 'JavaScript programer');

        console.log(obj); // Object {0: "JavaScript programer", name: "wills", age: 27, length: 1}

3.4 函数节流

函数节流目的即降低函数被频繁调用的频率。代码实现如下：

// 函数节流
var throttle = function (fn, interval) {
    var __self = fn, // 保存需要被延迟执行的函数引用
    timer, // 定时器
    firstTime = true; // 是否是第一次调用

    return function () {
        var args = arguments,
            that = this;

        // 如果是第一次调用，不需延迟执行
        if (firstTime) {
            __self.apply(that, args);
            return firstTime = false;
        }

        if (timer) { // 如果定时器还在，说明前一次延迟执行还没有
            return false;
        }

        timer = setTimeout(function () { // 延迟一段时间执行
            clearTimeout(timer);
            timer = null;
            __self.apply(that, args);
        }, interval || 500);
    };
};

var resizeThrottle = throttle(function () {
    console.log(1);
}, 500),
resize = function () {
    console.log(2);
};
window.onresize = function () {
    resizeThrottle();
    resize(2);
};

3.5 分时函数

 分时函数与函数节流相似，使用场景一般为主动调用。

var ary = [];
for (var i = 1; i <= 1000; i++) {
    ary.push(i); // 假设ary 装载了1000 个好友的数据
};
var renderFriendList = function (data) {
    for (var i = 0, l = data.length; i < l; i++) {
        var div = document.createElement('div');
        div.innerHTML = i;
        document.body.appendChild(div);
    }
};
renderFriendList(ary);

使用分时函数之后：

var timeChunk = function (ary, fn, count) {
    /// <summary>
    /// 分时函数
    /// </summary>
    /// <param name="ary" type="Array">数据(对象)数组</param>
    /// <param name="fn" type="Function">函数</param>
    /// <param name="count" type="Number">每次执行的数组长度</param>
    var obj,
        t,
        len = ary.length,
        start = function () {
            for (var i = 0; i < Math.min(count || 1, ary.length) ; i++) {
                var obj = ary.shift();
                fn(obj);
            }
        };

    return function () {
        t = setInterval(function () {
            if (ary.length === 0) { // 如果全部节点都已经被创建好
                return clearInterval(t);
            }
            start();
        }, 200); // 分批执行的时间间隔，也可以用参数的形式传入
    };
};

var ary = [];
for (var i = 1; i <= 1000; i++) {
    ary.push(i);
};
var renderFriendList = timeChunk(ary, function (n) {
    var div = document.createElement('div');
    div.innerHTML = n;
    document.body.appendChild(div);
}, 8);

renderFriendList();

3.6 惰性加载函数

 

        var addEvent = function (elem, type, handler) {
            console.log('addEvent');
            if (window.addEventListener) {
                console.log('addEventListener');
                addEvent = function (elem, type, handler) {
                    elem.addEventListener(type, handler, false);
                }
            } else if (window.attachEvent) {
                console.log('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(1);
        });
        addEvent(div, 'click', function () {
            alert(2);
        });