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

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