闭包

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background-color: red;
                float: left;
                margin: 20px;
                font-size: 100px;
                line-height: 200px;
                text-align: center;
                color: white;
            }
        </style>
    </head>
    <body>
        <div class="div1">1</div>
        <div class="div2">2</div>
        <div class="div3">3</div>
        <div class="div4">4</div>
        <div class="div5">5</div>
    </body>
    <script type="text/javascript">
    var divs=document.querySelectorAll("div");
        for(var i=0;i<divs.length;i++){
                function click(num) {
                    divs[i].onclick=function () {
                    console.log(num);
                }
                }
                click(i);
            }
        
        
        //闭包。函数内部的函数就是闭包
        //1、通过闭包可以访问函数内部的局部变量
        
        //根据闭包可以保存当时函数内部局部变量的值得特性，可以使用下面这种方式来解决点击DIV的
//      时候I始终为5这种情况
        function test1 (num) {
            var j=num;
            console.log("1的值"+j);
            function test2 () {
                console.log(j);
            }
            return test2;
        }
//      var fn = test1();
//      fn();
        //2、每次访问tset1得到的test2是不一样的函数。
        //两个test2不一样，意味着，他们的空间不是同一块内存空间。
        var fn2 = test1(100);
        fn2();
        var fn3 = test1(200);
        //fn2和fn3是两个不同的函数，里面的j虽然都是引用的test1里面的J值，但是他们都不是同一个变量
        //fn2，fn3各自在自己的内部空间储存了原来的J值
        fn2();
//      console.log(fn2===fn3);
        
    </script>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容