闭包难懂的例子1

下面这个例子说明外部环境中的局部变量没有被释放

var fnArr = [];
for (var i = 0; i < 10; i ++) {
    fnArr[i] =  function(){
        return i;
    };
   console.log(i)
}
console.log( fnArr[3]() );  //

图片.png

修改函数，使fnArr0 输出0、fnArr1 输出1、fnArr2 输出2。。。
怎么办呢？
想到每次的i值都需要执行一次内部嵌套函数，一遇到i值就执行一次「立即执行」所以把内部嵌套函数修改成立即执行函数，OK了

         //方法一：
        var fnArr = [];
        for (var i = 0; i < 10; i ++) {
            (function(n){
                fnArr[n] =  function(){
                return n;
            };
            })(i);
        }
        console.log( fnArr[3]() );  //3

        //方法二：
        var fnArr=[];
        for (var i = 0; i < 10; i ++) {
             fnArr[i] = function(){
                var n=i
                return function(){
                     return n;
                }
            }();
        }
        console.log( fnArr[3]() ); 

       //方法三：
        var fnArr=[];
        for (var i = 0; i < 10; i ++) {
             fnArr[i] = function(i){
                return function(){
                    return i;
                }
            }(i);
        }
        console.log( fnArr[3]() );

    //方法四：
    var fnArr = [];
    for (let i = 0; i < 10; i ++) { //使用ES6： let
       fnArr[i] =  function(){
        return i;
      };
    }
    console.log( fnArr[3]() );

易错修改

图片.png

修改成：

    <script>
        var fnArr=[];
        for (var i = 0; i < 10; i ++) {
             fnArr[i] = function(i){
                      return i;
            }(i);
        }
        console.log( fnArr[3]); 
    </script>

输出结果：

图片.png

修改关键总结：

1,把内部嵌套函数修改成立即执行函数，一遇到i值就执行

2,正确调用「执行」