js闭包

什么是闭包

闭包是什么?闭包是Closure，这是静态语言所不具有的一个新特性。但是闭包也不是什么复杂到不可理解的东西，简而言之，闭包就是：

• 闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。
• 闭包就是就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配
• 当在一个函数内定义另外一个函数就会产生闭包

上面的第二定义是第一个补充说明，抽取第一个定义的主谓宾——闭包是函数的‘局部变量’集合。只是这个局部变量是可以在函数返回后被访问。（这个不是官方定义，但是这个定义应该更有利于你理解闭包）

做为局部变量都可以被函数内的代码访问，这个和静态语言是没有差别。闭包的差别在于局部变变量可以在函数执行结束后仍然被函数外的代码访问。这意味着函数必须返回一个指向闭包的“引用”，或将这个”引用”赋值给某个外部变量，才能保证闭包中局部变量被外部代码访问。当然包含这个引用的实体应该是一个对象，因为在Javascript中除了基本类型剩下的就都是对象了。可惜的是，ECMAScript并没有提供相关的成员和方法来访问闭包中的局部变量。但是在ECMAScript中，函数对象中定义的内部函数(inner function)是可以直接访问外部函数的局部变量，通过这种机制，我们就可以以如下的方式完成对闭包的访问了。

function greeting(name) {
    var text = 'Hello ' + name; // local variable
    // 每次调用时，产生闭包，并返回内部函数对象给调用者
    return function () { alert(text); }
}
var sayHello=greeting( "Closure" );
sayHello()  // 通过闭包访问到了局部变量text

上述代码的执行结果是：Hello Closure，因为sayHello()函数在greeting函数执行完毕后，仍然可以访问到了定义在其之内的局部变量text。

好了，这个就是传说中闭包的效果，闭包在Javascript中有多种应用场景和模式，比如Singleton，Power Constructor等这些Javascript模式都离不开对闭包的使用。

ECMAScript闭包模型

ECMAScript到底是如何实现闭包的呢？想深入了解的亲们可以获取ECMAScript 规范进行研究，我这里也只做一个简单的讲解，内容也是来自于网络。

在ECMAscript的脚本的函数运行时，每个函数关联都有一个执行上下文场景(Execution Context) ，这个执行上下文场景中包含三个部分

• 文法环境（The LexicalEnvironment）
• 变量环境（The VariableEnvironment）
• this绑定

其中第三点this绑定与闭包无关，不在本文中讨论。文法环境中用于解析函数执行过程使用到的变量标识符。我们可以将文法环境想象成一个对象，该对象包含了两个重要组件，环境记录(Enviroment Recode)，和外部引用(指针)。环境记录包含包含了函数内部声明的局部变量和参数变量，外部引用指向了外部函数对象的上下文执行场景。全局的上下文场景中此引用值为NULL。这样的数据结构就构成了一个单向的链表，每个引用都指向外层的上下文场景。

例如上面我们例子的闭包模型应该是这样，sayHello函数在最下层，上层是函数greeting，最外层是全局场景。如下图：

因此当sayHello被调用的时候，sayHello会通过上下文场景找到局部变量text的值，因此在屏幕的对话框中显示出”Hello Closure”
变量环境(The VariableEnvironment)和文法环境的作用基本相似，具体的区别请参看ECMAScript的规范文档。

闭包的样列

前面的我大致了解了Javascript闭包是什么，闭包在Javascript是怎么实现的。下面我们通过针对一些例子来帮助大家更加深入的理解闭包，下面共有5个样例，例子来自于JavaScript Closures For Dummies(镜像)。
例子1:闭包中局部变量是引用而非拷贝

function  say667() {
    // Local variable that ends up within closure
    var  num = 666;
    var  sayAlert = function () { alert(num); }
    num++;
    return  sayAlert;
}

var sayAlert = say667();
sayAlert()

因此执行结果应该弹出的667而非666。

例子2：多个函数绑定同一个闭包，因为他们定义在同一个函数内。

function  setupSomeGlobals() {
    // Local variable that ends up within closure
    var  num = 666;
    // Store some references to functions as global variables
    gAlertNumber = function () { alert(num); }
    gIncreaseNumber = function () { num++; }
    gSetNumber = function (x) { num = x; }
}
setupSomeGlobals(); // 为三个全局变量赋值
gAlertNumber(); //666
gIncreaseNumber();
gAlertNumber(); // 667
gSetNumber(12); //
gAlertNumber(); //12

例子3：当在一个循环中赋值函数时，这些函数将绑定同样的闭包

function  buildList(list) {
    var  result = [];
    for  ( var  i = 0; i < list.length; i++) {
        var  item =  'item'  + list[i];
        result.push(  function () {alert(item +  ' '  + list[i])} );
    }
    return  result;
}

function  testList() {
    var  fnlist = buildList([1,2,3]);
    // using j only to help prevent confusion - could use i
    for  ( var  j = 0; j < fnlist.length; j++) {
        fnlist[j]();
    }
}

testList的执行结果是弹出item3 undefined窗口三次，因为这三个函数绑定了同一个闭包，而且item的值为最后计算的结果，但是当i跳出循环时i值为4，所以list[4]的结果为undefined.

例子4：外部函数所有局部变量都在闭包内，即使这个变量声明在内部函数定义之后。

function  sayAlice() {
    var  sayAlert = function () { alert(alice); }
    // Local variable that ends up within closure
    var  alice = 'Hello Alice' ;
    return  sayAlert;
}
var helloAlice=sayAlice();
helloAlice();

执行结果是弹出”Hello Alice”的窗口。即使局部变量声明在函数sayAlert之后，局部变量仍然可以被访问到。

例子5：每次函数调用的时候创建一个新的闭包

function  newClosure(someNum, someRef) {
    // Local variables that end up within closure
    var  num = someNum;
    var  anArray = [1,2,3];
    var  ref = someRef;
    return function (x) {
        num += x;
        anArray.push(num);
        alert( 'num: '  + num +
        '\nanArray '  + anArray.toString() +
        '\nref.someVar '  + ref.someVar);
    }
}
closure1=newClosure(40,{someVar: 'closure 1' });
closure2=newClosure(1000,{someVar: 'closure 2' });

closure1(5); // num:45 anArray[1,2,3,45] ref:'someVar closure1'
closure2(-10); // num:990 anArray[1,2,3,990] ref:'someVar closure2'

闭包的应用

Singleton 单件：

var singleton = function () {
    var privateVariable;
    function privateFunction(x) {
        ...privateVariable...
    }

    return {
        firstMethod: function (a, b) {
            ...privateVariable...
        },
        secondMethod: function (c) {
            ...privateFunction()...
        }
    };
}();

这个单件通过闭包来实现。通过闭包完成了私有的成员和方法的封装。匿名主函数返回一个对象。对象包含了两个方法，方法1可以方法私有变量，方法2访问内部私有函数。需要注意的地方是匿名主函数结束的地方的'()’，如果没有这个'()’就不能产生单件。因为匿名函数只能返回了唯一的对象，而且不能被其他地方调用。这个就是利用闭包产生单件的方法。

我们来看看闭包的用途。事实上，通过使用闭包，我们可以做很多事情。比如模拟面向对象的代码风格；更优雅，更简洁的表达出代码；在某些方面提升代码的执行效率。

1 匿名自执行函数

我们知道所有的变量，如果不加上var关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有很多坏处，
比如：别的函数可能误用这些变量；造成全局对象过于庞大，影响访问速度(因为变量的取值是需要从原型链上遍历的)。
除了每次使用变量都是用var关键字外，我们在实际情况下经常遇到这样一种情况，即有的函数只需要执行一次，其内部变量无需维护，
比如UI的初始化，那么我们可以使用闭包：

 var datamodel = {
     table : [],
     tree : {}
 };

 (function(dm){
     for(var i = 0; i < dm.table.rows; i++){
        var row = dm.table.rows[i];
        for(var j = 0; j < row.cells; i++){
            drawCell(i, j);
        }
     }

     //build dm.tree
 })(datamodel);

我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，
因此在执行完后很快就会被释放，关键是这种机制不会污染全局对象。

2缓存

再来看一个例子，设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，
那么我们就需要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，如果找不到，则进行计算，
然后更新缓存并返回值，如果找到了，直接返回查找到的值即可。闭包正是可以做到这一点，因为它不会释放外部的引用，
从而函数内部的值可以得以保留。

 var CachedSearchBox = (function(){
     var cache = {},
        count = [];
     return {
        attachSearchBox : function(dsid){
            if(dsid in cache){//如果结果在缓存中
               return cache[dsid];//直接返回缓存中的对象
            }
            var fsb = new uikit.webctrl.SearchBox(dsid);//新建
            cache[dsid] = fsb;//更新缓存
            if(count.length > 100){//保正缓存的大小<=100
               delete cache[count.shift()];
            }
            return fsb;
        },

        clearSearchBox : function(dsid){
            if(dsid in cache){
               cache[dsid].clearSelection();
            }
        }
     };
 })();

 CachedSearchBox.attachSearchBox("input1");

这样，当我们第二次调用CachedSearchBox.attachSerachBox(“input1”)的时候，
我们就可以从缓存中取道该对象，而不用再去创建一个新的searchbox对象。

3 实现封装

可以先来看一个关于封装的例子，在person之外的地方无法访问其内部的变量，而通过提供闭包的形式来访问：

 var person = function(){
     //变量作用域为函数内部，外部无法访问
     var name = "default";

     return {
        getName : function(){
            return name;
        },
        setName : function(newName){
            name = newName;
        }
     }
 }();

 print(person.name);//直接访问，结果为undefined
 print(person.getName());
 person.setName("abruzzi");
 print(person.getName());

 得到结果如下：

 undefined
 default
 abruzzi

 

4 闭包的另一个重要用途是实现面向对象中的对象，传统的对象语言都提供类的模板机制，
这样不同的对象(类的实例)拥有独立的成员及状态，互不干涉。虽然JavaScript中没有类这样的机制，但是通过使用闭包，
我们可以模拟出这样的机制。还是以上边的例子来讲：

 function Person(){
     var name = "default";

     return {
        getName : function(){
            return name;
        },
        setName : function(newName){
            name = newName;
        }
     }
 };


 var john = Person();
 print(john.getName());
 john.setName("john");
 print(john.getName());

 var jack = Person();
 print(jack.getName());
 jack.setName("jack");
 print(jack.getName());

 运行结果如下：

 default
 john
 default
 jack

由此代码可知，john和jack都可以称为是Person这个类的实例，因为这两个实例对name这个成员的访问是独立的，互不影响的。