首页 > 代码库 > 终于理解JS中的闭包了
终于理解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+ ‘)‘ ) } } |
终于理解JS中的闭包了