码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript学习笔记——闭包

时间:2016-01-05 22:11:52      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:

闭包:函数嵌套函数,内部函数可以引用外部函数的参数和变量;参数和变量不会被垃圾回收机制所收回

好处:1.变量可以长期驻扎在内存当中;2.避免全局变量的污染;3.私有成员的存在

示例1:

function aaa(){
    var a=1;
    return function(){
        a++;
        alert(a);
    }
}
var b=aaa();
b();//2
b();//3
alert(a);//报错,因为a是局部变量

 示例2:改写示例一,实现代码模块化

var aaa=(function(){
    var a=1;
    return function(){
        a++;
        alert(a);
    }
})();
aaa();//2
aaa();//3
alert(a);//报错,因为a是局部变量

  示例3:另一代码模块化例子

var aaa=(function(){
    var a=1;
    function bbb(){
        a++;
        alert(a);
    }
    function ccc(){
        a++;
        alert(a);
    }
    return{
        b:bbb,
        c:ccc
    }
})();
aaa.b();//2
aaa.c();//3
alert(a);//报错
alert(bbb);//报错
alert(ccc);//报错

用法:1.模块化代码;2.在循环中直接找到对应元素的索引

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>闭包</title>
    <script type="text/javascript" src="bibao.js"></script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div id="div1"></div>
</body>
</html>

 bibao.js代码如下

示例4:

window.onload=function(){
    var aLi=document.getElementsByTagName("li");
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick=function(){
            alert(i);//alert的i都是i的length,因为onclick未执行时,for循环已结束
        }
    }
}

 示例5:改写示例4,使得实现用法2:方法一

window.onload=function(){
    var aLi=document.getElementsByTagName("li");
    for(var i=0;i<aLi.length;i++){
        (function(i){
            aLi[i].onclick=function(){
            alert(i);
            }
        })(i);
        
    }
}

 示例6:改写示例4,使得实现用法2:方法二

window.onload=function(){
    var aLi=document.getElementsByTagName("li");
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick=(function(i){
            return function(){alert(i);}
        })(i);
    }
}

注意:使用闭包,IE下会发生内存泄漏

示例7:

window.onload=function(){
    var oDiv=document.getElementById(‘div1‘);
    oDiv.onclick=function(){
        alert(oDiv.id);//相互引用,IE下引发内存泄露
    };
        //方法一
    window.onunload=function(){
        oDiv.onclick=null;
    };
}

 示例8:

window.onload=function(){
    var oDiv=document.getElementById(‘div1‘);
        //方法二
    var id=oDiv.id;
    oDiv.onclick=function(){
        alert(id);
    };
    oDiv=null;
}

 

Javascript学习笔记——闭包

标签:

原文地址:http://www.cnblogs.com/crystalmoore/p/5103761.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!