这是一道网上的题目,对于刚学习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);
这样就将每一行的序号绑定到对应的显示函数上面了。