閉包

<!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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容