随笔- 2329 文章- 0 评论- 61 阅读- 194万

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中即使离开当前页面也不会释放这些循环引用。

posted @ 2016-10-21 01:12 blcblc 阅读(167) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

笨鸟居士的博客

Javascript学习-闭包

公告

搜索

积分与排名

随笔分类 (4366)

随笔档案 (2323)

阅读排行榜

评论排行榜

推荐排行榜

最新评论