您的位置：首页 > 其它

闭包

2015-07-21 19:01 274 查看

定义：函数嵌套函数，内部函数可以访问外部函数的变量和参数，外部函数的参数和变量不会被垃圾回收机制所收回。

好处：

一个变量可以长期驻扎在内存中

    //函数aa执行完后，变量a不会被立即回收，bb还会调用a

    function aa(){

             var a=1;

             return functionbb(){

                       alert(a);

             }

    }

    var cc=aa();

    cc();//2

不会污染全局变量

//可以实现变量a的累加，但是会污染全局变量

    var a=1

    function aa(){

             a++;

             alert(a);

    }

    aa();//2

    aa();//3

    //不能实现a的累加，在函数内部，虽然不会污染全局变量，但是变量a在函数执行完后会被回收，下次执行的时候会重新赋值。

    function aa(){

             var a=1;

             a++;

             alert(a);

    }

    aa();//2

    aa()//2

    //使用闭包可以实现a的累加，而且不会污染全局变量，外层函数执行完后a不会被回收

    function aa(){

             var a=1;

             return functionbb(){

                       alert(a);

             }

    }

    var cc=aa();

    cc();//2

    cc();//3

私有成员的存在

    //私有成员的存在

    var dd=(function aa(){

             var a=1;

             function bb(){

                       a++;

                       alert(a);

             }

             function cc(){

                       a++;

                       alert(a);

             }

             return {b:bb,c:cc}

    })();

    dd.b();//2

             dd.c();//3

用法：

模块化开发

在循环中找到对应元素的索引

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>闭包演示</title>
<style type="text/css">
p {background:gold;}
</style>
<script type="text/javascript">
/*function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function() {
alert(i);
}
}
}
//加一层闭包，返回一个函数作为事件响应
function init(){
var pAry=document.getElementsByTagName("p");
for(var i=0;i<pAry.length;i++){
pAry[i].onclick=(function(num){
return function(){
alert(num);
}
})(i);
}
}
//加一层闭包，i以函数参数形式传给内层函数
function init(){
var pAry=document.getElementsByTagName("p");
for(var i=0;i<pAry.length;i++){
(function(num){
pAry[i].onclick=function(){
alert(num);
}
})(i);
}
}
//加一层闭包，i以局部变量形式传给内层函数
function init(){
var pAry=document.getElementsByTagName("p");
for(var i=0;i<pAry.length;i++){
(function(){
var num=i;
pAry[i].onclick=function(){
alert(num);
}
})();
}
}
//将变量i保存在每个p对象的属性中
function init(){
var pAry=document.getElementsByTagName("p");
for(var i=0;i<pAry.length;i++){
pAry[i].i=i;
pAry[i].onclick=function(){
alert(this.i);
}
}
}
//将变量i保存在匿名函数自身的属性中
function init(){
var pAry=document.getElementsByTagName("p");
for(var i=0;i<pAry.length;i++){
(pAry[i].onclick=function(){
alert(arguments.callee.i);
}).i=i;
}
}
//利用Function构造函数
function init(){
var pAry=document.getElementsByTagName("p");
for(var i=0;i<pAry.length;i++){
pAry[i].onclick=new Function("alert("+i+");");//new一次产生一个函数实例
}
}
function init(){
var pAry=document.getElementsByTagName("p");
for(var i=0;i<pAry.length;i++){
pAry[i].onclick=Function("alert("+i+");");
}
}*/
</script>
</head>
<body onload="init();">
<p>产品 0</p>
<p>产品 1</p>
<p>产品 2</p>
<p>产品 3</p>
<p>产品 4</p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航