浅谈JavaScript for循环 闭包
有个网友问了个问题，如下的html，为什么每次输出都是5，而不是点击每个p，就alert出对应的1，2，3，4，5。
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>闭包演示</title>
<scripttype="text/javascript">
functioninit(){
varpAry=document.getElementsByTagName("p");
for(vari=0;i<pAry.length;i++){
pAry[i].onclick=function(){
alert(i);
}
}
}
</script>
</head>
<bodyonload="init();">
<p>产品一</p>
<p>产品二</p>
<p>产品三</p>
<p>产品四</p>
<p>产品五</p>
</body>
</html>
解决方式有以下几种
1、将变量i保存给在每个段落对象（p）上
functioninit(){
varpAry=document.getElementsByTagName("p");
for(vari=0;i<pAry.length;i++){
pAry[i].i=i;
pAry[i].onclick=function(){
alert(this.i);
}
}
}
2、将变量i保存在匿名函数自身
functioninit2(){
varpAry=document.getElementsByTagName("p");
for(vari=0;i<pAry.length;i++){
(pAry[i].onclick=function(){
alert(arguments.callee.i);
}).i=i;
}
}
3、加一层闭包，i以函数参数形式传递给内层函数
functioninit3(){
varpAry=document.getElementsByTagName("p");
for(vari=0;i<pAry.length;i++){
(function(arg){
pAry[i].onclick=function(){
alert(arg);
};
})(i);//调用时参数
}
}
4、加一层闭包，i以局部变量形式传递给内存函数
functioninit4(){
varpAry=document.getElementsByTagName("p");
for(vari=0;i<pAry.length;i++){
(function(){
vartemp=i;//调用时局部变量
pAry[i].onclick=function(){
alert(temp);
}
})();
}
}
5、加一层闭包，返回一个函数作为响应事件（注意与3的细微区别）
functioninit5(){
varpAry=document.getElementsByTagName("p");
for(vari=0;i<pAry.length;i++){
pAry[i].onclick=function(arg){
returnfunction(){//返回一个函数
alert(arg);
}
}(i);
}
}
6、用Function实现，实际上每产生一个函数实例就会产生一个闭包
functioninit6(){
varpAry=document.getElementsByTagName("p");
for(vari=0;i<pAry.length;i++){
pAry[i].onclick=newFunction("alert("+i+");");//new一次就产生一个函数实例
}
}
7、用Function实现，注意与6的区别
functioninit7(){
varpAry=document.getElementsByTagName("p");
for(vari=0;i<pAry.length;i++){
pAry[i].onclick=Function('alert('+i+')')
}
}
以上就是小编为大家带来的浅谈JavaScriptfor循环闭包全部内容了，希望大家多多支持毛票票~