XIN'BOLG

导航

4月13日--闭包的发生与解决

　　1、闭包发生：在一个函数内部定义函数时，内部函数使用了外部函数的局部变量

　　　　闭包的解决方法1：IIFE(立即执行函数表达式immediately invoke function expression)

　　　　　　(function(n){

　　　　　　　　*****

　　　　　　})(i)

　　　　 onload=function(){
　　　　 　　var btns=document.getElementsByTagName("button");
　　　　 　　for(var i=0;i<btns.length;i++){
　　　　　　 　　(function(n){
　　　　 　　　　　　btns[n].onclick=function(){
　　　　 　　　　　　　　console.log("btn click:"+n);
　　　　 　　　　　　};　　　　
　　　　 　　　　})(i);
　　　　 　　}
　　　　 };

　　　　闭包的解决2：在外部绑定　　

　　　　onload = function () {
　　　　var btns = document.getElementsByTagName("button");
　　　　for(var i = 0; i < btns.length; i++){
　　　　bindClick(btns[i],i);
　　　　}
　　　　};

　　　　function bindClick (btn,index) {
　　　　btn.onclick = function () {
　　　　console.log("second btn click:"+index);
　　　　}
　　　　}

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包closure</title>
    <script type="text/javascript">
        // 闭包发生：在一个函数内部定义函数时，内部函数使用了外部函数的局部变量
        //闭包的解决1：IIFE(立即执行函数表达式immediately invoke function expression)
        // onload=function(){
        //     var btns=document.getElementsByTagName("button");
        //     for(var i=0;i<btns.length;i++){
        //         (function(n){
        //             btns[n].onclick=function(){
        //                 console.log("btn click:"+n);
        //             };
        //         })(i);                
        //     }
        // };
        //闭包的解决2：在外部绑定
        onload = function () {
            var btns = document.getElementsByTagName("button");
            for(var i = 0; i < btns.length; i++){
                bindClick(btns[i],i);                
            }
        };

        function bindClick (btn,index) {
            btn.onclick = function () {
                console.log("second btn click:"+index);
            }
        }
    </script>
</head>
<body>
    <button>btn1</button>
    <button>btn2</button>
    <button>btn3</button>
</body>
</html>

 

posted on 2017-04-13 14:17  XIN'BOLG  阅读(122)  评论(0)    收藏  举报