理解JS中的闭包
之前看到一个观点是 闭包是走向高级Javascript的必经之路，之前看过很多关于闭包的讲解帖子，一直没有理解透彻，模棱两可。
现在终于可以讲出来了。
检验自己有没有掌握一个知识，最好的方式是讲给一个不懂的人 ，给Ta讲懂了。我做到了。
请有心读者检阅我的知识点有么有错误。
一：什么闭包
首先要理解 js特殊的作用域机制：只能按照作用域链向上访问，而不能访问Ta下级域中的变量。
闭包：就是能够读取其他函数内部变量的函数。 (*^__^*)
一切函数某种环境下都可以当做闭包。
手写一个demo:
function a(){
var s = 1;
function b（）{
s++;
}
}
上述中 b函数就是一个闭包。
二：闭包的用途：
1.可以读取函数内部的变量 2 使这些变量保存在内存中
举栗子：
var li = document.getElementsByTagName("li");
for(var i=0;i<5;i++){
li[i].onclick = function(){
alert(i);
}
}
这样运行结果是：每次弹出5； 原因是：当点击alert i的值为最后运算完的值。
修改方法一：
匿名函数自调用；
var li = document.getElementsByTagName("li");
for(var i=0;i<5;i++){
(function(arg){
li[i].onclick = function(){
alert(arg);
}
})(i);
}
-----------------分割线 -------------------
将变量 i 保存给在每个段落对象（p）上
|
1
2
3
4
5
6
7
8
9
|
function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].i = i;
pAry[i].onclick = function() {
alert(this.i);
}
}
} |
2、将变量 i 保存在匿名函数自身
|
1
2
3
4
5
6
7
8
|
function init2() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(pAry[i].onclick = function() {
alert(arguments.callee.i);
}).i = i;
}
} |
3、加一层闭包，i以函数参数形式传递给内层函数
|
1
2
3
4
5
6
7
8
9
10
|
function init3() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(function(arg){
pAry[i].onclick = function() {
alert(arg);
};
})(i);//调用时参数
}
} |
4、加一层闭包，i以局部变量形式传递给内存函数
|
1
2
3
4
5
6
7
8
9
10
11
|
function init4() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(function () {
var temp = i;//调用时局部变量
pAry[i].onclick = function() {
alert(temp);
}
})();
}
} |
5、加一层闭包，返回一个函数作为响应事件（注意与3的细微区别）
|
1
2
3
4
5
6
7
8
9
10
|
function init5() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function(arg) {
return function() {//返回一个函数
alert(arg);
}
}(i);
}
} |
6、用Function实现，实际上每产生一个函数实例就会产生一个闭包
|
1
2
3
4
5
6
|
function init6() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例
}
} |
7、用Function实现，注意与6的区别
|
1
2
3
4
5
6
|
function init7() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = Function('alert('+i+')')
}
} |