for循环取i的有关问题

for循环取i的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

li{margin-bottom:5px;padding:10px;width:200px;color:#fff;background:gray;}

</style>

<script type="text/javascript">

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);

	}

}

</script>

</head>

<body>

<ul>

	<li>1111111</li>

    <li>2222222</li>

    <li>3333333</li>

    <li>4444444</li>

    <li>5555555</li>

</ul>

</body>

</html>

一直想弄明白这段代码到底是如何执行的，就是点击li时弹出自身的索引值，我看了很多网络上的资料，是不是与闭包或者变量的作用域相关，但是那些讲得实在是太专业了，看不懂啊。。。。如果只是下面这样：

for(var i=0;i<aLi.length;i++){

		aLi[i].onclick=function(){

			alert(i);

		}

	}

弹出的始终是5啊，到底是为什么呢？这个问题纠结了我好久，我很想弄清楚这个问题，js老手们能不能给小弟讲讲？？？ for循环取i的有关问题

------解决思路----------------------
js里语句块不能创建新的作用域, 只有函数代码块才能
如不用闭包(也就是用函数包装出一个作用域保存住i当年值), 循环结束后 i 依然存在, 本例 i==5(全局变量)
之后onclick触发时, 取到的是全局的 i 为5.

如果用闭包

window.onload=function(){

    var aLi=document.getElementsByTagName('li');

    for(var i=0;i<aLi.length;i++){

        aLi[i].onclick=(function(i){

            var i = i;  // 小改动, 助理解, 和原代码实质上略有不同

            return function(){

                alert(i);

            }

        })(i);

    }

}

这里用闭包可以把每一次循环的 i 值保存起来, 外层函数即使返回, 返回的函数依然能访问 i (这正是闭包的实质部分)

------解决思路----------------------
闭包什么的，说得高深，只要你不理会它就没什么高深的了
这儿你不管什么闭包，仅仅抓住“事件发生时i的值”，你就什么都清楚了，点击事件发生时，for循环必然是执行完了的，而for语句没有独立作用域，把写法等价转换一下就好理解了：
window.onload=function(){
    var aLi=document.getElementsByTagName('li');
    var i;
    for(i=0;i<aLi.length;i++){
        aLi[i].onclick=function(){
            alert(i);
        }
    }
}
这不就清楚了？
要保留住循环时的i值，也不用理会闭包。按照代码逻辑理解就可以了，就照1楼的写法：

window.onload=function(){
    var aLi=document.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick=(function(i){
            var i = i;  //这儿是另一个函数，另一个作用域，这个i与for循环里面的i是不同的变量了，所以其不会受for循环里面i的变化的影响，在返回的函数执行时，它仍然是被赋值时的那个值，而其赋值的时间是循环执行时，故是当时的值
            return function(){
                alert(i);
            }
        })(i);
    }
}
理解了就无所谓闭包了，换种写法一样ok，如下：
window.onload=function(){
    var aLi=document.getElementsByTagName('li');
    var i;
    for(i=0;i<aLi.length;i++){
        aLi[i].index=i;
        aLi[i].onclick=function(){
            alert(this.index);
        }
    }
}

------解决思路----------------------
ML/HTML code?
1
2
3
4
5

for(var i=0;i<aLi.length;i++){
        aLi[i].onclick=function(){
            alert(i);
        }
    }

弹出的始终是5啊，到底是为什么呢？这个问题纠结了我好久，我很想弄清楚这个问题，js老手们能不能给小弟讲讲？？？

楼主这个你忽略了一个问题，因为你 onclick=function(i) 这里少了一个i
也就是说你不是把每次i值丢给这个涵数，而你弹出来每次都是5的原因就是因为用到了闭包 i在你当前的for循环里面都是用的全局的所有当初始化完之后 i值就=5了，当你点击每个li触发事件的时候所以执行的时候alert 就是5
这个细节一定要注意点
------解决思路----------------------
那比如说当我点击第一个li时，是不是这时执行的就是aLi[0].onclick？？那这时后面的匿名函数传入的i是多少呢？也是0吗？这0从哪来？？？i不是已经是5了吗？如果说var i=i;那这时候的i难道不会被后一次执行时的覆盖吗？我主要是不理解当我每点击某一个li时，瞬间弹出来的这个i值到底从哪来。。。
啊，，，，看来我的理解能力真是大有问题了，现在头好痛，，，，

之前说了初始化完后i的值=5了  你这样理解当你点击某个li的时候其实并没有改变i的值，所以不管你点击哪个li function(alert()结果一定是同一个也就是i的最后一个值)
如果你在涵数内改变i的值那么结果就不一样了
你可以把代码分开理解类似于这样
        $(function () {

            j = 1;
            for (var i = 0; i < 5; i++) {
                j = i;  //这里作为初始化操作完毕
            }
            //下面给所有的li 绑定事件
            $("li:eq(0)").click(function () {
                alert(j);
            });
            $("li:eq(1)").click(function () {
                alert(j);
            });

            $("li:eq(2)").click(function () {
                alert(j);
            });
            $("li:eq(3)").click(function () {
                alert(j);
            });
            $("li:eq(4)").click(function () {
                alert(j);
            });

            //这里不管你点击哪个li里面 alert的值永远=4
        })

相关推荐