彻底搞清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)
        )
        ...

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