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);   1func(1)(2);   2func(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提高非常有帮助 。安利 ~ 。 想要电子版可以给我发邮件： [e-mail]

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