导读：

　　最近在网上查阅了不少Javascript闭包(closure)相关的资料，写的大多是非常的学术和专业。对于初学者来说别说理解闭包了，就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目。

　　一、什么是闭包？

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

　　相信很少有人能直接看懂这句话，因为他描述的太学术。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包，因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。看下面这段代码：

　　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中访问一个变量的时候，搜索顺序是先搜索自身的活动对象，如果存在则返回，如果不存在将继续搜索函数a的活动对象，依次查找，直到找到为止。如果整个作用域链上都无法找到，则返回undefined。如果函数b存在prototype原型对象，则在查找完自身的活动对象后先查找自身的原型对象，再继续查找。这就是Javascript中的变量查找机制。

　　四、闭包的应用场景

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

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

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

　　五、Javascript的垃圾回收机制

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

　　[最后修改由 Felix, 于 2007-12-11 11:06:17]

本文转自

http://www.felixwoo.com/article.asp?id=294

书接上回，继续闭包。

Closures

1、自动的垃圾回收
   ECMAScript有自动的垃圾回收机制。与java类似。但是规范也没有对该机制详细定义，而是让浏览器等规范实现厂家来实现，各种浏览器实现不一样，垃圾回收的算法也不同。好象ie的实现会出现内存溢出问题。对我我们来说注意到这点就够了，后面会提到如何避免ie的这个bug.
   关于上篇提到的execution context，调用对象，参数，scope chain 等等都需要内存，垃圾回收机制会在适当时候释放内存。
2、闭包如何形成
   通俗的说，当一个(outer)函数的返回类型是(inner)函数类型时，这个被返回的inner函数斥又outer函数的scope chain，这时候闭包形成。如下例：

function exampleClosureForm(arg1, arg2){
    var localVar = 8;
    function exampleReturned(innerArg){
        return ((arg1 + arg2)/(innerArg + localVar));
    }
    /* return a reference to the inner function defined as -
       exampleReturned -:-
    */
    return exampleReturned;
}
var globalVar = exampleClosureForm(2, 4);

现在exampleClosureForm(2, 4)返回的inner函数不能被垃圾回收，因为它被变量globalVar持有，并可执行globalVar(n)。
但是内部的原理没有表面上那么简单。现在globalVar是个函数对象，它的[[scope]] property 指向一个scope chain,而这个scope chain 包括   exampleClosureForm函数的调用对象+global对象。所以垃圾回收不能回收这部分内存。
一个闭包形成了。inner函数对象有自己的变量，也可以访问exampleClosureForm函数调用过程中的参数，local变量等。
在上面的例子中，globalVar(n)执行时,在通过调用对象可以访问到exampleClosureForm(2, 4)执行过程中的参数，local变量等。arg1 = 2，arg2 = 4 ，localVar=8，这些属性都通过调用对象"ActOuter1"可以得到。

如果增加以下代码，又返回另外一个inner 函数。
var secondGlobalVar = exampleClosureForm(12, 3);
exampleClosureForm(12, 3)会引起新的调用对象创建，我们定义为ActOuter2。这个过程中，arg1 = 12，arg2 = 3 ，localVar=8。第二个闭包形成了.

   下面考虑返回的inner函数执行过程。如globalVar(2)。新的execution context、调用对象（ActInner）被创建。现在的scope chain是 ActInner1->ActOuter1->global object. 函数返回是 ((2 + 4)/(2 + 8)).
    如果是secondGlobalVar(5)被执行情况是什么呢？现在的scope chain是ActInner2-> ActOuter2-> global object.函数返回是 ((12 + 3)/(5 + 8)).

    通过比较，这两个inner函数互不干扰的执行。如果嵌套更多的函数的话，与上面所诉类似。明白的javascript的闭包，从这个方面可能就能体会到它比java等慢n个数量级的原因。
3、闭包能做什么（例子）
（1）
function callLater(paramA, paramB, paramC){
    return (function(){
        paramA[paramB] = paramC;
    });
}
var functRef = callLater(elStyle, "display", "none");
hideMenu=setTimeout(functRef, 500);
想象我们做颜色渐变，或者动画的时候吧。上面提供的函数多幽雅。
（2）
function associateObjWithEvent(obj, methodName){
    return (function(e){
        e = e||window.event;
        return obj[methodName](e, this);
    });
}
function DhtmlObject(elementId){
    var el = getElementWithId(elementId);
    if(el){
        el.onclick = associateObjWithEvent(this, "doOnClick");
        el.onmouseover = associateObjWithEvent(this, "doMouseOver");
        el.onmouseout = associateObjWithEvent(this, "doMouseOut");
    }
}
DhtmlObject.prototype.doOnClick = function(event, element){
    ... // doOnClick method body.
}
DhtmlObject.prototype.doMouseOver = function(event, element){
    ... // doMouseOver method body.
}
DhtmlObject.prototype.doMouseOut = function(event, element){
    ... // doMouseOut method body.
}
......

又一种注册事件的方法。我觉得作者的这种实现可谓精妙。大大的开阔了我的思路。我们可以为我们的UI事件绑定到对象上，可以很好的重用代码。另外比起prototype.js的时间注册来说简单点。
（３）
var getImgInPositionedDivHtml = (function(){
    var buffAr = [
        '

        '',   //index 11, IMG URL
        '/" width=/"',
        '',   //index 13, IMG width
        '/" height=/"',
        '',   //index 15, IMG height
        '/" alt=/"',
        '',   //index 17, IMG alt text
        '/">'
    ];
    return (function(url, id, width, height, top, left, altText){
        buffAr[1] = id;
        buffAr[3] = top;
        buffAr[5] = left;
        buffAr[13] = (buffAr[7] = width);
        buffAr[15] = (buffAr[9] = height);
        buffAr[11] = url;
        buffAr[17] = altText;
        return buffAr.join('');
    }); //:End of inner function expression.
})();

这种匿名函数的调用在dojo中见过，现在再看，感觉不一样。

以上是原作者的例子，我抄过来的。下次我准备深入研究一下闭包能给我们开发js类库提供什么更好的思路。感觉现在很多人对闭包了解不多，经过这段时间的思考，利用javascript中的闭包，代码偶合性会更低。

关于Javascript的内存泄漏问题的整理稿

常规循环引用内存泄漏和Closure内存泄漏

要了解javascript的内存泄漏问题，首先要了解的就是javascript的GC原理。

我记得原来在犀牛书《JavaScript: The Definitive Guide》中看到过，IE使用的GC算法是计数器，因此只碰到循环引用就会造成memory leakage。后来一直觉得和观察到的现象很不一致，直到看到Eric的文章，才明白犀牛书的说法没有说得很明确，估计该书成文后IE升级过算法吧。在IE 6中，对于javascript object内部，jscript使用的是mark-and-sweep算法，而对于javascript object与外部object(包括native object和vbscript object等等)的引用时，IE 6使用的才是计数器的算法。

Eric Lippert在http://blogs.msdn.com/ericlippert/archive/2003/09/17/53038.aspx一文中提到IE 6中JScript的GC算法使用的是nongeneration mark-and-sweep。对于javascript对算法的实现缺陷，文章如是说：
"The benefits of this approach are numerous, but the principle benefit is that circular references are not leaked unless the circular reference involves an object not owned by JScript. "
也就是说，IE 6对于纯粹的Script Objects间的Circular References是可以正确处理的，可惜它处理不了的是JScript与Native Object(例如Dom、ActiveX Object)之间的Circular References。
所以，当我们出现Native对象(例如Dom、ActiveX Object)与Javascript对象间的循环引用时，内存泄露的问题就出现了。当然，这个bug在IE 7中已经被修复了［http://www.quirksmode.org/blog/archives/2006/04/ie_7_and_javasc.html］。

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp 中有个示意图和简单的例子体现了这个问题：

 
         < 
         html 
         > 
         
     
         < 
         head 
         > 
         
         
         < 
         script language 
         = 
         " 
         JScript 
         " 
         > 
         

         
         var 
          myGlobalObject;

         
         function 
          SetupLeak()  
         // 
         产生循环引用，因此会造成内存泄露 
         
 
                 {
             
         // 
          First set up the script scope to element reference 
         
 
                     myGlobalObject  
         = 
         
                document.getElementById( 
         " 
         LeakedDiv 
         " 
         );

             
         // 
          Next set up the element to script scope reference 
         
 
                     document.getElementById( 
         " 
         LeakedDiv 
         " 
         ).expandoProperty  
         = 
         
                myGlobalObject;
        }


         
         function 
          BreakLeak()  
         // 
         解开循环引用，解决内存泄露问题 
         
 
                 {
            document.getElementById( 
         " 
         LeakedDiv 
         " 
         ).expandoProperty  
         = 
         
                 
         null 
         ;
        }
         
          
         script 
         > 
         
     
          
         head 
         > 
         

     
         < 
         body onload 
         = 
         " 
         SetupLeak() 
         " 
          onunload 
         = 
         " 
         BreakLeak() 
         " 
         > 
         
         
         < 
         div id 
         = 
         " 
         LeakedDiv 
         " 
         > 
         div 
         > 
         
     
          
         body 
         > 
         
 
          
         html 
         > 
        
    上面这个例子，看似很简单就能够解决内存泄露的问题。可惜的是，当我们的代码中的结构复杂了以后，造成循环引用的原因开始变得多样，我们就没法那么容易观察到了，这时候，我们必须对代码进行仔细的检查。 
       

尤其是当碰到Closure，当我们往Native对象(例如Dom对象、ActiveX Object)上绑定事件响应代码时，一个不小心，我们就会制造出Closure Memory Leak。其关键原因，其实和前者是一样的，也是一个跨javascript object和native object的循环引用。只是代码更为隐蔽，这个隐蔽性，是由于javascript的语言特性造成的。但在使用类似内嵌函数的时候，内嵌的函数有拥有一个reference指向外部函数的scope，包括外部函数的参数，因此也就很容易造成一个很隐蔽的循环引用，例如：
DOM_Node.onevent ->function_object.[ [ scope ] ] ->scope_chain ->Activation_object.nodeRef ->DOM_Node。

［http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp］有个例子极深刻地显示了该隐蔽性：

< html >
     < head >
         < script language = " JScript " >

         function AttachEvents(element)
        {
             // This structure causes element to ref ClickEventHandler  //element有个引用指向函数ClickEventHandler()
            element.attachEvent( " onclick " , ClickEventHandler);

             function ClickEventHandler()
            {
                 // This closure refs element  //该函数有个引用指向AttachEvents(element)调用Scope，也就是执行了参数element。

            }
        }

         function SetupLeak()
        {
             // The leak happens all at once
            AttachEvents(document.getElementById( " LeakedDiv " ));
        }

         script >
     head >

     < body onload = " SetupLeak() " onunload = " BreakLeak() " >
         < div id = " LeakedDiv " > div >
     body >
html >

还有这个例子在IE 6中同样原因会引起泄露

function leakmaybe() {
var elm = document.createElement( " DIV " );
  elm.onclick = function () {
return 2 + 2 ;
  }
}

for ( var i = 0 ; i   10000 ; i ++ ) {
  leakmaybe();
}

btw:
关于Closure的知识，大家可以看看http://jibbering.com/faq/faq_notes/closures.html这篇文章，习惯中文也可以看看zkjbeyond的blog，他对Closure这篇文章进行了简要的翻译：http://www.blogjava.net/zkjbeyond/archive/2006/05/19/47025.html。之所以会有这一系列的问题，关键就在于javascript是种函数式脚本解析语言，因此javascript中“函数中的变量的作用域是定义作用域，而不是动态作用域”，这点在犀牛书《JavaScript: The Definitive Guide》中的“Funtion”一章中有所讨论。
http://support.microsoft.com/default.aspx?scid=KB;EN-US;830555中也对这个问题举了很详细的例子。

一些简单的解决方案

目前大多数ajax前端的javascript framework都利用对事件的管理，解决了该问题。

如果你需要自己解决这个问题，可以参考以下的一些方法：

http://outofhanwell.com/ieleak/index.php?title=Main_Page:有个不错的检测工具

http://youngpup.net/2005/0221010713 中提到：可以利用递归Dom树，解除event绑定，从而解除循环引用：
```
														
```
if (window.attachEvent) {
var clearElementProps = [
'data',
'onmouseover',
'onmouseout',
'onmousedown',
'onmouseup',
'ondblclick',
'onclick',
'onselectstart',
'oncontextmenu'
];

window.attachEvent("onunload", function() {
var el;
for(var d = document.all.length;d--;){
el = document.all[d];
for(var c = clearElementProps.length;c--;){
el[clearElementProps[c]] = null;
}
}
});
}

而http://novemberborn.net/javascript/event-cache一文中则通过增加EventCache，从而给出一个相对结构化的解决方案

/*     EventCache Version 1.0
    Copyright 2005 Mark Wubben

    Provides a way for automagically removing events from nodes and thus preventing memory leakage.
    See  for more information.

    This software is licensed under the CC-GNU LGPL
*/

/*     Implement array.push for browsers which don't support it natively.
    Please remove this if it's already in other code */
if (Array.prototype.push == null ){
    Array.prototype.push = function (){
         for ( var i = 0 ; i < arguments.length; i ++ ){
             this [ this .length] = arguments[i];
        };
         return this .length;
    };
};

/*     Event Cache uses an anonymous function to create a hidden scope chain.
    This is to prevent scoping issues. */
var EventCache = function (){
     var listEvents = [];

     return {
        listEvents : listEvents,

        add : function (node, sEventName, fHandler, bCapture){
            listEvents.push(arguments);
        },

        flush : function (){
             var i, item;
             for (i = listEvents.length - 1 ; i >= 0 ; i = i - 1 ){
                item = listEvents[i];

                 if (item[ 0 ].removeEventListener){
                    item[ 0 ].removeEventListener(item[ 1 ], item[ 2 ], item[ 3 ]);
                };

                 /* From this point on we need the event names to be prefixed with 'on" */
                 if (item[ 1 ].substring( 0 , 2 ) != " on " ){
                    item[ 1 ] = " on " + item[ 1 ];
                };

                 if (item[ 0 ].detachEvent){
                    item[ 0 ].detachEvent(item[ 1 ], item[ 2 ]);
                };

                item[ 0 ][item[ 1 ]] = null ;
            };
        }
    };
}();
使用方法也很简单：
```
												
```

http://talideon.com/weblog/2005/03/js-memory-leaks.cfm 一文中的方法类似：

/*
* EventManager.js
* by Keith Gaughan
*
* This allows event handlers to be registered unobtrusively, and cleans
* them up on unload to prevent memory leaks.
*
* Copyright (c) Keith Gaughan, 2005.
*
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Common Public License v1.0
* (CPL) which accompanies this distribution, and is available at
* http://www.opensource.org/licenses/cpl.php
*
* This software is covered by a modified version of the Common Public License
* (CPL), where Keith Gaughan is the Agreement Steward, and the licensing
* agreement is covered by the laws of the Republic of Ireland.
*/

// For implementations that don't include the push() methods for arrays.
if ( ! Array.prototype.push) {
    Array.prototype.push = function (elem) {
         this [ this .length] = elem;
    }
}

var EventManager = {
    _registry: null ,

    Initialise: function () {
         if ( this ._registry == null ) {
             this ._registry = [];

             // Register the cleanup handler on page unload.
            EventManager.Add(window, " unload " , this .CleanUp);
        }
    },

     /* *
     * Registers an event and handler with the manager.
     *
     * @param  obj         Object handler will be attached to.
     * @param  type        Name of event handler responds to.
     * @param  fn          Handler function.
     * @param  useCapture  Use event capture. False by default.
     *                     If you don't understand this, ignore it.
     *
     * @return True if handler registered, else false.
      */
    Add: function (obj, type, fn, useCapture) {
         this .Initialise();

         // If a string was passed in, it's an id.
         if ( typeof obj == " string " ) {
            obj = document.getElementById(obj);
        }
         if (obj == null || fn == null ) {
             return false ;
        }

         // Mozilla/W3C listeners?
         if (obj.addEventListener) {
            obj.addEventListener(type, fn, useCapture);
             this ._registry.push({obj: obj, type: type, fn: fn, useCapture: useCapture});
             return true ;
        }

         // IE-style listeners?
         if (obj.attachEvent && obj.attachEvent( " on " + type, fn)) {
             this ._registry.push({obj: obj, type: type, fn: fn, useCapture: false });
             return true ;
        }

         return false ;
    },

     /* *
     * Cleans up all the registered event handlers.
      */
    CleanUp: function () {
         for ( var i = 0 ; i < EventManager._registry.length; i ++ ) {
             with (EventManager._registry[i]) {
                 // Mozilla/W3C listeners?
                 if (obj.removeEventListener) {
                    obj.removeEventListener(type, fn, useCapture);
                }
                 // IE-style listeners?
                 else if (obj.detachEvent) {
                    obj.detachEvent( " on " + type, fn);
                }
            }
        }

         // Kill off the registry itself to get rid of the last remaining
         // references.
        EventManager._registry = null ;
    }
};

使用起来也很简单
```
												
```
```
  Click me!
```

google map api同样提供了一个类似的函数用在页面的unload事件中，解决Closure带来的内存泄露问题。

当然，如果你不嫌麻烦，你也可以为每个和native object有关的就阿vascript object编写一个destoryMemory函数，用来手动调用，从而手动解除Dom对象的事件绑定。

还有一种就是不要那么OO,抛弃Dom的一些特性，用innerHTML代替appendChild，避开循环引用。详细见http://birdshome.cnblogs.com/archive/2005/02/16/104967.html中的讨论贴。

Cross-Page Leaks

Cross-Page Leaks和下一节提到的Pseudo-Leaks在我看来，就是IE的bug，虽然MS死皮赖脸不承认:)

大家可以看看这段例子代码:

< html >
     < head >
         < script language = " JScript " >

         function LeakMemory() // 这个函数会引发Cross-Page Leaks
        {
             var hostElement = document.getElementById( " hostElement " );

             // Do it a lot, look at Task Manager for memory response

             for (i = 0 ; i < 5000 ; i ++ )
            {
                 var parentDiv =
                    document.createElement( " " );
                 var childDiv =
                    document.createElement( " " );

                 // This will leak a temporary object
                parentDiv.appendChild(childDiv);
                hostElement.appendChild(parentDiv);
                hostElement.removeChild(parentDiv);
                parentDiv.removeChild(childDiv);
                parentDiv = null ;
                childDiv = null ;
            }
            hostElement = null ;
        }

         function CleanMemory() // 而这个函数不会引发Cross-Page Leaks
        {
             var hostElement = document.getElementById( " hostElement " );

             // Do it a lot, look at Task Manager for memory response

             for (i = 0 ; i < 5000 ; i ++ )
            {
                 var parentDiv = document.createElement( " " );
                 var childDiv = document.createElement( " " );

                 // Changing the order is important, this won't leak
                hostElement.appendChild(parentDiv);
                parentDiv.appendChild(childDiv);
                hostElement.removeChild(parentDiv);
                parentDiv.removeChild(childDiv);
                parentDiv = null ;
                childDiv = null ;
            }
            hostElement = null ;
        }
         script >
     head >

     < body >
         < button onclick = " LeakMemory() " > Memory Leaking Insert button >
         < button onclick = " CleanMemory() " > Clean Insert button >
         < div id = " hostElement " > div >
     body >
html >

LeakMemory和CleanMemory这两段函数的唯一区别就在于他们的代码的循序，从代码上看，两段代码的逻辑都没有错。

但LeakMemory却会造成泄露。原因是LeakMemory()会先建立起parentDiv和childDiv之间的连接，这时候，为了让 childDiv能够获知parentDiv的信息，因此IE需要先建立一个临时的scope对象。而后parentDiv建立了和 hostElement对象的联系，parentDiv和childDiv直接使用页面document的scope。可惜的是，IE不会释放刚才那个临时的scope对象的内存空间，直到我们跳转页面，这块空间才能被释放。而CleanMemory函数不同，他先把parentDiv和 hostElement建立联系，而后再把childDiv和parentDiv建立联系，这个过程不需要单独建立临时的scope，只要直接使用页面 document的scope就可以了，所以也就不会造成内存泄露了

详细原因，大家可以看看http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp这篇文章。

btw:
IE 6中垃圾回收算法，就是从那些直接"in scope"的对象开始进行mark清除的：
Every variable which is "in scope" is called a "scavenger". A scavenger may refer to a number, an object, a string, whatever. We maintain a list of scavengers – variables are moved on to the scav list when they come into scope and off the scav list when they go out of scope.

Pseudo-Leaks

这个被称为“秀逗泄露”真是恰当啊：）
看看这个例子:

< html >
     < head >
         < script language = " JScript " >

         function LeakMemory()
        {
             // Do it a lot, look at Task Manager for memory response

             for (i = 0 ; i < 5000 ; i ++ )
            {
                hostElement.text = " function foo() { } " ;／／看内存会不断增加
            }
        }
         script >
     head >

     < body >
         < button onclick = " LeakMemory() " > Memory Leaking Insert button >
         < script id = " hostElement " > function foo() { } script >
     body >
html >

MS是这么解释的，这不是内存泄漏。如果您创建了许多无法获得也无法释放的对象，那才是内存泄漏。在这里，您将创建许多元素，Internet Explorer 需要保存它们以正确呈现页面。Internet Explorer 并不知道您以后不会运行操纵您刚刚创建的所有这些对象的脚本。当页面消失时（当您浏览完，离开浏览器时）会释放内存。它不会泄漏。当销毁页面时，会中断循环引用。

唉~~~

详细原因，大家可以看看http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp这篇文章。

其它一些琐碎的注意点

变量定义一定要用var，否则隐式声明出来的变量都是全局变量，不是局部变量；
全局变量没用时记得要置null；
注意正确使用delete，删除没用的一些函数属性；
注意正确使用try...cache，确保去处无效引用的代码能被正确执行；
open出来的窗口即使close了，它的window对象还是存在的，要记得删除引用；
frame和iframe的情况和窗口的情况类似。

参考资料

http://jibbering.com/faq/faq_notes/closures.html
http://javascript.weblogsinc.com/2005/03/07/javascript-memory-leaks/
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp
http://72.14.203.104/search?q=cache:V9Bt4_HBzQ8J:jgwebber.blogspot.com/2005/01/dhtml-leaks-like-sieve.html+DHTML+Leaks+Like+a+Sieve+&hl=zh-CN&ct=clnk&cd=9 (这是DHTML Leaks Like a Sieve)一文在google上的cache，原文已经连不上了）
http://spaces.msn.com/siteexperts/Blog/cns!1pNcL8JwTfkkjv4gg6LkVCpw!338.entry
http://support.microsoft.com/default.aspx?scid=KB;EN-US;830555
http://www.ajaxtopics.com/leakpatterns.html
http://blogs.msdn.com/ericlippert/archive/2003/09/17/53028.aspx
http://www.quirksmode.org/blog/archives/2005/02/javascript_memo.html
http://youngpup.net/2005/0221010713
http://blogs.msdn.com/ericlippert/archive/2003/09/17/53038.aspx =
http://support.microsoft.com/kb/266071/EN-US ==>IE 5.0至5.5一些版本中的GC bug
http://www.quirksmode.org/blog/archives/2006/04/ie_7_and_javasc.html ==>ie 7的改进
http://erik.eae.net/archives/2006/04/26/23.23.02/ ==>ie 7的改进
http://www.feedbackarchive.com/spamvampire/today.html ==> Try this script for memory leaks - it leaked 50 megabytes in 15 minutes with firefox on linux:
http://birdshome.cnblogs.com/archive/2005/02/15/104599.html
http://www.quirksmode.org/dom/innerhtml.html
http://www.crockford.com/javascript/memory/leak.html
《JavaScript: The Definitive Guide》4th Edition
http://outofhanwell.com/ieleak/index.php?title=Main_Page

发表于 2006-05-29 13:18 鹏飞万里阅读(4382) 评论(10) 编辑收藏

没理解第一段代码怎么就循环引用了?请指点,谢谢!

评论于 2006-05-29 16:02

re: 关于Javascript的内存溢出问题的整理稿

好文！
不过这里的“内存溢出”似乎应该是“内存泄漏”。

评论于 2006-05-30 09:29

re: 关于Javascript的内存泄漏问题的整理稿

@THEMAX

SetupLeak() 函数中
myGlobalObject = document.getElementById( " LeakedDiv " );
则 myGlobalObject有了一个指向DOM对象 " LeakedDiv " 的引用，
而后
document.getElementById( " LeakedDiv " ).expandoProperty = myGlobalObject;
使得DOM对象 " LeakedDiv " 有一个属性expandoProperty引用指向myGlobalObject;

这样myGlobalObject和DOM对象 " LeakedDiv "分别有引用指向对方，所以就循环引用了。

函数BreakLeak() 则清除了DOM对象" LeakedDiv " 向myGlobalObject的引用，
解决循环引用问题。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
如果你问的是第二段代码，那么就比较复杂了。

这涉及到Closure的问题，你可以看看文章中给出的其他链接文章，例如zkjbeyond对Closure一文的翻译。

大致的原因是因为ClickEventHandler()是AttachEvents()的一个内嵌函数，
AttachEvents()函数执行后，把ClickEventHandler()函数绑定在element对象的"onclick"事件上。这样，element对象就有个间接引用指向ClickEventHandler()函数的一个实例。
又正是因为ClickEventHandler()是一个内嵌函数，因此会为这个实例构造一个scope，这个scope中包括了父函数，也就是AttachEvents()函数中的局部变量和参数，而这儿的参数刚好就是element，所以ClickEventHandler()函数的实例同时又间接引用了element。

说得有些绕.......呵呵

# re: 关于Javascript的内存溢出问题的整理稿

深入理解Javascript闭包(closure)

javascript语言中的闭包

闭包（续）

关于Javascript的内存泄漏问题的整理稿

常规循环引用内存泄漏和Closure内存泄漏

一些简单的解决方案

Click me!

Cross-Page Leaks

Pseudo-Leaks

其它一些琐碎的注意点

参考资料

你可能感兴趣的:(JS+CSS+Dhtml)

深入理解Javascript闭包(closure)

javascript语言中的闭包

闭包（续）

关于Javascript的内存泄漏问题的整理稿

常规循环引用内存泄漏和Closure内存泄漏

一些 简单的解决方案

Click me!

Cross-Page Leaks

Pseudo-Leaks

其它一些琐碎的注意点

参考资料

你可能感兴趣的:(JS+CSS+Dhtml)

一些简单的解决方案