关于引用

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,循环执行的时候就会覆盖前面的方法,最后得到的还是同一个引用。

转载于:https://my.oschina.net/u/933915/blog/309495

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值