1、 <!-- lang: html --> <!DOCTYPE HTML> <!-- lang: html --> <html> <!-- lang: html --> <head> <!-- lang: html --> <meta charset="utf-8" /> <!-- lang: html --> <title>闭包演示</title> <!-- lang: html --> <style type="text/css"> <!-- lang: html --> p {background:gold;} <!-- lang: html --> </style> <!-- lang: html -->
<!-- lang: html -->
<script>
<!-- lang: html -->
function init(){
<!-- lang: html -->
var list=document.getElementsByTagName("p");
<!-- lang: html -->
<!-- lang: html -->
for (var i=0;i<list.length;i++){
<!-- lang: html -->
<!-- lang: html -->
list[i].onclick=function(){
<!-- lang: html -->
var b=i;
<!-- lang: html -->
return function(){
<!-- lang: html -->
alert(b);
<!-- lang: html -->
};
<!-- lang: html -->
}();
<!-- lang: html -->
}
<!-- lang: html -->
}
<!-- lang: html -->
<!-- lang: html -->
</script>
<!-- lang: html -->
</head>
<!-- lang: html -->
<body onload="init();">
<!-- lang: html -->
<p>产品 0</p>
<!-- lang: html -->
<p>产品 1</p>
<!-- lang: html -->
<p>产品 2</p>
<!-- lang: html -->
<p>产品 3</p>
<!-- lang: html -->
<p>产品 4</p>
<!-- lang: html -->
</body>
<!-- lang: html -->
</html>
之前是点击任何一条出现的都是5,下面这样写就会有些问题
<!-- lang: html -->
<!DOCTYPE HTML>
<!-- lang: html -->
<html>
<!-- lang: html -->
<head>
<!-- lang: html -->
<meta charset="utf-8" />
<!-- lang: html -->
<title>闭包演示</title>
<!-- lang: html -->
<style type="text/css">
<!-- lang: html -->
p {background:gold;}
<!-- lang: html -->
</style>
<!-- lang: html -->
<script type="text/javascript">
<!-- lang: html -->
function init() {
<!-- lang: html -->
var pAry = document.getElementsByTagName("p");
<!-- lang: html -->
for( var i=0; i<pAry.length; i++ ) {
<!-- lang: html -->
pAry[i].onclick = function() {
<!-- lang: html -->
alert(i);
<!-- lang: html -->
}
<!-- lang: html -->
}
<!-- lang: html -->
}
<!-- lang: html -->
</script>
<!-- lang: html -->
</head>
<!-- lang: html -->
<body onload="init();">
<!-- lang: html -->
<p>产品 0</p>
<!-- lang: html -->
<p>产品 1</p>
<!-- lang: html -->
<p>产品 2</p>
<!-- lang: html -->
<p>产品 3</p>
<!-- lang: html -->
<p>产品 4</p>
<!-- lang: html -->
</body>
<!-- lang: html -->
</html>
所以一方面新建变量b,返回一个引用,另外也应该return一个函数,如果不用return,循环执行的时候就会覆盖前面的方法,最后得到的还是同一个引用。