问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

for因闭包引起的实际问题

头像
hackerws
    1.4k18115134
    $(document).ready(function() {
            var spans = $("#divTest span");
            for (var i = 0; i < spans.length; i++) {
                spans[i].onclick = function() {
                    alert(i);
                }
            }
        });
        
<div id="divTest"><span>0</span><span>1</span>
<span>2</span><span>3</span></div>

我很纠结的是：为什么每个span点击的时候个弹出的i值都为length
    javascript
    阅读 4.5k
    5 个回答
    得票最新
    头像
    熊丸子
      5.6k3927
      ✓ 已被采纳

      点击的时候再去取i，此时i已经变成length

      你看这个例子就懂了

      <html>

<head>
    <title>closure</title>
</head>

<body>
    <button id="myBtn">click</button>
    <button id="myBtn2">i++</button>
</body>

<script>
    var element = document.getElementById("myBtn");
    var element2 = document.getElementById("myBtn2");
    var i = 0;
    element.addEventListener("click", function (e) {
        alert(i);
    });
    element2.addEventListener("click", function (e) {
        i++;
    });
</script>

</html>
      头像
      本期节目
        1.4k14

        这样写就可以了。

        $(document).ready(function() {
    var spans = $("#divTest span");
    for (var i = 0; i < spans.length; i++) {
        ;(function(i){
            spans[i].onclick = function() {
                alert(i);
            }
        })(i);
    }
});

        说一说为什么，因为页面加载完的时候，for循环也瞬间执行完了，点击的时候i早就变成了length，而且大家算是共享这一个i。
        但是为什么上面说的行呢，因为将i放到一个自动执行的闭包中，首先它会自动执行，然后实参传递到形参的时候，非引用类型的实参传递给形参会复制一份，而不是共享一份，所以就会有n个i了，每个i都不一样。

        头像
        yujieyu7
          85418

          for循环下，spans1，2，3的click事件都被赋予了一个匿名函数 function () { alert(i) }，这里的i显然在循环的时候已经不断的++了，但循环时并没有被调用，在点击事件发生，函数执行时才把i赋值的结果显现出来，你把alert(i)加在事件外部时，就可以看到i变化了

          for (var i = 0; i < spans.length; i++) {
    alert(i) //实时调用
    spans[i].onclick = function() {
        alert(i); //事件(发生时)调用
    }
}
          头像
          Karon_
            1.1k81828
            头像
            xuexiphpa
              1.5k696120

              循环在前，你触发的click事件在后，所以当你执行click事件的时候，变量i开始根据作用域链开始找，但是循环已经结束了，它只能取到循环完的i值。

              理解了上面一点，你就应该明白为什么用闭包的前提了。

              然后你再去理解闭包。

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题