[转]javascript闭包传参和事件的循环绑定示例探讨

原文: http://www.jb51.net/article/49127.htm

 

今天看到一个javascript的题目，按常理循环绑定事件，但是得到的结果却不是想要的。 

<a href="#">
    text
</a>
<br>
<a href="#">
    link
</a>
<script>
    var as = document.getElementsByTagName('a');
    for (var i = as.length; i--;) {
        as[i].onclick = function() {
            alert(i);
            return false;
        }
    }
</script>

1.这个代码点击链接弹出的i都是-1,这是为啥呢？ 

简单来说就是函数变量作用域问题，如果把function() { alert(i); return false; } 当做一个函数 a();a()内部未定义变量i,但是内部使用了，于是向外查找,找到for循环里定义的i，点击事件是for循环完毕后才开始执行的，执行完毕后i的值已经变成-1；所以每次弹出的都是-1； 

2. 2个参数的for循环也不常见！疑惑？ 

　　for（语句1，语句2，语句3）{ 

　　　　//todo 

　　} 

a.for循环条件 

通常说语句1、语句2、语句3都是可选的。 

b.语句 2： 

　　通常语句 2 用于评估初始变量的条件。 

　　语句 2 同样是可选的。 

　　如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。 

　　提示：如果您省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。 

c.关于 i--判断： 

　　判断i--true /false的时候是先判断i再运算i--的。进入最后一次判断 i--的时候其实判断 i==0的时候，判断后又执行了一次i--,for循环终止， 于是i的值变成了-1; 

　　var i = 1; 

　　!!i--;//ture 

解决方法： 

var as = document.getElementsByTagName('a');
for (var i = as.length; i--;) { 
    (function(i) {
        as[i].onclick = function() {
            alert(i);
            return false;
        }
    })(i)
}

或:

var as = document.getElementsByTagName('a');
for (var i = as.length; i--;) {
    var a = function(i) {
        as[i].onclick = function() {
            alert(i);
            return false;
        }
    }
    a(i);
}

其他网友7中解决方法demo： 

<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            闭包演示
        </title>
        <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);
                    }
                }
            }
        </script>
    </head>
    
    <body onload="init();">
        <p>
            产品一
        </p>
        <p>
            产品二
        </p>
        <p>
            产品三
        </p>
        <p>
            产品四
        </p>
        <p>
            产品五
        </p>
    </body>

</html>

1、将变量 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);
        }
    }
}

2、将变量 i 保存在匿名函数自身 

function init2() {
    var pAry = document.getElementsByTagName("p");
    for (var i = 0; i < pAry.length; i++) { 
　　　　 (pAry[i].onclick = function() {
            alert(arguments.callee.i);
        }).i = i;
    }
}

3、加一层闭包，i以函数参数形式传递给内层函数 

function init3() {
    var pAry = document.getElementsByTagName("p");
    for (var i = 0; i < pAry.length; i++) { 
        (function(arg) {
            pAry[i].onclick = function() {
                alert(arg);
            };
        })(i); //调用时参数 
    }
}

4、加一层闭包，i以局部变量形式传递给内存函数 

function init4() {
    var pAry = document.getElementsByTagName("p");
    for (var i = 0; i < pAry.length; i++) { 
        (function() {
            var temp = i; //调用时局部变量 
            pAry[i].onclick = function() {
                alert(temp);
            }
        })();
    }
}

5、加一层闭包，返回一个函数作为响应事件（注意与3的细微区别） 

function init5() {
    var pAry = document.getElementsByTagName("p");
    for (var i = 0; i < pAry.length; i++) {
        pAry[i].onclick = function(arg) {
            return function() { //返回一个函数 
                alert(arg);
            }
        } (i);
    }
}

6、用Function实现，实际上每产生一个函数实例就会产生一个闭包

function init6() {
    var pAry = document.getElementsByTagName("p");
    for (var i = 0; i < pAry.length; i++) {
        pAry[i].onclick = new Function("alert(" + i + ");"); //new一次就产生一个函数实例 
    }
}

7、用Function实现，注意与6的区别 

function init7() {
    var pAry = document.getElementsByTagName("p");
    for (var i = 0; i < pAry.length; i++) {
        pAry[i].onclick = Function('alert(' + i + ')')
    }
}

 

posted @ 2015-05-21 12:00  白菜89  阅读(189)  评论(0)    收藏  举报