Javascript 闭包与高阶函数 ( 一 )

上个月，淡丶无欲让我写一期关于闭包的随笔，其实惭愧，我对闭包也是略知一二 ,不能给出一个很好的解释，担心自己讲不出个所以然来。所以带着学习的目的来写一写，如有错误，忘不吝赐教。

为什么要有闭包？

初识闭包时，，我一直在想，为什么只有JS有闭包，c#，c++ 为什么没有？？

1. 封装局部变量

看下面一个例子,计算斐波那契数。

为了能够重用数据，一个通用做法就是将计算过的数据缓存起来,但缓存的数据对外是不可见的。

看下面的 c# 代码：

public static  class Fibonacci{

    public static Fibonacci(){

        cache[0] = 1;

        cache[1] = 1;

    }

    private static IList<int> cache = new List<int>(1000,-1);

    public static int Calc(n){

        if(cache[n] != -1){

            return cache[n];

        }else{

            return cache[n] = Calc(n-1) + Calc(n-2);

        }

    }

}

快两年没写c#了，很撇脚，囧，但是在这类静态语言，这种方法很合适。

看JS 怎么写

var cache = [1, 1];

var calc = function(){

    return cache[n] != undefined ?

        cache[n]:

        cache[n] = calc(n-1) + calc (n-2);

}

但是在JS中杜绝使用全局变量,所以下面改写

var calc = function(){

    return calc.cache[n] != undefined ?

        calc.cache[n]:

        calc.cache[n] = calc.cache(n-1) + calc.cache (n-2);

}

calc.cache = [1,1];

这里将全局变量作为 calc 的一个属性存储，但是对外可见，无法隐藏。

就到了闭包大显身手的时候,由于这里 cache 被外部调用，所以可以不被销毁。

var Fibonacci = (function() {

    var cache = [1, 1];

    return {

        calc: function(n) {

            return cache[n] != undefined ?

                cache[n] :

                cache[n] = this.calc(n - 1) + this.calc(n - 2);

        }

    }

})();

Fibonacci.calc(5);  // 8

总结：

在 c# ，c++ 等高级语言中，存在私有变量，所以无需闭包。但是在JS中，私有变量是一件很麻烦的事情。这时候，将局部变量放置在一个函数作用域中，可以在内部使用，而外面无法访问。这就形成了闭包。

2.延续对象生命周期

对于全局变量来说，全局变量的生存周期当然是永久的，除非我们主动销毁这个全局变量。

而对于在函数内用var关键字声明的局部变量来说，当退出函数时，这些局部变量即失去了它们的价值，它们都会随着函数调用的结束而被销毁：

现在来看看下面这段代码：

var func = function(){

    var a = 1;

    return function(){

        a++;

        alert ( a );

    }

}; 

var f = func(); 

f();    // 输出：2

f();    // 输出：3

f();    // 输出：4

f();    // 输出：5

跟我们之前的推论相反，当退出函数后，局部变量a并没有消失，而是似乎一直在某个地方存活着。这是因为当执行 var f=func();时，f返回了一个匿名函数的引用，它可以访问到 func()被调用时产生的环境，而局部变量 a 一直处在这个环境里。既然局部变量所在的环境还能被外界访问，这个局部变量就有了不被销毁的理由。在这里产生了一个闭包结构，局部变量的生命看起来被延续了。

这个特性有时候会很麻烦，但有时候很有用，用来延续局部变量的寿命。

img 对象经常用于进行数据上报，如下所示：

var report = function( src ){

    var img = new Image();

    img.src = src;

}; 

report( 'http://xxx.com/getUserInfo' );

但是通过查询后台的记录我们得知，因为一些低版本浏览器的实现存在bug，在这些浏览器

下使用report函数进行数据上报会丢失30%左右的数据，也就是说，report函数并不是每一次都成功发起了 HTTP请求。丢失数据的原因是 img 是 report 函数中的局部变量，当 report 函数的调用结束后，img 局部变量随即被销毁，而此时或许还没来得及发出 HTTP请求，所以此次请求就会丢失掉。

现在我们把 img 变量用闭包封闭起来，便能解决请求丢失的问题：

 var report = (function(){

    var imgs = []; 

    return function( src ){

        var img = new Image();

        imgs.push( img );

        img.src = src;

    }

})();

高阶函数

闭包在JS中非常广泛，常常与高阶函数作伴。

高阶函数是指至少下面条件之一的函数

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

函数作为参数传递作为回调函数，应用场景非常广泛，此处不再举例。

函数作为返回值，这里给出两个例子。

判断数据类型

'use strict';

var Type = {};

for (var i = 0, type; type = ['String', 'Number', 'Boolean', 'Object'][i++];) {

    (function(type) {

        Type["is" + type] = function(o) {

            return Object.prototype.toString.call(o) === '[object ' + type + ']';

        }

    })(type);

}

console.log(Type.isString("hh"));

实现单例模式

var getSingle = function(func){

    var ret = null;

    return function(){

        return ret || ret = func.apply(this, Array.prototype.slice.call(arguments));

    }

}

var getScript = getSingle(function(){

    return document.createElement( 'script' );

}); 

var script1 = getScript();

var script2 = getScript(); 

alert ( script1 === script2 );    // 输出：true

高阶函数实现 AOP

AOP（面向切面编程）的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，这些

跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后。再通过“动态织入”的方式掺入业务逻辑模块中。这样做的好处首先是可以保持业务逻辑模块的纯净和高内聚性，其次是可以很方便地复用日志统计等功能模块。

在传统通过on = 为事件注册处理程序中，赋值一个新的处理程序会覆盖掉原来的处理程序,我们可以这么做

var addEvent = function(target,event ,func){

    var old;

    target[event] = functoin(e){

        if(old = target[event]){

            old();

        }

        func();

    }

}

通常，在 JavaScript中实现 AOP，都是指把一个函数“动态植入”到另外一个函数之中，具

体的实现技术有很多，本节我们通过扩展 Function.prototype 来做到这一点

Function.prototype.before = function(beforeFn) {

    var self = this;

    return function() {

        beforeFn.apply(this, Array.prototype.slice.call(arguments));

        return self.apply(this, Array.prototype.slice.call(arguments));

    }

};

Function.prototype.after = function(afterFn) {

    var self = this;

    return function() {

        var ret;

        ret = self.apply(this, Array.prototype.slice.call(arguments));

        afterFn.apply(this, Array.prototype.slice.call(arguments));

        return ret;

    }

}

var func = function() {

    console.log(2);

}

func = func.before(function() {

    console.log(1);

}).after(function() {

    console.log(3);

})

func();

输出 1 2 3 。

return 后的函数中的this 取决于真实环境的this ，因为返回的是一个独立的函数。

高阶函数的其他应用

函数柯里化

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

看下面一个例子

func(1);   1

func(1)(2);   2

func(1)(2)(3); 6

...

这个例子就是函数柯里化的典型应用，重点考察闭包和高阶函数，也是一道比较常见的面试题

看下面的解法。

'use strict';

var curry = (function() {

    var data = [1];

    var func = function(n) {

        data.push(n);

        return func;

    }

    func.valueOf = function() {

        var ret = data.reduce(function(a, b) {

            return a * b;

        })

        data = [1];

        return ret;

    }

    return func;

})();

console.log(curry(1));

console.log(curry(1)(2));

console.log(curry(1)(2)(3));

在上面的解法中，我们将函数柯里化和数据计算放在一起，违背了单一职责原则。现在，我们可以专门定义一个函数，用于对参数进行柯里化。

'use strict';

var curry = function(fn) {

    var args = [];

    var ret = function(n) {

        args.push(n);

        return ret;

    }

    ret.valueOf = function() {

        var ret = args.reduce(fn);

        args = [];

        return ret;

    }

    return ret;

}

var func = curry(function(a, b) {

    return a * b;

})

console.log(func(1));

console.log(func(1)(2));

console.log(func(1)(2)(3));

如果有错误,希望不吝赐教 ~

注：这篇随笔的一些例子代码来自于《JavaScript 设计模式与实践》，书中非常详细并深入讲解了JavaScript 高级和 17 种设计模式，对于JavaScript提高非常有帮助。安利 ~ 。想要电子版可以给我发邮件： mymeat@126.com

转载请说明原文出处:http://www.cnblogs.com/likeFlyingFish/p/6421615.html

巴特西