[javascript][变量][作用域][内存泄漏]深入理解JavaScript的变量作用域及其内存泄漏

在学习JavaScript的变量作用域之前，我们应当明确几点：

• JavaScript的变量作用域是基于其特有的作用域链的。
• JavaScript没有块级作用域。
• 函数中声明的变量在整个函数中都有定义。

1、JavaScript的作用域链

首先看下下面这段代码：

<script type="text/javascript">
    var rain = 1;
    function rainman(){
        var man = 2;
        function inner(){
            var innerVar = 4;
            alert(rain);
        }
        inner();    //调用inner函数
    }
    rainman();    //调用rainman函数
</script>

观察alert(rain);这句代码。JavaScript首先在inner函数中查找是否定义了变量rain，如果定义了则使用inner函数中的rain变量；如果inner函数中没有定义rain变量，JavaScript则会继续在rainman函数中查找是否定义了rain变量，在这段代码中rainman函数体内没有定义rain变量，则JavaScript引擎会继续向上（全局对象）查找是否定义了rain；在全局对象中我们定义了 rain = 1，因此最终结果会弹出'1'。

作用域链：JavaScript需要查询一个变量x时，首先会查找作用域链的第一个对象，如果以第一个对象没有定义x变量，JavaScript会继续查找有没有定义x变量，如果第二个对象没有定义则会继续查找，以此类推。

上面的代码涉及到了三个作用域链对象，依次是：inner、rainman、window。

2、函数体内部，局部变量的优先级比同名的全局变量高。

<script type="text/javascript">
    var rain = 1;    //定义全局变量 rain
    function check(){
        var rain = 100;    //定义局部变量rain
        alert( rain );       //这里会弹出 100
    }
    check();
    alert( rain );    //这里会弹出1
</script>

3、JavaScript没有块级作用域。

这一点也是JavaScript相比其它语言较灵活的部分。

仔细观察下面的代码，你会发现变量i、j、k作用域是相同的，他们在整个rain函数体内都是全局的。

<script type="text/javascript">
    function rainman(){
        // rainman函数体内存在三个局部变量 i j k
        var i = 0;
        if ( 1 ) {
            var j = 0;
            for(var k = 0; k < 3; k++) {
                alert( k );    //分别弹出 0 1 2
            }
            alert( k );        //弹出3
        }
        alert( j );            //弹出0
    }
</script>

4、函数中声明的变量在整个函数中都有定义。

首先观察这段代码：

<script type="text/javascript">
    function rain(){
        var x = 1;
        function man(){
            x = 100;
        }
        man();        //调用man
        alert( x );    //这里会弹出 100
    }
    rain();    //调用rain
</script>

上面得代码说明了，变量x在整个rain函数体内都可以使用，并可以重新赋值。由于这条规则，会产生“匪夷所思”的结果，观察下面的代码。

<script type="text/javascript">
    var x = 1;
    function rain(){
        alert( x );        //弹出 'undefined'，而不是1
        var x = 'rain-man';
        alert( x );        //弹出 'rain-man'
    }
    rain();
</script>

是由于在函数rain内局部变量x在整个函数体内都有定义（ var x= 'rain-man'，进行了声明），所以在整个rain函数体内隐藏了同名的全局变量x。这里之所以会弹出'undefined'是因为，第一个执行 alert(x)时，局部变量x仍未被初始化。

所以上面的rain函数等同于下面的函数：

function rain(){
    var x;
    alert( x );
    x = 'rain-man';
    alert( x );
}

5、未使用var关键字定义的变量都是全局变量。

<script type="text/javascript">
    function rain(){
        x = 100;    //声明了全局变量x并进行赋值
    }
    rain();
    alert( x );    //会弹出100
</script>

这也是JavaScript新手常见的错误，无意之中留下的许多全局变量。

6、全局变量都是window对象的属性

<script type="text/javascript">
    var x = 100 ;
    alert( window.x );//弹出100
    alert(x);
</script>

等同于下面的代码

<script type="text/javascript">
    window.x = 100;
    alert( window.x );
    alert(x)

</script>

JavaScript内存泄漏

1、什么是闭包、以及闭包所涉及的作用域链这里就不说了。

2、JavaScript垃圾回收机制

     JavaScript不需要手动地释放内存，它使用一种自动垃圾回收机制（garbage collection）。当一个对象无用的时候，即程序中无变量引用这个对象时，就会从内存中释放掉这个变量。

Code
    var s = [ 1, 2 ,3];
    var s = null;
    //这样原始的数组[1 ,2 ,3]就会被释放掉了。

3、循环引用

     三个对象 A 、B 、C

     AàBàC ：A的某一属性引用着B，同样C也被B的属性引用着。如果将A清除，那么B、C也被释放。

     AàBàCàB ：这里增加了C的某一属性引用B对象，如果这是清除A，那么B、C不会被释放，因为B和C之间产生了循环引用。

Code
    var a = {};
    a.pro = { a:100 };
    a.pro.pro = { b:100 };
    a = null ;
    //这种情况下，{a:100}和{b:100}就同时也被释放了。
           
    var obj = {};
    obj.pro = { a : 100 };
    obj.pro.pro = { b : 200 };
    var two = obj.pro.pro;
    obj = null;   
    //这种情况下 {b:200}不会被释放掉，而{a:100}被释放了。

4、循环引用和闭包

Code
    function outer(){
        var obj = {};
        function inner(){
            //这里引用了obj对象
        }
        obj.inner = inner;
    }

这是一种及其隐蔽的循环引用，。当调用一次outer时，就会在其内部创建obj和inner两个对象，obj的inner属性引用了inner；同样inner也引用了obj，这是因为obj仍然在innerFun的封闭环境中，准确的讲这是由于JavaScript特有的“作用域链”。
因此，闭包非常容易创建循环引用，幸运的是JavaScript能够很好的处理这种循环引用。

5、IE中的内存泄漏

    IE中的内存泄漏有好几种，这里有详细的解释（http://msdn.microsoft.com/en-us/library/bb250448.aspx），园子里也有翻译了（http://www.cnblogs.com/birdshome/archive/2006/05/28/ie_memoryleak.html）。

    这里只讨论其中一种，即循环引用所造成的内存泄漏，因为，这是一种最普遍的情况。

    当在DOM元素或一个ActiveX对象与普通JavaScript对象之间存在循环引用时，IE在释放这类变量时存在特殊的困难，最好手动切断循环引用，这个bug在IE 7中已经被修复了（http://www.quirksmode.org/blog/archives/2006/04/ie_7_and_javasc.html）。

   “IE 6 suffered from memory leaks when a circular reference between several objects, among which at least one DOM node, was created. This problem has been solved in IE 7. ”

    如果上面的例子（第4点）中obj引用的不是一个JavaScript Function对象（inner），而是一个ActiveX对象或Dom元素，这样在IE中所形成的循环引用无法得到释放。

Code
    function init(){
        var elem = document.getElementByid( 'id' );
        elem.onclick = function(){
            alert('rain-man');
            //这里引用了elem元素
        };
    }

Elem引用了它的click事件的监听函数，同样该函数通过其作用域链也引用回了elem元素。这样在IE中即使离开当前页面也不会释放这些循环引用。

6、解决方法

   基本的方法就是手动清除这种循环引用，下面一个十分简单的例子，实际应用时可以自己构建一个addEvent()函数，并且在window的unload事件上对所有事件绑定进行清除。

Code
    function outer(){
        var one = document.getElementById( 'one' );
        one.onclick = function(){};
    }
    window.onunload = function(){
        var one = document.getElementById( 'one' );
        one.onclick = null;
    };

其它方法（by:Douglas Crockford）

Code
/**
* 遍历某一元素节点及其所有后代元素
*
* @param Elem node  所要清除的元素节点
* @param function func  进行处理的函数
*
*/
function walkTheDOM(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walkTheDOM(node, func);
        node = node.nextSibling;
    }
}
/**
* 清除dom节点的所有引用，防止内存泄露
*
* @param Elem node  所要清除的元素节点
*
*/
function purgeEventHandlers(node) {
    walkTheDOM(node, function (e) {
        for (var n in e) {           
            if (typeof e[n] ===
                    'function') {
                e[n] = null;
            }
        }
    });