Javascript学习-闭包

时间：2023-03-09 04:33:21
Javascript学习-闭包

看的这篇 http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

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

这篇：http://www.cnblogs.com/rainman/archive/2009/05/04/1448899.html

4、注意

4.1 闭包允许内层函数引用父函数中的变量，但是该变量是最终值

示例六：

/**

 * <body>

 * <ul>

 *     <li>one</li>

 *     <li>two</li>

 *     <li>three</li>

 *     <li>one</li>

 * </ul>

 */

var lists = document.getElementsByTagName('li');

for(var i = 0 , len = lists.length ; i < len ; i++){

    lists[ i ].onmouseover = function(){

        alert(i);

    };

}

你会发现当鼠标移过每一个<li&rt;元素时，总是弹出4，而不是我们期待的元素下标。这是为什么呢？注意事项里已经讲了（最终值）。显然这种解释过于简单，当mouseover事件调用监听函数时，首先在匿名函数（ function(){ alert(i); }）内部查找是否定义了 i，结果是没有定义；因此它会向上查找，查找结果是已经定义了，并且i的值是4（循环后的i值）；所以，最终每次弹出的都是4。

解决方法一：

var lists = document.getElementsByTagName('li');

for(var i = 0 , len = lists.length ; i < len ; i++){

    (function(index){

        lists[ index ].onmouseover = function(){

            alert(index);

        };

    })(i);

}

解决方法二：

var lists = document.getElementsByTagName('li');

for(var i = 0, len = lists.length; i < len; i++){

    lists[ i ].$$index = i;    //通过在Dom元素上绑定$$index属性记录下标

    lists[ i ].onmouseover = function(){

        alert(this.$$index);

    };

}

解决方法三：

function eventListener(list, index){

    list.onmouseover = function(){

        alert(index);

    };

}

var lists = document.getElementsByTagName('li');

for(var i = 0 , len = lists.length ; i < len ; i++){

    eventListener(lists[ i ] , i);

}

闭包还会引起内存泄露：http://www.cnblogs.com/rainman/archive/2009/03/07/1405624.html

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

function init(){

    var elem = document.getElementByid( 'id' );

    elem.onclick = function(){

        alert('rain-man');

        //这里引用了elem元素

    };

}

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

相关文章