zoukankan      html  css  js  c++  java
  • JavaScript闭包

    例如以下的html,为什么每次输出都是5,而不是点击每一个p。就alert出相应的1,2,3。4。5
    <span style="font-family:Microsoft YaHei;"><html >     
    <head>     
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
    <title>闭包演示</title>     
    <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>产品一</p>     
    <p>产品二</p>     
    <p>产品三</p>     
    <p>产品四</p>     
    <p>产品五</p>     
    </body>     
    </html>     </span>

    解决方案有两种。

    1、将变量 i 保存给在每一个段落对象(p)上

    <span style="font-family:Microsoft YaHei;">    function init() {   
          var pAry = document.getElementsByTagName("p");   
          for( var i=0; i<pAry.length; i++ ) {   
             pAry[i].i = i;   
             pAry[i].onclick = function() {   
                alert(this.i);   
             }   
          }   
        }   </span>

    2、将变量 i 保存在匿名函数自身 
    <span style="font-family:Microsoft YaHei;">    function init2() {   
          var pAry = document.getElementsByTagName("p");   
          for( var i=0; i<pAry.length; i++ ) {     
           (pAry[i].onclick = function() {   
                alert(arguments.callee.i);   
            }).i = i;   
          }   
        }   </span>


查看全文
  • 相关阅读:
    品尝阿里云容器服务:负载均衡与容器的关系
    基于微服务架构、运行于容器中的.NET Core示例应用eShopOnContainers
    基于VS2017的Docker Support体检ASP.NET Core站点的Docker部署
    用工厂模式解决ASP.NET Core中依赖注入的一个烦恼
    终于知道什么情况下需要实现.NET Core中的IOptions接口
    ASP.NET Core Web API处理HttpResponseMessage类型返回值的问题
    ASP.NET Core奇遇记:无用户访问,CPU却一直100%
    省一行是一行:在if语句中使用C# 7.0的模式匹配
    ASP.NET Core 2.0 Preview 1 中贴心的新特性
    .NET Core类库项目中如何读取appsettings.json中的配置
  • 原文地址:https://www.cnblogs.com/ldxsuanfa/p/10658536.html
  • Copyright © 2011-2022 走看看