JS常见逻辑练习-3（闭包小练习①）

闭包的简单运用1

例题

题目分析

首先我们看个题，让我们猜一下下面的输出结果；

 function down() {
            for (var i = 0, arr = []; i < 3; i++) {
                arr[i] = function() {
                    console.log(i);
                }
            }
            return arr;
        }
        var downs = down();
        console.log(downs);
        downs[0](); 
        downs[1]();
        downs[2]();

大家可以自己先分析一下：这个小练习的输出结果是什么；
此处假装有一条漫长的分割线

结果展示

好啦，这里先展示下结果，后面我们在逐步做分析

例题分析

这里由于方便大家理解，我把解释写在代码中间便于大家理解,如下：

 function down() {
        //这里用for循环
            for (var i = 0, arr = []; i < 3; i++) {
                arr[i] = function() {
                    console.log(i);
                }
            }
            return arr;
        }
        var downs = down();
        // 我们这里发现此时形成闭包（当内部函数（down）保存在外部变量downs上）
        // 此时执行 down()
        // i=0;0<3 true arr[0]=function(){console.log(i)},i++ 
        //这里后面是函数的原因是这里没有将arr[i]后面的function 没有执行
        //i=1;1<3 true arr[1]=function(){console.log(i)} ，i++
        //i=2;2<3 true arr[2]=function(){console.log(i)},i++
        //i=3;3<3 flase
        console.log(downs); //arr,三个函数
        //此时执行arr[i]后面的function ，此时i=3;
        //arr[0]=3;
        //arr[1]=3;
        //arr[2]=3;
        //于是这里输出如下结果
        downs[0](); //3
        downs[1](); //3
        downs[2](); //3

生命不息，需求不止

我们一般生活中常见的肯定不是想让他输出3个3，我们想看到的肯定是0,1,2，或者1,2,3，这里我们
分别简单分析一下怎么才能实现

简单实现0,1,2的输出，上面 console.log(downs)的打印结果不变

这里先放代码和输出结果，然后我们在一步步分析

function down() {
                    for (var i = 0, arr = []; i < 3; i++) {
                        (function(j) {
                            arr[j] = function() {
                                console.log(j);
                            }
                        }(i));
                    }
                     return arr;
                }
                var downs = down(); 
                downs[0](); 
                downs[1]();
                downs[2](); 

结果

这里没有展示console.log(downs)的打印效果，与上面一样；
分析：

function down() {
           for (var i = 0, arr = []; i < 3; i++) {
               (function(j) {
                   arr[j] = function() {
                       console.log(j);
                   }
               }(i));
               // 这里是一个立即执行函数
           }
           return arr;
       }
       var downs = down(); //每个函数对应一个立即执行函数的AO
       // 所以下面当downs[i]执行的时候
       // 里面积极执行
       // i=0;0<3 true arr[0]=0,i++ 
       //i=1;1<3 true arr[1]=1 ，i++
       //i=2;2<3 true arr[2]=2,i++
       //i=3;3<3 flase
       downs[0]();
       downs[1]();
       downs[2]();

简单实现1,2,3的输出，上面 console.log(downs)的打印结果变为[1,2,3]

由于和上面的只有细微的变化，所以这里直接将分析写在代码中

 function down() {
            for (var i = 0, arr = []; i < 3; i++) {
                (function(j) {
                    arr[j] = (function() {
                            return (j + 1)
                        })()
                        //这里也是一个立即执行函数
                        // i=0;0<3 true arr[0]=0,i++ 
                        //i=1;1<3 true arr[1]=1 ，i++
                        //i=2;2<3 true arr[2]=2,i++
                        //i=3;3<3 flase
                }(i));
                // 这里是一个立即执行函数，
            }
            // 这里返回arr
            return arr;
        }
        var downs = down();
        console.log(downs); //[1,2,3]
        //这里是因为上面都立即执行了，所以每一项都能解析出来
        // 这里我们单纯的取数组的每一项
        console.log(downs[0]); //1 
        console.log(downs[1]); //2
        console.log(downs[2]); //3

展示结果的时刻到啦

上面如果单存实现加一的效果，可以在方法一中的输出中变成j+1,也可实现，方法很多，大家可以自己考虑哪一种更利于自己的理解，在保证有一定可阅读性的同时，选择最合适的就好！！！