闭包问题小练习

<script>
        function test() {
            var arr = [];
            for (var i = 0; i < 10; i++) {
                arr[i] = function() {
                    console.log(i + " ");
                }
            }
            return arr; //当i=10时则退出循环，在此之前并不会关心 function() { console.log(i + " "); } 函数里是什么
        }

        var myArr = test();
        for (var j = 0; j < 10; j++) {
            myArr[j](); //此时调用时才会返回去看 function() { console.log(i + " "); }，但是此时该函数里面的i已经等于10，因此则会全部输出10
        }
</script>

但是如何才能正常输出呢？

首先我们可以利用立即执行函数来解决：

<script>
        //方式1
        function test() {
            var arr = [];
            for (var i = 0; i < 10; i++) { //会生成10个立即执行函数，每个立即执行函数里j都不一样
                //立即执行函数
                (function(j) {
                    //j=0;
                    arr[j] = function() {
                        console.log(j + " ");
                    }
                })(i);
            }
            return arr;
        }

        var myArr = test();
        for (var j = 0; j < 10; j++) {
            myArr[j](); //此时调用的时候则会返回去找，例如j=0时就会返回去找那个j=0时的立即执行函数
        }
</script>

 

 

其次还可以通过将for循环里的var改为let即可

 <script>
        //方式2
        function test() {
            var arr = [];
            for (let i = 0; i < 10; i++) {
                arr[i] = function() {
                    console.log(i + " ");
                }
            }
            return arr; 
        }

        var myArr = test();
        for (let j = 0; j < 10; j++) {
            myArr[j](); 
        }
</script>

 

这里关于var和let的区别可以参考：var、let、const的区别