高阶函数

什么是高阶函数？

满足以下条件之一的函数
- 函数可以作为参数被传递
- 函数可以做为返回值输出

函数作为参数传递

把函数作为参数传递，这代表我们可以抽离出一部分容易变化的业务逻辑，把这部分业务逻辑放在函数的参数中，这样一来可以分离业务代码中变化与不变的部分。其中一个重要的应用场景就是常见的回调函数。

例如：在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);
    }
};

posted @ 2017-01-01 13:25 xbests 阅读(1647) 评论(0) 编辑收藏举报

刷新页面返回顶部

xbests