彻底搞清js中闭包(Closure)的概念

js中闭包这个概念对于初学js的同学来说, 会比较陌生, 有些难以理解, 理解起来非常模糊. 今天就和大家一起来探讨一下这个玩意.
相信大家在看完后, 心中的迷惑会迎然而解.

闭包概念:

　　闭包就是有权访问另一个函数作用域中变量的函数.

 

 

分析这句话:

　　1.闭包是定义在函数中的函数.
　　2.闭包能访问包含函数的变量.
　　3.即使包含函数执行完了, 被闭包引用的变量也得不到释放.

 

例子分析-1:
    
        function add(){
            var i = 0
                arr = [];
            for(; i < 10; i++){
                arr.push(function(){
                    alert(i);
                });
            }
            return arr;
        }
        var temp = add();
        temp[0]();
        
        大家猜猜这个结果是多少? 0, i, 10?
        我想大家会说是0.
        但是结果是10.
        
        我想大家想的应该是这样滴:
         i = 0, arr.push(function(){
            alert(0);
         })
         i = 1, arr.push(function(){
            alert(1);
         })
        ...
         i = 10, arr.push(function(){
            alert(10);
         })
         
        咋一看, 这个确实合理, 根据闭包的定义, 具体这个当然是上面分析的那样了.
        问题就出在这个变量的理解上.
        
        1.i是变量不假, 但是i在for循环的时候, 一直在不断变化. 也就是说这个i在参与for循环的时候, 值是不确定的, 等到for执行完后, i的值才确定.
        2.每次push一个匿名函数表达式时, 那只是定义一个函数, 并没去执行那个函数, 所以那个函数里引用的外部变量都是原封不动的放进去的.
          换句话说, 就是这个匿名函数在最后执行的时候, 才会去查找作用域链, 直至找到那个变量i为止.
        
        也就是:
             i = 0, arr.push(function(){
                alert(i);
             })
             i = 1, arr.push(function(){
                alert(i);
             })
             ...
             i = 10, arr.push(function(){
                alert(i);
             })
        
        执行add()时, i参与循环完毕, i = 10. 
        执行temp[0]()时, 匿名函数会查找i, 先看自己, 我的i有值吗?没有. 再找他的上级函数, i有值吗?有, i = 10. 查找结束.
        至此, 不管执行temp[0](), 还是temp[5](), 还是temp[10](), 结果都是10.
        
        改一下上面的例子, 让它符合我们的预期要求.
        
        例子分析-2:
        
          function add(){
            var i = 0
                arr = [];
            for(; i < 10; i++){
                arr.push(
                (function(n){
                    return function(){
                        alert(n);
                    }
                })(i)//注意这个变化

                );
            }
            return arr;
        }
        var temp = add();
        temp[0]();
        temp[1]();
        ...
        
        这次结果是预期的,结果是 0 , 1 , 2,  3 ... 10
        
        分析一下循环那部分.
        (function(n){
            return function(){
                alert(n);
            }
        })(i)

        这个叫做立即执行的匿名函数表达式(不清楚这种写法的, 可以先google下, 或者看我的单独一篇专门介绍)
        
        i这个是时候就被当做参数传递了, 每次这个匿名函数执行时, i都会把自己的值复制一份给n
        return语句中的匿名函数引用着n, 此时已经和i无关了.
        
        每次匿名函数表达式执行时, 都会保存一个不同的n.
        return语句中的匿名函数每次也引用着不同的n。
        
        形象点就是这样:
            arr.push(
                (function(n = i = 0){
                    return function(){
                        alert(n = 0);
                    }
                })(i = 0)
            )
            arr.push(
                (function(n = i = 1){
                    return function(){
                        alert(n = 1);
                    }
                })(i = 1)
            )
            ...


  闭包的介绍就到此为止了.