深入理解闭包

1. 变量的作用域

变量作用域两种：全局变量和局部变量

js特殊之处在于函数内部可以直接读取全局变量

例1：

var n=999;

function f1(){

alert(n);

}

f1(); //999

另一方面函数外部无法读取函数内的局部变量

例2：

function f1(){

var n=999;

}

alert(n); //Error

函数内部声明变量的时候，一定要用var，不用的话，实际上声明了一个全局变量！

例3：

function f1(){

n=999;

}

f1();

alert(n); //999

2. 从外部读取局部变量

例：

function f1(){

n=999;

function f2(){

alert(n); //999

}

}

以上，f1内部所有局部变量对于f2是可见的，但是反过来就不行，f2内的局部变量对f1是不可见的。这是js语言特有的‘链式作用域’结构(chain scope)，子对象会一级一级地向上寻找所有父对象的变量。

因此可以用下列方法，访问函数内的局部变量:

例2：

function f1(){

n=999;

function f2(){

alert(n);

}

return f2;

}

var result=f1();

result(); //999, 这里等价于 f1()();

3. 闭包的概念

上面的例子f2函数就是闭包

简单地说，闭包就是能够读取其他函数内部变量的函数

在js中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解为：定义在一个函数内部的函数

所以，本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁

4. 闭包的用途

它的最大用处有两个：一个是可以读取函数内部的变量，另一个就是可以让这些变量保存在内存中。

例：

function f1(){

var n=999;

nAdd=function(){n+=1} //这里的nAdd没有var，故调用该方法后为全局变量

function f2(){

alert(n);

}

return f2;

}

var result=f1();

result(); //999

nAdd();

result(); //1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后被垃圾回收机制（garbage collection）回收。

这段代码中另一个值得注意的地方，就是“nAdd=function(){n+=1}”这一行，首先在nAdd前面没有使用var关键字，因此 nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

5.使用闭包注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

6.思考题

如果你能理解下面代码的运行结果，应该就算理解闭包的运行机制了

例1

var name = "The Window";   

　　var object = {   

　　　　name : "My Object",   

　　　　getNameFunc : function(){   

　　　　　　return function(){   

　　　　　　　　return this.name;   

　　　　　};   

　　　　}   

};   

alert(object.getNameFunc()());   //The Window

返回的方法this指向对象外部的name对象'The Window',若要返回对象的name属性，则应将代码改为：

var name = "The Window";   

　　var object = {   

　　　　name : "My Object",   

　　　　getNameFunc : function(){  

　　　　　　　　return this.name;  　

　　　　}   

};   

alert(object.getNameFunc());   //The Object

例2

function outerFun(){

var a=0;

function innerFun(){

a++;

alert(a);

}

}

innerFun();

上面的代码是错误的，innerFun()的作用域在outerFun()内部，所以在外部调用是错误的，改成如下，也就是闭包:

function outerFun(){

var a=0;

function innerFun(){

a++;

alert(a);

}

return innerFun;

}

var obj=outerFun();

obj(); //1

obj(); //2

var obj2=outerFun();

obj2(); //1

obj2(); //2

什么是闭包： 当内部函数 在定义它的作用域 的外部 被引用时，就创建了该内部函数的闭包，如果内部函数引用了位于外部函数的变量，当外部函数调用完毕后，这些变量在内存不会被释放，因为闭包需要它们。

例2

function outerFun(){

var a=0;

alert(a);

}

var a=4;

outerFun();

alert(a);

结果是0,4,因为在函数内部使用了var关键字，维护a的作用域在outerFun内部.

再看下面的代码:

function outerFun(){

//没有var

a=0;

alert(a);

}

var a=4;

outerFun();

alert(a);

结果是0,0 作用域链是描述一种路径的术语，沿着该路径可以确定变量的值，当执行a=0时，因为没有使用var，因此赋值操作会沿着作用域链到var a=4;并改变其值。