您的位置: 首页  >  IT文章  >  Javascript学习笔记——闭包

Javascript学习笔记——闭包

分类: IT文章 • 2023-11-26 20:49:43

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

好处：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;
}

相关推荐