现在的位置: 首页 > 综合 > 正文

JavaScript 闭包实现点段落输出段落次序号

2014年09月05日 ⁄ 综合 ⁄ 共 628字 ⁄ 字号 评论关闭

这是一道网上的题目,对于刚学习javaScript的我有点混乱。

题目:什么是闭包?以下代码点击<p> 会输出什么?为什么?能大概说明白的话继续问能想出几种解决办法。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>闭包演示</title> 
<style type="text/css">
     	p {background:gold;}
</style>
 <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>产品 0</p>
   <p>产品 1</p>
   <p>产品 2</p>
   <p>产品 3</p>
   <p>产品 4</p>
   </body>
   </html>  

要知道,onclick后面函数的代码要等到你点击对应段落的时候才会执行,而到那个时候i的值等于5.所以你点击每个段落都是提示5。

解决办法使用闭包:

pAry[i].onclick = (function (msg){
	function show(){
		alert(msg);
	}
	return show;
})(i);

这样就将每一行的序号绑定到对应的显示函数上面了。

抱歉!评论已关闭.