javascript闭包

一、变量的作用域

要理解闭包，首先必须理解Javascript特殊的变量作用域。

变量的作用域无非就是两种：全局变量和局部变量。

Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

Js代码

　　var n=999;

　　function f1(){

　　　　alert(n);

　　}

　　f1(); // 999

另一方面，在函数外部自然无法读取函数内的局部变量。

Js代码

　　function f1(){

　　　　var n=999;

　　}

　　alert(n); // error

这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

Js代码

　　function f1(){

　　　　n=999;

　　}

　　f1();

　　alert(n); // 999

--------------------------------------------------------------------------------------------------------

二、如何从外部读取局部变量？

出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。

那就是在函数的内部，再定义一个函数。

Js代码

　　function f1(){

　　　　n=999;

　　　　function f2(){

　　　　　　alert(n); // 999

　　　　}

　　}

在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1 就是不可见的。这就是Javascript语言特有的“链式作用域”结构（chain scope），

子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！

Js代码

　　function f1(){

　　　　n=999;

　　　　function f2(){

　　　　　　alert(n);

　　　　}

　　　　return f2;

　　}

　　var result=f1();

　　result(); // 999

--------------------------------------------------------------------------------------------------------

三、闭包的概念

上一节代码中的f2函数，就是闭包。

各种专业文献上的“闭包”（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。

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

--------------------------------------------------------------------------------------------------------b

四、闭包的用途

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

怎么来理解这句话呢？请看下面的代码。

Js代码

　　function f1(){

　　　　var n=999;

　　　　nAdd=function(){n+=1}

　　　　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，可以在函数外部对函数内部的局部变量进行操作。

--------------------------------------------------------------------------------------------------------

五、使用闭包的注意点

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

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

改变父函数内部变量的值。

--------------------------------------------------------------------------------------------------------

六、思考题

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

Js代码 

　　var name = "The Window"; 

　　var object = { 

　　　　name : "My Object", 

　　　　getNameFunc : function(){ 

　　　　　　return function(){ 

　　　　　　　　return this.name; 

　　　　　}; 

　　　　} 

}; 

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

解析：

object.getNameFunc()返回的是一个函数：

function(){ 

　　　　　　　　return this.name; 

　　　　　 }; 

object.getNameFunc()()就是运行上面返回的函数，该function现在就是全局的，再调用this.name就是全局对象的name属性了。

--------------------------------------------------------------------------------------------------------

JavaScript闭包例子

function outerFun(){

var a=0;

function innerFun(){

a++;

alert(a);

} 

}

innerFun()

上面的代码是错误的.innerFun()的作用域在outerFun()内部,所在outerFun()外部调用它是错误的.

改成如下,也就是闭包:

Js代码

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

什么是闭包:

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

--------------------------------------------------------------------------------------------------------

再来看一个例子

Js代码

function outerFun(){

var a =0;

alert(a); 

}

var a=4;

outerFun();

alert(a);

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

再看下面的代码:

Js代码 

function outerFun(){

//没有var 

a =0;

alert(a); 

}

var a=4;

outerFun();

alert(a);

结果为 0,0 真是奇怪,为什么呢?

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

当程序执行下来，执行到a=0时，由于a没有声明为var的，所以是全局变量，而方法外面的var a = 4也是属于全局变量，所以他们是同一个变量。当前面a=0执行时，同样会修改后面a的值。

一、什么是闭包？

官方的解释是：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

相信很少有人能直接看懂这句话，因为他描述的太学术。其实这句话通俗的来说就是：JavaScript中所有的function都是一个闭包。不过一般来说，嵌套的function所产生的闭包更为强大，也是大部分时候我们所谓的“闭包”。看下面这段代码：

function a() { 

  var i = 0; 

  function b() { 

alert(++i);

} 

  return b;

}

var c = a();

c();

这段代码有两个特点：

1、函数b嵌套在函数a内部；

2、函数a返回函数b。

　　这样在执行完var c=a()后，变量c实际上是指向了函数b，再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b，就是说：

　　当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。

让我们说的更透彻一些。所谓“闭包”，就是在外层函数体内定义内层函数作为目标对象的方法函数，而这个对象的方法函数(内层函数)反过来引用外层函数体中的临时变量。

这使得只要目标对象在生存期内始终能保持其方法，就能间接保持原构造函数体当时用到的临时变量值。尽管最开始的构造函数调用已经结束，临时变量的名称也都消失了，但在目标对象的方法内却始终能引用到该变量的值，而且该值只能通这种方法来访问。即使再次调用相同的构造函数，也只会生成新对象和方法，新的临时变量只是对应新的值，和上次那次调用的是各自独立的。

二、闭包有什么作用？

　　简而言之，闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述，不专业也不严谨，但大概意思就是这样，理解闭包需要循序渐进的过程。

在上面的例子中，由于闭包的存在使得函数a返回后，a中的i始终存在，这样每次执行c()，i都是自加1后alert出i的值。

那么我们来想象另一种情况，如果a返回的不是函数b，情况就完全不同了。因为a执行完后，b没有被返回给a的外界，只是被a所引用，而此时a也只会被b引 用，因此函数a和b互相引用但又不被外界打扰(被外界引用)，函数a和b就会被GC回收。(关于Javascript的垃圾回收机制将在后面详细介绍)

三、闭包内的微观世界

　　如果要更加深入的了解闭包以及函数a和嵌套函数b的关系，我们需要引入另外几个概念：函数的执行环境(excution context)、活动对象(call object)、作用域(scope)、作用域链(scope chain)。以函数a从定义到执行的过程为例阐述这几个概念。

1.当定义函数a的时候，js解释器会将函数a的作用域链(scope chain)设置为定义a时a所在的“环境”，如果a是一个全局函数，则scope chain中只有window对象。

2.当执行函数a的时候，a会进入相应的执行环境(excution context)。

3.在创建执行环境的过程中，首先会为a添加一个scope属性，即a的作用域，其值就为第1步中的scope chain。即a.scope=a的作用域链。

4.然后执行环境会创建一个活动对象(call object)。活动对象也是一个拥有属性的对象，但它不具有原型而且不能通过JavaScript代码直接访问。创建完活动对象后，把活动对象添加到a的作用域链的最顶端。此时a的作用域链包含了两个对象：a的活动对象和window对象。

5.下一步是在活动对象上添加一个arguments属性，它保存着调用函数a时所传递的参数。

6.最后把所有函数a的形参和内部的函数b的引用也添加到a的活动对象上。在这一步中，完成了函数b的的定义，因此如同第3步，函数b的作用域链被设置为b所被定义的环境，即a的作用域。

到此，整个函数a从定义到执行的步骤就完成了。此时a返回函数b的引用给c，又因为函数b的作用域链包含了对函数a的活动对象的引用，也就是说b可以访问到a中定义的所有变量和函数。函数b被c引用，函数b又依赖函数a，因此函数a在返回后不会被GC回收。

当函数b执行的时候亦会像以上步骤一样。因此，执行时b的作用域链包含了3个对象：b的活动对象、a的活动对象和window对象。

 

当在函数b中访问一个变量的时候，搜索顺序是：

1.先搜索自身的活动对象，如果存在则返回，如果不存在将继续搜索函数a的活动对象，依次查找，直到找到为止。

2.如果函数b存在prototype原型对象，则在查找完自身的活动对象后先查找自身的原型对象，再继续查找。这就是Javascript中的变量查找机制。

3.如果整个作用域链上都无法找到，则返回undefined。

小结，本段中提到了两个重要的词语：函数的定义与执行。文中提到函数的作用域是在定义函数时候就已经确定，而不是在执行的时候确定（参看步骤1和3）。用一段代码来说明这个问题：

function f(x) { 

  var g = function () { 

return x; 

}

  return g;

}

var h = f(1);

alert(h()); 

这段代码中变量h指向了f中的那个匿名函数(由g返回)。

•假设函数h的作用域是在执行alert(h())确定的，那么此时h的作用域链是：h的活动对象->alert的活动对象->window对象。

•假设函数h的作用域是在定义时确定的，就是说h指向的那个匿名函数在定义的时候就已经确定了作用域。那么在执行的时候，h的作用域链为：h的活动对象->f的活动对象->window对象。

如果第一种假设成立，那输出值就是undefined；如果第二种假设成立，输出值则为1。

运行结果证明了第2个假设是正确的，说明函数的作用域确实是在定义这个函数的时候就已经确定了。

四、闭包的应用场景

保护函数内的变量安全。以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。

1.在内存中维持一个变量。依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。

2.通过保护变量的安全实现JS私有属性和私有方法（不能被外部访问）

私有属性和方法在Constructor外是无法被访问的

function Constructor(...) { 

var that = this; 

var membername = value; 

function membername(...) {...}

}

以上3点是闭包最基本的应用场景，很多经典案例都源于此。

五、Javascript的垃圾回收机制

在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么函数a执行后不会被回收的原因。

六、结语

理解JavaScript的闭包是迈向高级JS程序员的必经之路，理解了其解释和运行机制才能写出更为安全和优雅的代码。

1 简介 

      所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

      闭包是 ECMAScript （JavaScript）最强大的特性之一，但用好闭包的前提是必须理解闭包。闭包的创建相对容易，人们甚至会在不经意间创建闭包，但这些无意创建的闭包却存在潜在的危害，尤其是在比较常见的浏览器环境下。如果想要扬长避短地使用闭包这一特性，则必须了解它们的工作机制。而闭包工作机制的实现很大程度上有赖于标识符（或者说对象属性）解析过程中作用域的角色。 

      关于闭包，最简单的描述就是 ECMAScript 允许使用内部函数－－即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。也就是说，内部函数会在外部函数返回后被执行。而当这个内部函数执行时，它仍然必需访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明（最初时）的值是外部函数返回时的值，但也会受到内部函数的影响。 

      遗憾的是，要适当地理解闭包就必须理解闭包背后运行的机制，以及许多相关的技术细节。虽然本文的前半部分并没有涉及 ECMA 262 规范指定的某些算法，但仍然有许多无法回避或简化的内容。对于个别熟悉对象属性名解析的人来说，可以跳过相关的内容，但是除非你对闭包也非常熟悉，否则最好是不要跳过下面几节。

2  对象属性名解析

      ECMAScript 认可两类对象：原生（Native）对象和宿主（Host）对象，其中宿主对象包含一个被称为内置对象的原生对象的子类（ECMA 262 3rd Ed Section 4.3）。原生对象属于语言，而宿主对象由环境提供，比如说可能是文档对象、DOM 等类似的对象。 

      原生对象具有松散和动态的命名属性（对于某些实现的内置对象子类别而言，动态性是受限的－－但这不是太大的问题）。对象的命名属性用于保存值，该值可以是指向另一个对象（Objects）的引用（在这个意义上说，函数也是对象），也可以是一些基本的数据类型，比如：String、Number、Boolean、Null 或 Undefined。其中比较特殊的是 Undefined 类型，因为可以给对象的属性指定一个 Undefined 类型的值，而不会删除对象的相应属性。而且，该属性只是保存着 undefined 值。 

      下面简要介绍一下如何设置和读取对象的属性值，并最大程度地体现相应的内部细节。

2.1 值的赋予

      对象的命名属性可以通过为该命名属性赋值来创建，或重新赋值。即，对于： 

var objectRef = new Object(); //创建一个普通的 javascript 对象。

      可以通过下面语句来创建名为 “testNumber” 的属性： 

objectRef.testNumber = 5; 

/* - 或- */ 

objectRef["testNumber"] = 5;  

      在赋值之前，对象中没有“testNumber” 属性，但在赋值后，则创建一个属性。之后的任何赋值语句都不需 要再创建这个属性，而只会重新设置它的值： 

稍后我们会介绍，Javascript 对象都有原型（prototypes）属性，而这些原型本身也是对象，因而也可以带有命名的属性。但是，原型对象命名属性的作用并不体现在赋值阶段。同样，在将值赋给其命名属性时，如果对象没有该属性则会创建该命名属性，否则会重设该属性的值。 

objectRef.testNumber = 8; 

/* - 或- *

/  objectRef["testNumber"] = 8;  

2.2值的读取

      当读取对象的属性值时，原型对象的作用便体现出来。如果对象的原型中包含属性访问器（property accessor）所使用的属性名，那么该属性的值就会返回： 

/* 为命名属性赋值。如果在赋值前对象没有相应的属性，那么赋值后就会得到一个：*/ 

objectRef.testNumber = 8;

/* 从属性中读取值 */

var val = objectRef.testNumber;

 /* 现在， - val - 中保存着刚赋给对象命名属性的值 8*/   

      由于所有对象都有原型，而原型本身也是对象，所以原型也可能有原型，这样就构成了所谓的原型链。 原型链终止于链中原型为 null 的对象。Object 构造函数的默认原型就有一个 null 原型，因此： 

var objectRef = new Object(); //创建一个普通的 JavaScript 对象。

创建了一个原型为 Object.prototype 的对象，而该原型自身则拥有一个值为 null 的原型。也就是说  ，objectRef 的原型链中只包含一个对象－－ Object.prototype。但对于下面的代码而言：

/* 创建 - MyObject1 - 类型对象的函数*/

 function MyObject1(formalParameter){  

     /* 给创建的对象添加一个名为 - testNumber -   的属性并将传递给构造函数的第一个参数指定为该属性的值：*/  

     this.testNumber = formalParameter;  

}

/* 创建 - MyObject2 - 类型对象的函数*/ 

function MyObject2(formalParameter){  

/* 给创建的对象添加一个名为 - testString -   的属性并将传递给构造函数的第一个参数指定为该属性的值：*/  

     this.testString = formalParameter;  

} 

/* 接下来的操作用 MyObject1 类的实例替换了所有与 MyObject2  类的实例相关联的原型。而且，为 MyObject1 构造函数传递了参数  - 8 - ，因而其 - testNumber - 属性被赋予该值：*/

 MyObject2.prototype = new MyObject1( 8 ); 

/* 最后，将一个字符串作为构造函数的第一个参数，  创建一个 - MyObject2 - 的实例，并将指向该对象的  引用赋给变量 - objectRef - ：*/

var objectRef = new MyObject2( "String_Value" );  

      被变量 objectRef 所引用的 MyObject2 的实例拥有一个原型链。该链中的第一个对象是在创建后被指定给 MyObject2 构造函数的 prototype 属性的 MyObject1 的一个实例。MyObject1 的实例也有一个原型，即与 Object.prototype 所引用的对象对应的默认的 Object 对象的原型。最后， Object.prototype 有一个值为 null 的原型，因此这条原型链到此结束。

      当某个属性访问器尝试读取由 objectRef 所引用的对象的属性值时  ，整个原型链都会被搜索。在下面这种简单的情况下：

var val = objectRef.testString;

      因为 objectRef 所引用的 MyObject2 的实例有一个名为“testString”的属性，因此被设置为  “String_Value”的该属性的值被赋给了变量 val。但是： 

var val = objectRef.testNumber;  

      则不能从 MyObject2 实例自身中读取到相应的命名属性值，因为该实例没有这个属性。然而，变量 val 的值 仍然被设置为 8，而不是未定义－－这是因为在该实例中查找相应的命名属性失败后，解释程序会继续检查其 原型对象。而该实例的原型对象是 MyObject1 的实例，这个实例有一个名为“testNumber”的属性并且值为 8，所以这个属性访问器最后会取得值 8。而且，虽然 MyObject1 和 MyObject2 都没有定义 toString 方法  ，但是当属性访问器通过 objectRef 读取 toString 属性的值时： 

var val = objectRef.toString; 

       变量 val 也会被赋予一个函数的引用。这个函数就是在 Object.prototype 的 toString 属性中所保存的函数。 之所以会返回这个函数，是因为发生了搜索objectRef 原型链的过程。当在作为对象的 objectRef 中发现没有  “toString”属性存在时，会搜索其原型对象，而当原型对象中不存在该属性时，则会继续搜索原型的原型。 而原型链中最终的原型是 Object.prototype，这个对象确实有一个 toString 方法，因此该方法的引用被返回 。 

最后： 

var val = objectRef.madeUpProperty; 

       返回 undefined，因为在搜索原型链的过程中，直至 Object.prototype 的原型－－null，都没有找到任何对象 有名为“madeUpPeoperty”的属性，因此最终返回 undefined。 

      不论是在对象或对象的原型中，读取命名 属性值的时候只返回首先找到的属性值。而当为对象的命名属性赋值时，如果对象自身不存在该属性则创建相应的属性。 

      这意味着，如果执行像 objectRef.testNumber = 3 这样一条赋值语句，那么这个 MyObject2 的 实例自身也会创建一个名为“testNumber”的属性，而之后任何读取该命名属性的尝试都将获得相同的新值 。这时候，属性访问器不会再进一步搜索原型链，但 MyObject1 实例值为 8 的“testNumber”属性并没有 被修改。给 objectRef 对象的赋值只是遮挡了其原型链中相应的属性。

      注意：ECMAScript 为 Object 类型定 义了一个内部 [[prototype]] 属性。这个属性不能通过脚本直接访问，但在属性访问器解析过程中，则需要用到 这个内部 [[prototype]] 属性所引用的对象链－－即原型链。可以通过一个公共的 prototype 属性，来对与内 部的 [[prototype]] 属性对应的原型对象进行赋值或定义。这两者之间的关系在 ECMA 262（3rd edition）中 有详细描述，但超出了本文要讨论的范畴。 

3 标识符解析、执行环境和作用域链  

3.1执行环境

      执行环境是 ECMAScript 规范（ECMA 262 第 3 版）用于定义 ECMAScript 实现必要行为的一个抽象的概念 。对如何实现执行环境，规范没有作规定。但由于执行环境中包含引用规范所定义结构的相关属性，因此执行 环境中应该保有（甚至实现）带有属性的对象－－即使属性不是公共属性。 

      所有 JavaScript 代码都是在一个执 行环境中被执行的。全局代码（作为内置的 JS 文件执行的代码，或者 HTML 页面加载的代码）是在我将称之为“全局执行环境”的执行环境中执行的，而对函数的每次调用（有可能是作为构造函数）同样 有关联的执行环境。通过 eval 函数执行的代码也有截然不同的执行环境，但因为 JavaScript 程序员在正常情 况下一般不会使用 eval，所以这里不作讨论。有关执行环境的详细说明请参阅 ECMA 262（第 3 版）第 10.2 节。 

      当调用一个 JavaScript 函数时，该函数就会进入相应的执行环境。如果又调用了另外一个函数（或者递归地调用同一个函数），则又会创建一个新的执行环境，并且在函数调用期间执行过程都处于该环境中。当调用的函数返回后，执行过程会返回原始执行环境。因而，运行中的 JavaScript 代码就构成了一个执行环境栈。

      在创建执行环境的过程中，会按照定义的先后顺序完成一系列操作。首先，在一个函数的执行环境中，会创建一个“活动”对象。活动对象是规范中规定的另外一种机制。之所以称之为对象，是因为它拥有可访问的命名属性，但是它又不像正常对象那样具有原型（至少没有预定义的原型），而且不能通过 JavaScript 代码直接引用活动对象。 

      为函数调用创建执行环境的下一步是创建一个 arguments 对象，这是一个类似数组的对象，它以整数索引的数组成员一一对应地保存着调用函数时所传递的参数。这个对象也有 length 和 callee 属性（这两个属性与我们讨论的内容无关，详见规范）。然后，会为活动对象创建一个名为“arguments”的属性，该属性引用前面创建的 arguments 对象。 

      接着，为执行环境分配作用域。作用域由对象列表（链）组成。每个函数对象都有一个内部的 [[scope]] 属性（该属性我们稍后会详细介绍），这个属性也由对象列表（链）组成。指定给一个函数调用执行环境的作用域，由该函数对象的 [[scope]] 属性所引用的对象列表（链）组成，同时，活动对象被添加到该对象列表的顶部（链的前端）。 

      之后会发生由 ECMA 262 中所谓“可变”对象完成的“变量实例化”的过程。只不过此时使用活动对象作为可变对象（这里很重要，请注意：它们是同一个对象）。此时会将函数的形式参数创建为可变对象命名属性，如果调用函数时传递的参数与形式参数一致，则将相应参数的值赋给这些命名属性（否则，会给命名属性赋 undefined 值）。对于定义的内部函数，会以其声明时所用名称为可变对象创建同名属性，而相应的内部函数则被创建为函数对象并指定给该属性。变量实例化的最后一步是将在函数内部声明的所有局部变量创建为可变对象的命名属性。 

      根据声明的局部变量创建的可变对象的属性在变量实例化过程会被赋予 undefined 值。在执行函数体内的代码、并计算相应的赋值表达式之前不会对局部变量执行真正的实例化。 

      事实上，拥有 arguments 属性的活动对象和拥有与函数局部变量对应的命名属性的可变对象是同一个对象。因此，可以将标识符 arguments 作为函数的局部变量来看待。   

      最后，在this可以被使用之前，还必须先对其赋值。如果赋的值是一个对象的引用，则 this.property 访问的便是该对象上的。如果（内部）赋的值是 null，则this就指向全局对象。 

      创建全局执行环境的过程会稍有不同，因为它没有参数，所以不需要通过定义的活动对象来引用这些参数。但全局执行 环境也需要一个作用域，而它的作用域链实际上只由一个对象－－全局对象－－组成。全局执行环境也会有变 量实例化的过程，它的内部函数就是涉及大部分 JavaScript 代码的、常规的顶级函数声明。而且，在变量实例 化过程中全局对象就是可变对象，这就是为什么全局性声明  的函数是全局对象属性的原因。全局性声明的变量同样如此。 

      全局执行环境也会使用 this 对象来引用全局对象 。

3.2作用域链与 [[scope]]  

      调用函数时创建的执行环境会包含一个作用域链，这个作用域链是通过将该执行环境的活动（可变）对象添加 到保存于所调用函数对象的 [[scope]] 属性中的作用域链前端而构成的。所以，理解函数对象内部的 [[scope]] 属性的定义过程至关重要。 

      在 ECMAScript 中，函数也是对象。函数对象在变量实例化过程中会根据函数声明 来创建，或者是在计算函数表达式或调用 Function 构造函数时创建。 

      通过调用 Function 构造函数创建的函 数对象，其内部的 [[scope]] 属性引用的作用域链中始终只包含全局对象。 

      通过函数声明或函数表达式创建的 函数对象，其内部的 [[scope]] 属性引用的则是创建它们的执行环境的作用域链。 

      在最简单的情况下，比如声 明如下全局函数：

function exampleFunction(formalParameter){  

     // 函数体内的代码

}  

      当为创建全局执行环境而进行变量实例化时，会根据上面的函数声明创建相应的函数对象。因为全局执行环境的作用域链中只包含全局对象，所以它就给自己创建的、并以名为“exampleFunction”的属性引用的这个函数对象的内部 [[scope]] 属性，赋予了只包含全局对象的作用域链。 

      当在全局环境中计算函数表达式时，也会发生类似的指定作用域链的过程：- 

var exampleFuncRef = function(){

  // 函数体代码

}

      在这种情况下，不同的是在全局执行环境的变量实例化过程中，会先为全局对象创建一个命名属性。而在计算赋值语句之前，暂时不会创建函数对象，也不会将该函数对象的引用指定给全局对象的命名属性。但是，最终还是会在全局执行环境中创建这个函数对象（当计算函数表达式时。译者注），而为这个创建的函数对象的 [[scope]] 属性指定的作用域链中仍然只包含全局对象。 

      内部的函数声明或表达式会导致在包含它们的外部函数的执行环境中创建相应的函数对象，因此这些函数对象的作用域链会稍微复杂一些。在下面的代码中，先定义了一个带有内部函数声明的外部函数，然后调用外部函数： 

 

function exampleOuterFunction(formalParameter){

function exampleInnerFuncitonDec(){

  // 内部函数体代码

}

  // 其余的外部函数体代码

}

exampleOuterFunction( 5 );

 

      与外部函数声明对应的函数对象会在全局执行环境的变量实例化过程中被创建。因此，外部函数对象的 [[scope]] 属性中会包含一个只有全局对象的“单项目”作用域链。 

      当在全局执行环境中调用 exampleOuterFunction 函数时，会为该函数调用创建一个新的执行环境和一个活动（可变）对象。这个新执行环境的作用域就由新的活动对象后跟外部函数对象的 [[scope]] 属性所引用的作用域链（只有全局对象）构成。在新执行环境的变量实例化过程中，会创建一个与内部函数声明对应的函数对象，而同时会给这个函数对象的 [[scope]] 属性指定创建该函数对象的执行环境（即新执行环境。译者注）的作用域值－－即一个包含活动对象后跟全局对象的作用域链。 

      到目前为止，所有过程都是自动、或者由源代码的结构所控制的。但我们发现，执行环境的作用域链定义了执行环境所创建的函数对象的 [[scope]] 属性，而函数对象的 [[scope]] 属性则定义了它的执行环境的作用域（包括相应的活动对象）。不过，ECMAScript 也提供了用于修改作用域链 with 语句。 

      with 语句会计算一个表达式，如果该表达式是一个对象，那么就将这个对象添加到当前执行环境的作用域链中（在活动<可变>对象之前）。然后，执行 with 语句（它自身也可能是一个语句块）中的其他语句。之后，又恢复到调用它之前的执行环境的作用域链中。 

      with 语句不会影响在变量实例化过程中根据函数声明创建函数对象。但是，可以在一个 with 语句内部对函数表达式求值：- 

 

/* 创建全局变量 - y - 它引用一个对象：- */

var y = {x:5}; // 带有一个属性 - x - 的对象直接量

function exampleFuncWith(){

var z;

/* 将全局对象 - y - 引用的对象添加到作用域链的前端：- */

with(y){

/* 对函数表达式求值以创建函数对象并将该函数对象的引用指定给局部变量 - z - :- */

z = function(){

  // 内部函数表达式中的代码;

}

}

 

}

/* 执行 - exampleFuncWith - 函数:- */

exampleFuncWith();

      在调用 exampleFuncWith 函数所创建的执行环境中包含一个由其活动对象后跟全局对象构成的作用域链。而在执行 with 语句时，又会把全局变量 y 引用的对象添加到这个作用域链的前端。在对其中的函数表达式求值的过程中，所创建函数对象的 [[scope]] 属性与创建它的执行环境的作用域保持一致－－即，该属性会引用一个由对象 y 后跟调用外部函数时所创建执行环境的活动对象，后跟全局对象的作用域链。 

      当与 with 语句相关的语句块执行结束时，执行环境的作用域得以恢复（y 会被移除），但是已经创建的函数对象（z。译者注）的 [[scope]] 属性所引用的作用域链中位于最前面的仍然是对象 y。 

3.3标识符解析

      标识符是沿作用域链逆向解析的。ECMA 262 将 this 归类为关键字而不是标识符，并非不合理。因为解析 this 值时始终要根据使用它的执行环境来判断，而与作用域链无关。 

      标识符解析从作用域链中的第一个对象开始。检查该对象中是否包含与标识符对应的属性名。因为作用域链是一条对象链，所以这个检查过程也会包含相应对象的原型链（如果有）。如果没有在作用域链的第一个对象中发现相应的值，解析过程会继续搜索下一个对象。这样依次类推直至找到作用域链中包含以标识符为属性名的对象为止，也有可能在作用域链的所有对象中都没有发现该标识符。 

      当基于对象使用属性访问器时，也会发生与上面相同的标识符解析过程。当属性访问器中有相应的属性可以替换某个对象时，这个属性就成为表示该对象的标识符，该对象在作用域链中的位置进而被确定。全局对象始终都位于作用域链的尾端。 

      因为与函数调用相关的执行环境将会把活动（可变）对象添加到作用域链的前端，所以在函数体内使用的标识符会首先检查自己是否与形式参数、内部函数声明的名称或局部变量一致。这些都可以由活动（可变）对象的命名属性来确定。 

4 闭包

4.1 自动垃圾收集

      ECMAScript 要求使用自动垃圾收集机制。但规范中并没有详细说明相关的细节，而是留给了实现来决定。但据了解，相当一部分实现对它们的垃圾收集操作只赋予了很低的优先级。但是，大致的思想都是相同的，即如果对象不再“可引用（由于不存在对它的引用，使执行代码无法再访问到它）”时，该对象就成为垃圾收集的目标。因而，在将来的某个时刻会将这个对象销毁并将它所占用的一切资源释放，以便操作系统重新利用。 

      正常情况下，当退出一个执行环境时就会满足类似的条件。此时，作用域链结构中的活动（可变）对象以及在该执行环境中创建的任何对象－－包括函数对象，都不再“可引用”，因此将成为垃圾收集的目标。 

4.2 构成闭包

      闭包是通过在对一个函数调用的执行环境中返回一个函数对象构成的。比如，在对函数调用的过程中，将一个对内部函数对象的引用指定给另一个对象的属性。或者，直接将这样一个（内部）函数对象的引用指定给一个全局变量、或者一个全局性对象的属性，或者一个作为参数以引用方式传递给外部函数的对象。例如：- 

function exampleClosureForm(arg1, arg2){

var localVar = 8;

function exampleReturned(innerArg){

return ((arg1 + arg2)/(innerArg + localVar));

}

/* 返回一个定义为 exampleReturned 的内部函数的引用 -:- */

return exampleReturned;

}

var globalVar = exampleClosureForm(2, 4);

 

      这种情况下，在调用外部函数 exampleClosureForm 的执行环境中所创建的函数对象就不会被当作垃圾收集，因为该函数对象被一个全局变量所引用，而且仍然是可以访问的，甚至可以通过 globalVar(n) 来执行。 

      的确，情况比正常的时候要复杂一些。因为现在这个被变量 globalVar 引用的内部函数对象的 [[scope]] 属性所引用的作用域链中，包含着属于创建该内部函数对象的执行环境的活动对象（和全局对象）。由于在执行被 globalVar 引用的函数对象时，每次都要把该函数对象的 [[scope]] 属性所引用的整个作用域链添加到创建的（内部函数的）执行环境的作用域中（即此时的作用域中包括：内部执行环境的活动对象、外部执行环境的活动对象、全局对象。译者注）， 所以这个（外部执行环境的）活动对象不会被当作垃圾收集。 

      闭包因此而构成。此时，内部函数对象拥有自由的变量，而位于该函数作用域链中的活动（可变）对象则成为与变量绑定的环境。 

      由于活动（可变）对象受限于内部函数对象（现在被 globalVar 变量引用）的 [[scope]] 属性中作用域链的引用，所以活动对象连同它的变量声明－－即属性的值，都会被保留。而在对内部函数调用的执行环境中进行作用域解析时，将会把与活动（可变）对象的命名属性一致的标识符作为该对象的属性来解析。活动对象的这些属性值即使是在创建它的执行环境退出后，仍然可以被读取和设置。 

      在上面的例子中，当外部函数返回（退出它的执行环境）时，其活动（可变）对象的变量声明中记录了形式参数、内部函数定义以及局部变量的值。arg1 属性的值为 2，而 arg2 属性的值为 4，localVar 的值是 8，还有一个 exampleReturned 属性，它引用由外部函数返回的内部函数对象。（为方便起见，我们将在后面的讨论中，称这个活动<可变>对象为 “ActOuter1″）。 

      如果再次调用 exampleClosureForm 函数，如：- 

var secondGlobalVar = exampleClosureForm(12, 3);

      则会创建一个新的执行环境和一个新的活动对象。而且，会返回一个新的函数对象，该函数对象的 [[scope]] 属性引用的作用域链与前一次不同，因为这一次的作用域链中包含着第二个执行环境的活动对象，而这个活动对象的属性 arg1 值为 12 而属性 arg2 值为 3。（为方便起见，我们将在后面的讨论中，称这个活动<可变>对象为 “ActOuter2″）。 

      通过第二次执行 exampleClosureForm 函数，第二个、也是截然不同的闭包诞生了。 

      通过执行 exampleClosureForm 创建的两个函数对象分别被指定给了全局变量 globalVar 和 secondGlobalVar，并返回了表达式 ((arg1 + arg2)/(innerArg + localVar))。该表达式对其中的四个标识符应用了不同的操作符。如何确定这些标识符的值是体现闭包价值的关键所在。 

      我们来看一看，在执行由 globalVar 引用的函数对象－－如 globalVar(2)－－时的情形。此时，会创建一个新的执行环境和相应的活动对象（我们将称之为“ActInner1”），并把该活动对象添加到执行的函数对象的 [[scope]] 属性所引用的作用域链的前端。ActInner1 会带有一个属性 innerArg，根据传递的形式参数，其值被指定为 2。这个新执行环境的作用域链变成： ActInner1->ActOuter1->全局对象. 

      为了返回表达式 ((arg1 + arg2)/(innerArg + localVar)) 的值，要沿着作用域链进行标识符解析。表达式中标识符的值将通过依次查找作用域链中每个对象（与标识符名称一致）的属性来确定。 

      作用域链中的第一个对象是 ActInner1，它有一个名为 innerArg 的属性，值是 2。所有其他三个标识符在 ActOuter1 中都有对应的属性：arg1 是 2，arg2 是 4 而 localVar 是 8。最后，函数调用返回 ((2 + 2)/(2 + 8))。 

      现在再来看一看由 secondGlobalVar 引用的同一个函数对象的执行情况，比如 secondGlobalVar(5)。我们把这次创建的新执行环境的活动对象称为 “ActInner2”，相应的作用域链就变成了：ActInner2->ActOuter2->全局对象。ActInner2 返回 innerArg 的值 5，而 ActOuter2 分别返回 arg1、arg2 和 localVar 的值 12、3 和 8。函数调用返回的值就是 ((12 + 3)/(5 + 8))。 

      如果再执行一次 secondGlobalVar，则又会有一个新活动对象被添加到作用域链的前端，但 ActOuter2 仍然是链中的第二个对象，而他的命名属性会再次用于完成标识符 arg1、arg2 和 localVar 的解析。 

      这就是 ECMAScript 的内部函数获取、维持和访问创建他们的执行环境的形式参数、声明的内部函数以及局部变量的过程。这个过程说明了构成闭包以后，内部的函数对象在其存续过程中，如何维持对这些值的引用、如何对这些值进行读取的机制。即，创建内部函数对象的执行环境的活动（可变）对象，会保留在该函数对象的 [[scope]] 属性所引用的作用域链中。直到所有对这个内部函数的引用被释放，这个函数对象才会成为垃圾收集的目标（连同它的作用域链中任何不再需要的对象）。 

      内部函数自身也可能有内部函数。在通过函数执行返回内部函数构成闭包以后，相应的闭包自身也可能会返回内部函数从而构成它们自己的闭包。每次作用域链嵌套，都会增加由创建内部函数对象的执行环境引发的新活动对象。ECMAScript 规范要求作用域链是临时性的，但对作用域链的长度却没有加以限制。在具体实现中，可能会存在实际的限制，但还没有发现有具体限制数量的报告。目前来看，嵌套的内部函数所拥有的潜能，仍然超出了使用它们的人的想像能力。 

5 通过闭包可以做什么？

      对这个问题的回答可能会令你惊讶－－闭包什么都可以做。据我所知，闭包使得 ECMAScript 能够模仿任何事物，因此局限性在于设计和实现要模仿事物的能力。只是从字面上看可能会觉得这么说很深奥，下面我们就来看一些更有实际意义的例子。 

5.1 为函数引用设置延时

      闭包的一个常见用法是在执行函数之前为要执行的函数提供参数。例如：将函数作为 setTimout 函数的第一个参数，这在 Web 浏览器的环境下是非常常见的一种应用。 

      setTimeout 用于有计划地执行一个函数（或者一串 JavaScript 代码，不是在本例中），要执行的函数是其第一个参数，其第二个参数是以毫秒表示的执行间隔。也就是说，当在一段代码中使用 setTimeout 时，要将一个函数的引用作为它的第一个参数，而将以毫秒表示的时间值作为第二个参数。但是，传递函数引用的同时无法为计划执行的函数提供参数。 

      然而，可以在代码中调用另外一个函数，由它返回一个对内部函数的引用，再把这个对内部函数对象的引用传递给 setTimeout 函数。执行这个内部函数时要使用的参数在调用返回它的外部函数时传递。这样，setTimeout 在执行这个内部函数时，不用传递参数，但该内部函数仍然能够访问在调用返回它的外部函数时传递的参数： 

 

function callLater(paramA, paramB, paramC){

/* 返回一个由函数表达式创建的匿名内部函数的引用:- */

return (function(){

/* 这个内部函数将通过 - setTimeout - 执行，

而且当它执行时它会读取并按照传递给

外部函数的参数行事：

*/

paramA[paramB] = paramC;

});

}

 

/* 调用这个函数将返回一个在其执行环境中创建的内部函数对象的引用。

传递的参数最终将作为外部函数的参数被内部函数使用。

返回的对内部函数的引用被赋给一个全局变量:-

*/

var functRef = callLater(elStyle, "display", "none");

/* 调用 setTimeout 函数，将赋给变量 - functRef -

的内部函数的引用作为传递的第一个参数:- */

hideMenu=setTimeout(functRef, 500);

 

5.2 通过对象实例方法关联函数

      许多时候我们需要将一个函数对象暂时挂到一个引用上留待后面执行，因为不等到执行的时候是很难知道其具体参数的，而先前将它赋给那个引用的时候更是压根不知道的。

      很多时候需要将一个函数引用进行赋值，以便在将来某个时候执行该函数，在执行这些函数时给函数提供参数将会是有用处的，但这些参数在执行时不容易获得，他们只有在上面赋值给时才能确定。 

      一个相关的例子是，用 JavaScript 对象来封装与特定 DOM 元素的交互。这个 JavaScript 对象具有 doOnClick、doMouseOver 和 doMouseOut 方法，并且当用户在该特定的 DOM 元素中触发了相应的事件时要执行这些方法。不过，可能会创建与不同的 DOM 元素关联的任意数量的 JavaScript 对象，而且每个对象实例并不知道实例化它们的代码将会如何操纵它们（即注册事件处理函数与定义相应的事件处理函数分离。译者注）。这些对象实例并不知道如何在全局环境中引用它们自身，因为它们不知道将会指定哪个全局变量（如果有）引用它们的实例。 

      因而问题可以归结为执行一个与特定的 JavaScript 对象关联的事件处理函数，并且要知道调用该对象的哪个方法。

      下面这个例子使用了一个基于闭包构建的一般化的函数（此句多谢未鹏指点），该函数会将对象实例与 DOM 元素事件关联起来，安排执行事件处理程序时调用对象实例的指定方法，给象的指定方法传递的参数是事件对象和与元素关联的引用，该函数返回执行相应方法后的返回值。 

 

/* 一个关联对象实例和事件处理器的函数。

它返回的内部函数被用作事件处理器。对象实例以 - obj - 参数表示，

而在该对象实例中调用的方法名则以 - methodName - （字符串）参数表示。

*/

function associateObjWithEvent(obj, methodName){

/* 下面这个返回的内部函数将作为一个 DOM 元素的事件处理器*/

return (function(e){

/* 在支持标准 DOM 规范的浏览器中，事件对象会被解析为参数 - e - ，

若没有正常解析，则使用 IE 的事件对象来规范化事件对象。

*/

e = e||window.event;

/* 事件处理器通过保存在字符串 - methodName - 中的方法名调用了对象

- obj - 的一个方法。并传递已经规范化的事件对象和触发事件处理器的元素

的引用 - this - （之所以 this 有效是因为这个内部函数是作为该元素的方法执行的）

*/

return obj[methodName](e, this);

});

}

/* 这个构造函数用于创建将自身与 DOM 元素关联的对象，

DOM 元素的 ID 作为构造函数的字符串参数。

所创建的对象会在相应的元素触发 _disibledevent= function(){

  // 方法体。

};

 

6 Internet Explorer 的内存泄漏问题 

Internet Explorer Web 浏览器（在 IE 4 到 IE 6 中核实）的垃圾收集系统中存在一个问题，即如果 ECMAScript 和某些宿主对象构成了 "循环引用"，那么这些对象将不会被当作垃圾收集。此时所谓的宿主对象指的是任何 DOM 节点（包括 document 对象及其后代元素）和 ActiveX 对象。如果在一个循环引用中包含了一或多个这样的对象，那么这些对象直到浏览器关闭都不会被释放，而它们所占用的内存同样在浏览器关闭之前都不会交回系统重用。 

      当两个或多个对象以首尾相连的方式相互引用时，就构成了循环引用。比如对象 1 的一个属性引用了对象 2 ，对象 2 的一个属性引用了对象 3，而对象 3 的一个属性又引用了对象 1。对于纯粹的 ECMAScript 对象而言，只要没有其他对象引用对象 1、2、3，也就是说它们只是相互之间的引用，那么仍然会被垃圾收集系统识别并处理。但是，在 Internet Explorer 中，如果循环引用中的任何对象是 DOM 节点或者 ActiveX 对象，垃圾收集系统则不会发现它们之间的循环关系与系统中的其他对象是隔离的并释放它们。最终它们将被保留在内存中，直到浏览器关闭。 

      闭包非常容易构成循环引用。如果一个构成闭包的函数对象被指定给，比如一个 DOM 节点的事件处理器，而对该节点的引用又被指定给函数对象作用域中的一个活动（或可变）对象，那么就存在一个循环引用。DOM_Node.onevent ->function_object.[[scope]] ->scope_chain ->Activation_object.nodeRef ->DOM_Node。形成这样一个循环引用是轻而易举的，而且稍微浏览一下包含类似循环引用代码的网站（通常会出现在网站的每个页面中），就会消耗大量（甚至全部）系统内存。 

      多加注意可以避免形成循环引用，而在无法避免时，也可以使用补偿的方法，比如使用 IE 的 onunload 事件来来清空（null）事件处理函数的引用。时刻意识到这个问题并理解闭包的工作机制是在 IE 中避免此类问题的关键。

闭包意味着子函数在其父函数结束后，仍能调用其父函数的变量。

先看以下两个事例，来了解一下闭包的创建：

?

<script type="text/javascript">  

            //ex01  

            var mess = "我是最原始的信息";  

            setTimeout(function(){document.writeln(mess+"<br/>")},1000);  

            mess = "我是修改后的信息";  

            setTimeout(function(){document.writeln(mess+"<br/>")},1000);  

               

            //ex02  

            function delayedShow(message,time){  

                setTimeout(function(){  

                    document.writeln(message+"<br/>");  

                },1000)   

            }  

               

            var message = "我是最原始的信息";  

            delayedShow(message,1000);  

            message = "我是修改后的信息";  

            delayedShow(message,1000);  

        </script>  

ex01输出的结果为：我是修改后的信息  我是修改后的信息

ex02输出的结果为：  我是最原始的信息 我是修改后的信息

我们来分析一下，第一个事例比较简单，第一次调用函数之后1秒钟后进行setTimeout回调，setTimeout回调的function始终指向一个全局变量，mess。在setTimeout的方法还未被执行之前，mess已经被改变，所以两次输出的都是 “我是修改后的信息”。第二个实例就用到了闭包，当我们调用delayedShow的时候，实际上已经得到了setTimeout的回调函数的引用，让其在1秒钟后执行。在一个函数的子函数被外部引用时，就产生了闭包。也就是说，在一个函数的子函数被外部引用时，就产生了一个环境，在这个环境里面，所使用的变量都是独立的。在第一次调用delayedShow(message,1000)时，产生了一个环境，就是闭包结构，在这个环境里面，message的值为“我是最原始的信息”。第二次调用delayedShow(message,1000)时，又产生了一个环境，在这个环境里面message的值为“我是修改后的信息”。举个例子来说，一个函数嵌套一个子函数可以相当于一个面包屋（父函数）里面有一个面包机（子函数）。由于函数可以被重复调用，所以我们姑且假设这个面包屋可以被无限克隆。当外部派一个奶油面包师傅（参数）来经营这个面包屋的时候，这个面包师傅就克隆了一个面包屋，这个面包屋只卖奶油面包，掌管面包机的是奶油面包师傅。当外部派一个肉松面包师傅来经营这个面包屋的时候，这个肉松面包也克隆了一个面包屋，这个面包屋的内部结构跟奶油面包屋是一模一样的，只不过它只卖肉松面包，掌管面包机的是肉松面包师傅。依些内推。这里产生的每一个面包屋都叫一个闭包。

好了，我们再来看一个例子。

在我们平时的编码时，常常会碰到这么一个问题。先看代码，这段代码的本意是要点击一个按钮时分别弹出提示框，告诉用户其点击了哪个按钮

?

<input type="button" value="Button 1" id="btn1">  

<input type="button" value="Button 2" id="btn2">  

<input type="button" value="Button 3" id="btn3">    

    

<script type="text/javascript">  

    function createEventHandlers(){  

        var btn;  

        for(var i=1; i <= 3; i++){  

            btn = document.getElementById('btn' + i);  

            btn.onclick = function(){  

                alert('Clicked button #' + i);  

            }  

        }  

    }  

    createEventHandlers();  

</script>  

这个代码在输出时，会弹出三个 Clicked button#3。代码似乎写得没错，一个简单的for循环。好吧，我们再看一个代码：

?

function createEventHandlers(){  

    var btn;  

    for(var i=1; i <= 3; i++){  

        btn = document.getElementById('btn' + i);  

        btn.onclick = createOneHandler(i);  

    }  

}    

    

function createOneHandler(number){  

    return function() {  

        alert('Clicked button #' + number);  

    }  

}  

咦，这段代码输出时分别会弹出Clicked button #1  Clicked button #2   Clicked button #3,为什么把函数独立出来就对了呢？

我们来改造一下上面两段代码，把for循环解开来写

?

<script type="text/javascript">  

            //ex01  

            var i = 1;  

            click1 = function() {  

                document.writeln("click button"+i);   

            }  

            i = 2;  

            click2 = function(){  

                document.writeln("click button"+i);   

            }  

            i = 3;  

            click3 = function (){  

                document.writeln("click button"+i);   

            }  

               

            //点击第一个按钮  

            click1();  

            //点击第二个按钮  

            click2();  

            //点击第三个按钮  

            click3();  

               

            //ex02  

            click5=function(k){  

                return function(){  

                        document.writeln("click button"+k);  

                }     

            }  

            var j = 1;  

            bclick1=click5(j);  

            j = 2;  

            bclick2=click5(j);  

            j = 3;  

            bclick3=click5(j);  

            bclick1();  

            bclick2();    

            bclick3();  

        </script>   

看到这个，明白了吧，跟第一个例子一样，第一个写法中呢，函数依赖的是一个全局变量。第二个例子呢，我们使用闭包保存了变量。

另外，还有一个js编程中常常会碰到的问题也可以依靠闭包来解决。在编写js代码时，我们常常会将许多变量放在全局区域，这是一个糟糕的实践。原因呢，当然是因为它会干涉到其它代码库的运行，从而产生一些令人迷惑的问题。使用一个自动生效的匿名函数闭包可以从本质上将全局变量隐藏起来，不让其干涉到其它的库。

看例子：

?

// 利用包装器来创建一个匿名函数  

(function(){  

// 在这变量在这个包装器内是一个全局变量  

var msg = "Thanks for visiting!";  

// 将一个方法绑定到全局变量上  

window.onunload = function(){  

// 这里使用“被隐藏”起来的全局变量  

alert( msg );  

};  

// 关闭匿名函数并且执行它  

})();  

这样子，我们就可以把利用到的变量与其它库隔离开来。(function(){})()中最后面的()是代表立即执行这个function。我们可以把代码这样改写，可以理解()的意义。

?

var f = function(){  

var msg = "Thanks for visiting!";  

window.onunload = function(){  

alert( msg );  

};  

};  

f();  

有个网友问了个问题，如下的html，为什么点击所有的段落p输出都是5，而不是alert出对应的0，1，2，3，4。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" />

<title>闭包演示</title>

<style type="text/css">

    p {background:gold;}

</style>

<script type="text/javascript"> 

function init() {    

    var pAry = document.getElementsByTagName("p");    

    for( var i=0; i<pAry.length; i++ ) {    

         pAry[i].onclick = function() {    

         alert(i);    

    } 

  }

}

</script> 

</head> 

<body onload="init();"> 

<p>产品 0</p> 

<p>产品 1</p> 

<p>产品 2</p> 

<p>产品 3</p> 

<p>产品 4</p> 

</body> 

</html> 

以上场景是初学者经常碰到的。即获取HTML元素集合，循环给元素添加事件。在事件响应函数中(event handler)获取对应的索引。但每次获取的都是最后一次循环的索引。

原因是初学者并未理解JavaScript的闭包特性。通过element.onclick=function(){alert(i);}方式给元素添加点击事件。响应函数function(){alert(i);}中的 i 并非每次循环时对应的 i（如0，1，2，3，4）而是循环后最后 i 的值5。 或者说循环时响应函数内并未能保存对应的值 i，而是最后一次i++的值5。

了解了原因，摸索出了很多解决办法（纯粹是兴趣）。最先想到的前两种

1、将变量 i 保存给在每个段落对象（p）上

function init1() {

  var pAry = document.getElementsByTagName("p"); 

  for( var i=0; i<pAry.length; i++ ) {

     pAry[i].i = i;

     pAry[i].onclick = function() {

        alert(this.i); 

     }

  }

}

2、将变量 i 保存在匿名函数自身

function init2() {

  var pAry = document.getElementsByTagName("p"); 

  for( var i=0; i<pAry.length; i++ ) {

   (pAry[i].onclick = function() {

        alert(arguments.callee.i);

    }).i = i;

  }

}

后又想到了三种

3、加一层闭包，i 以函数参数形式传递给内层函数

function init3() {

  var pAry = document.getElementsByTagName("p");

  for( var i=0; i<pAry.length; i++ ) {

   (function(arg){

       pAry[i].onclick = function() {

          alert(arg);

       };

   })(i);//调用时参数 

  }

}

4、加一层闭包，i 以局部变量形式传递给内层函数

function init4() {

  var pAry = document.getElementsByTagName("p");

  for( var i=0; i<pAry.length; i++ ) { 

    (function () {

      var temp = i;//调用时局部变量 

      pAry[i].onclick = function() {

        alert(temp);

      }

    })();

  }

}

5、加一层闭包，返回一个函数作为响应事件（注意与3的细微区别）

function init5() {

  var pAry = document.getElementsByTagName("p");

  for( var i=0; i<pAry.length; i++ ) {

   pAry[i].onclick = function(arg) {

       return function() {//返回一个函数 

       alert(arg);

     }

   }(i);

  }

}

后又发现了两种

6、用Function实现，实际上每产生一个函数实例就会产生一个闭包

function init6() {

    var pAry = document.getElementsByTagName("p");

    for( var i=0; i<pAry.length; i++ ) {

      pAry[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例

    }

}

7、用Function实现，注意与6的区别

function init7() {

    var pAry = document.getElementsByTagName("p");

    for( var i=0; i<pAry.length; i++ ) {

         pAry[i].onclick = Function('alert('+i+')');

    }

}

关于闭包是什么，这个问题困扰了我很久。我好像知道是什么，但好想又说不清楚。今天，我查阅了相关的资料，把自己的一些理解记录在此，以备他日有用。

“闭包”这个词，我不知道是谁翻译的，我个人感觉，这个翻译真的是误导了不少中国程序员。

     本人呢，也曾经幼稚的以为“闭包”就是“Close package”。对比了《Javascript权威指南》中文和英文版本，我才知道我们所说的闭包，人家洋大哥叫做“Function Scope and Closures”（这个见《Javascript Definitive Guide》第八章8.8节）。《JavaScript: The Good Parts》（《Javascript语言精粹》）第四章 4.10 叫做Closures。

     从上面的描述，我想大家已经知道闭包的字面意思，“一个封闭的函数作用域”。此话怎讲？就是说在一个闭包内声明的变量，只有在这个闭包内定义的函数才能访问。 说了这么多，不知道看的人迷糊没，反正我是迷糊了。迷糊了咋办，写个例子理解一下。

我们有一个函数，名字比方说叫做tmd（虽然这个名字不好听，但是我想不出一个更合适的了，凑合用吧）。这个函数是干什么用的呢？你想干什么就干什么。

function tmd(){

    //在这儿你可以随便写你想些的代码，我无所谓。

}

 

现在有个想法，就是我想知道tmd这个函数被调用了多少次？

这活好干啊，声明个全部变量tmdNum，每次调用tmd的时候+1不就搞定了。

var tmdNum = 0;

function tmd(){

    //在这儿你可以随便写你想些的代码，我无所谓。

      tmdNum ++;

      alert(tmdNum);

}

现在很好，代码运行正常，也能完成我们的需求。

 

话说在一个阳光明媚的下午，本人正在喝着咖啡和MM聊天呢，同事告诉我说tmd这个方法呗调用了3000多次。本人听完脑袋都大了，谁这么脑残也不能在一个页面里一个方法调3000多次啊。经过一段痛苦的查找，在我那个亲爱的搭档的代码里面发现了这么一句：

  tmdNum = 3000;

看来全局变量是不能用了，太不安全了。怎么办，用闭包。

var tmd = function(){//这里我们叫做"匿名函数1"

    var tmdNum = 0;

    return function(){//这里我们叫做"匿名函数2”

        //在这儿你可以随便写你想些的代码，我无所谓。

         tmdNum ++;

         alert(tmdNum);

    }

 

}(); //千万要注意这里的这个小括号。

这段代码什么意思呢？

第一步：先把函数里面的内容都删了，看总体的结构

var tmd = function(){}();

这行代码的意思是 先声明一个变量，变量的名字叫做tmd。

function(){} 这是声明了一个匿名函数

function(){}(); 加个括号的意思是让这个匿名函数立即执行。

所以，tmd的值就是这个匿名函数的返回值。如果这个函数什么也不返回，tmd的值就是undefined。

 

第二步：看匿名函数里面的内容

匿名函数里面有做了两件事情

一是定义了一个变量tmdNum，并赋初值为0；

二是执行一个return，return function(){} 表示返回的是一个函数。这个函数的函数体执行的步骤跟我们文章一开始写的那个tmd函数的执行步骤是一样的。

 

结果：我们折腾了这么一大圈，达到的目的是什么呢。首先，匿名函数1 return了一个函数（匿名函数2）赋给了tmd变量。这样调用tmd()，实际调用的就是匿名函数2。因为tmdNum这个变量只能被匿名函数2调用，所以最终的效果就是tmdNum这个变量只能在tmd()调用的时候改变。

 

从此，互不干涉，天下太平。（以上故事纯属扯淡，扯扯更健康！）

 

 

补充点资料

 

这里我摘抄了《Javascript设计模式》里面的一段话，补充下关于闭包的问题：

闭包（closure）是一个受到保护的变量空间，由内嵌函数生成。

Javascript具有函数级别的作用域。这意味着定义在函数内的变量不能在函数外部被访问。

Javascript的作用域又是词法性质的（lexically scoped）。这意味着函数运行在定义它的作用域中，而不是调用它的作用域中。把这两个因素结合起来，就能通过把变量包裹在匿名函数中而对其加以保护。

这里要注意的一点是：

Javascript的作用域是函数范围的，在Java等语言中

public void fun(){

     int i = 3;

     if(i > 0){

           int b  = 0;

     }else{

           int b  = 1;

     }

     //System.out.println(b);

     //Java语言里面，在这里b是不能访问的。因为b的作用域在大括号内。

}

 

 

Javascript中，情况不一样：

function fun(){

     var i = 3;

     if(i > 0){

           var b  = 0;

     }else{

           var b  = 1;

     }

     alert(b);

     //Javascript中，这里访问b是没有问题的，因为Javascript中，作用域是函数范围内的。

}

维基百科上对闭包的定义是： Closure (also lexical closure or function closure) is a function together with a referencing environment for the non-local variablesof that function.用我拙略的语言翻译过来就是：闭包（又称“词法闭包”或“函数闭包”）是一个包含了非本地变量引用环境的函数。

闭包其实就是一个函数；如果一个函数访问了它的外部变量，那么它就是一个闭包。一个典型的例子就是全局变量的使用。所以从技术上来讲，在Javascript中，每个function都是闭包，因为它总是能访问在它外部定义的变量。

________________________________________

示例：

首先来看一个简单的例子：

1 function say667() {

2    // Local variable that ends up within closure

3    var num = 666;

4    var sayAlert = function() { alert(num); }

5    num++;

6    return sayAlert;

7 }

8 var sayAlert = say667();

9 sayAlert()

执行结果应该弹出667而不是666，这个应该很好理解。再来看一个容易迷惑的经典例子：

01 function buildList(list) {

02    var result = [];

03    for (var i = 0; i < list.length; i++) {

04        var item = 'item' + list[i];

05        result.push( function() {alert(item + ' ' + list[i])} );

06    }

07    return result;

08 }

09 function testList() {

10    var fnlist = buildList([1,2,3]);

11    // using j only to help prevent confusion - could use i

12    for (var j = 0; j < fnlist.length; j++) {

13        fnlist[j]();

14    }

15 }

testList的执行结果是弹出item3 undefined窗口三次。因为这三个闭包是在同一个外部函数中定义的，item的值为最后计算的结果，但是当i跳出循环时i值为3，所以list[3]的结果为undefined.

________________________________________

将引用变为拷贝?

理解问题的关键是，Javascript是一门解释性的语言，一个函数内部定义的另一个函数（即闭包）只有在调用的时候才进行解析。buildList函数中定义闭包时，使用了参数"list"以及内部变量"i"的引用，而不是拷贝。因此只有当闭包执行时，也就是在testList函数中调用时，才会开始引用list和i的值并输出；而此时i的值为4，结果可想而知了！

为了达到预期的效果，我们来改造一下buildList函数，而改造的关键是在每次循环中创建变量i的拷贝，也就是将引用变为拷贝！?一种简单的方法就是使用自执行的“匿名函数”来对闭包进行包裹：

01 function buildList(list) {

02    var result = [];

03    for (var i = 0; i < list.length; i++) {

04        (function(r){

05            var item = 'item' + list[r];

06            result.push( function() {alert(item + ' ' + list[r])} );

07        })(i);

08    }

09    return result;

10 }

这样，在函数buildList执行的时候，匿名函数会立即执行，并把i作为参数；此时匿名函数内部的变量r相当于有了i的一个拷贝，而r的值是不会被外部的循环改变的。因此函数testList的执行结果是分别弹出“item1 1”、“item2 2”、“item3 3”。?

________________________________________

你理解了吗？?

要小心的是，在Javascript函数参数传递的时候，只有基本类型的参数会被拷贝，对象类型的参数传递的是引用。因此，如果给匿名函数传递对象类型的参数时（没有人会这么做吧！），要小心出现意外的情况；举个变态的例子：

01 function buildList(list) {

02    var result = [];

03    var obj = {};

04    for (obj.i = 0; obj.i < list.length; obj.i++) {

05        (function(r){

06            var item = 'item' + list[r.i];

07            result.push( function() {alert(item + ' ' + list[r.i])} );

08        })(obj);

09    }

10    return result;

11 }

函数testList的执行结果是什么呢？是分别弹出“item1 undefined”、“item2 undefined”、“item3 undefined”??窗口，跟前面两种写法的结果都不一样。原因是匿名函数立即执行后，其内部变量item被正确赋值，等到testList函数运行时，闭包中引用的r.i其实就是obj对象的i变量，它的值当然是3，结果就可想而知了。

闭包，你理解了吗？?