杰晶网络

浅谈JavaScript for循环 闭包
网络编程 2024/5/9 佚名
3 2

有个网友问了个问题，如下的html，为什么每次输出都是5，而不是点击每个p，就alert出对应的1，2，3，4，5。

<html >   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<title>闭包演示</title>   
<script type="text/javascript">   
  
function init() {   
  var pAry = document.getElementsByTagName("p");   
  for( var i=0; i<pAry.length; i++ ) {   
     pAry[i].onclick = function() {   
     alert(i);   
  }   
 }   
}   
</script>   
</head>   
<body onload="init();">   
<p>产品一</p>   
<p>产品二</p>   
<p>产品三</p>   
<p>产品四</p>   
<p>产品五</p>   
</body>   
</html>

解决方式有以下几种

1、将变量 i 保存给在每个段落对象（p）上

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 保存在匿名函数自身 

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以函数参数形式传递给内层函数

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以局部变量形式传递给内存函数

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的细微区别）

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实现，实际上每产生一个函数实例就会产生一个闭包

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的区别

function init7() {   
  var pAry = document.getElementsByTagName("p");   
  for( var i=0; i<pAry.length; i++ ) {   
     pAry[i].onclick = Function('alert('+i+')')  
  }   
}

以上就是小编为大家带来的浅谈JavaScript for循环 闭包全部内容了，希望大家多多支持~

标签：
javascript,循环闭包
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“浅谈JavaScript for循环 闭包”
暂无“浅谈JavaScript for循环 闭包”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接