关于闭包的一个好玩的东西

由于作用域链的配置机制，使得闭包只能取得包含函数中任何变量的最后一个值。即说明了闭包中所保存的是整个变量对象，而不是某一个特殊的变量。我们用下面这个例子来说明这个问题。

  function fun(){
        var result = new Array();
        //这里用let就不会出现只打印10的问题
        for(var i=0;i<10;i++){
            result[i] = function(){
                return i;
            }
        }
        return result;
    }
    let arr = fun();
    console.log(arr);
    console.log(arr[0]());//10
    console.log(arr[1]());//10

在这个函数中，我们直接将闭包赋值给数组。这个函数会返回一个函数数组。表面上来看，似乎每个函数都应该返回自己的索引，即位置0的函数返回0，位置1的函数返回1一次类推。但实际上，如同上面例子，每个函数都返回了10。因为每个函数的作用域链中都保存fun()函数的活动对象，所以它们引用的都是同一个变量i。当fun()函数返回后，变量i的值死10，此时每个函数都引用着保存变量i的同一个变量对象。所以在每个函数内部i的值都是10。‘

但我们把i的命名方式改变一下，变成let i=0；不是var i =0 ;因为es6里let的作用域是块级作用域即{ }，所以每次循环的i其实就不是同一个变量；

 function fun(){
        var result = new Array();
        //这里用let就不会出现只打印10的问题
        for(let i=0;i<10;i++){
            result[i] = function(){
                return i;
            }
        }
        return result;
    }
    let arr = fun();
    console.log(arr);
    console.log(arr[0]());//0
    console.log(arr[1]());//1

这时候我们就可以得到0-9，不需要创建一个自执行函数（匿名函数）强制让闭包的行为符合预期。

当然我们也可以创建匿名函数自运行的方式，让其达到预期效果。

function fun(){
        var result = new Array();
        for( var i = 0; i <10; i++){
            //第一种start
//            result[i] = function(num){
//                return function(){
//                    return num;
//                }
//            }(i);
            //第一种end
            //第二种start
            (function(num){
                result[num] = function(){
                    return num;
                }
            })(i)
            //第二种end
        }
        return result;
    }
    var arr = fun();
    console.log(arr);
    console.log(arr[0]());//0
    console.log(arr[1]());//1

关于闭包的一个好玩的东西

猜你喜欢