问答博客资讯标签用户活动
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

关于闭包引申出的问题

头像
nianyuyu
    19063039

    第一次代码

    <body>
    <div class="div_area" id="1">1</div>
    <div class="div_area" id="2">2</div>
    <div class="div_area" id="3">3</div>
    <div class="div_area" id="4">4</div>
    <div class="div_area" id="5">5</div>

    <script>    
        var div=document.getElementsByClassName("div_area");
        for(var i=0;i<div.length;i++){
            div[i].onclick=function(){
                alert(div[i].id);
            }        
        }
       
    </script>
</body>

    这段代码无法实现点击div输出div的id,因为i的值时5，但是我不明白的是为什么i的值是5，这是因为js没有块级作用域导致的还是闭包（看起来不是闭包啊，闭包最常见创建方式的不是函数内嵌函数吗，这里只有一个函数啊）

    于是我把代码修改了以后为什么就又可以了？
    第二次代码：

     alert(this.id);

    接着我又把js代码改成了这样，创造了一个闭包，结果i的值也是5，所以DOM找不到，我想问造成i=5的原因和第一次的时候是否时一样的？

    第三次代码：

    
<script>
    
        var div=document.getElementsByClassName("div_area");
        function add(){
            for(var i=0;i<div.length;i++){
                div[i].onclick=function(){
                    alert(div[i].id);
                }
        
            }
        }
    add();
       
    </script>
    javascript闭包
    阅读 3.2k
    6 个回答
    得票最新
    头像
    hiYoHoo
      2.2k31118
      ✓ 已被采纳

      本质上是一样的。

      在执行alert(div[i].id);的时候，for循环已经完成，i的值已经变成5了。而this绑定的始终是被点击的对象。

      头像
      边城
        59.8k157274

        SegmentFault 上已经出现若干关于类似的装闭包问题了。
        闭包一定要注意变量的作用域，因为你的闭包中一直都是用的同一个变量 i，而 i 是变化的，所以最好到使用的时候都是 i 的终值。

        for (var i = 0; i < div.length; i++) {
    div[i].onclick = (function(n) {
        return function() {
            alert(div[n].id);
        }
    })(i);
}

        其实可以不用闭包，因为在 onclick 函数里直接用 this 就是绑定事件的那个 div 啊。

        for (var i = 0; i < div.length; i++) {
    div[i].onclick = function() {
        alert(this.id);
    }
}
        头像
        yusoo
          44621420

          因为你onclick执行的时候，循环肯定早就执行完了，这时i为5。你可以试试改成立即执行的函数，是不是感觉正常了？

          for(var i=0;i<3;i++){
    (function(){
        alert(i);
    })()
}
          头像
          佯真愚
            1k4

            少年郎...建议你先去看《JavaScript 高级程序设计》第七章...你就懂啥是闭包了...

            没有书也没关系...可以看别人归纳的读书笔记...比如我的～=￣ω￣=～

            然后做一做常见的面试题...比如这篇

            关于 this 指针的指向问题推荐看看《JavaScript秘密花园》

            头像
            manxisuo
              10.8k62136

              这个就是闭包。

              闭包不一定必须是两个函数嵌套，而是两个词法环境嵌套。只不过函数是最常见的可以形成词法环境的词法结构。

              除了函数外，全局上下文、with语句、catch子句都可以形成词法结构，从而构成闭包。

              头像
              余胖子
                6417

                这个我来说说吧。
                ①因为你在for循环中。i 始终都是一个变量。在开始注册事件的时候，每个div对象的onclick属性都是一个函数，并且这个函数是

                function(){
    alert(div[i].id)
}

                ，没错，这里是div[i].id,i的值还不确定。这里还没执行的。执行的条件就是你在浏览器点击了div，这时在内部循环已经完成该了。i=5。
                ②每个onclick事件执行时，this会绑定到点击它的dom元素。更详细的解释：每个div都是一个对象，onclick是它的属性，类似

                div[i] = {
        onclick:function(){alert(this.id)}
}

                ,所以这个this隐式绑定到div[i]上。点击的时候会找到这个div的id属性。你可以把id的值换了试一试。
                ③和1是一样的。并不是闭包。闭包的概念：是在当前的作用域能使用其他作用域。这里可以使用一个即时函数(IIFE)。

                var div=document.getElementsByClassName("div_area");
for(var i=0;i<div.length;i++){
    div[i].onclick=(function(count){
            return function(){
                alert(div[count].id)
            }
    })(i)
}

                如果还有什么不明白可以追问喔。答得不好的请多多包涵:)
                ----二次更新
                一和三都不是闭包（个人看法）。如下代码

                function foo(){
    var a = 2;
    
    function bar(){
        console.log(a);
    }
    return bar;
}
var baz = foo();
baz();//2..

                以上就是闭包。
                解释如下：函数bar()的词法作用域能够访问foo()的内部作用域。然后将bar函数本身当作一个值类型进行传递。bar显然可以正常执行，在这个例子中，它在自己定义的词法作用域以外的地方执行。

                在foo()执行后，通常会期待foo()的整个内部作用域被销毁(js的垃圾回收器)。

                而闭包的"神奇"之处是可以阻止这件事情的发生。因为在bar()声明的地方，它拥有涵盖foo()内部作用域的闭包，使得该作用域能够一直存在，以供bar()在之后任何时间进行引用。
                bar()依然持有对该作用域的引用，而这个引用就是闭包。
                -----------------------------以下为书中原话(译版)

                当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前的词法作用域之外执行。下面用一些代码来解释这个定义。

                function foo(){
    var a = 2;
    
    function bar(){
        console.log(a);//2
    }
    
    bar();
}

foo();

                这段代码看起来和嵌套作用域中的实例代码很相似。基于词法作用域的查找规则，函数bar()可以访问外部作用域的变量a(这个例子中的是一个RHS引用查询)。
                这是闭包吗？
                技术上来讲，也许是。但根据前面的定义，确切地说并不是。我认为最准确地用来解释bar()对a的引用的方法是词法作用域的查找规则，而这些规则只是闭包的一部分。(但却是非常重要的一部分！)

                上面是书中原话。最后一段解释我感觉很模棱两可。可能是翻译的原因或者我没理解。
                书名：你不知道的JavaScript上卷 没找到英文版，哪位找到发我一份啊。。谢谢啦！

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