新手实例：Javascript闭包演示
新手实例之Javascript闭包演示，我们先来看下下面的html代码：
view sourceprint?
01 <!DOCTYPE HTML>
02 <html>
03 <head>
04 <meta charset="utf-8" />
05 <title>闭包演示</title>
06 <style type="text/css">
07 p {background:gold;}
08 </style>
09 <script type="text/">
10 function init() {
11 var pAry = document.getElementsByTagName("p");
12 for( var i=0; i<pAry.length; i++ ) {
13 pAry[i].onclick = function() {
14 alert(i);
15 }
16 }
17 }
18 </script>
19 </head>
20 <body onload="init();">
21 <p>产品 0</p>
22 <p>产品 1</p>
23 <p>产品 2</p>
24 <p>产品 3</p>
25 <p>产品 4</p>
26 </body>
27 </html>
也许有朋友有疑问，为什么点击所有的段落p输出都是5，而不是alert出对应的0，1，2，3，4。
以上场景是初学者经常碰到的。即获取HTML元素集合，循环给元素添加事件。在事件响应函数中(event handler)获取对应的索引。但每次获取的都是最后一次循环的索引。
原因是初学者并未理解JavaScript的闭包特性。通过element.onclick=function(){alert(i);}方式给元素添加点击事件。响应函数function(){alert(i);}中的 i 并非每次循环时对应的i（如0，1，2，3，4）而是循环后最后 i 的值5。 或者说循环时响应函数内并未能保存对应的值i，而是最后一次i++的值5。
