zoukankan      html  css  js  c++  java
  • let的使用 优先于闭包

    let声明的变量在{}中使用,变量的作用域限制在块级域中

    举例:使用js动态给ul添加li对象并点击第几项,显示当前点击是第几个

    错误代码

    window.onload = function(){
       var ul = document.getElementById("ulList");
       for(var i = 0 i <= 5; i++){
          // 创建一个li对象
          var li = document.createElement("li");
           // li标签内内容设置为:Itemi
           li.appendChild(document.createTextNode("Item" + i));
    
            // 绑定点击事件
            li.onclick = function(){
                alert("Item" + i + "is clicked.");
             };
             ul.appendClild(li);
         }
    }

    闭包方式:

    window.onload = function(){
       var ul = document.getElementById("ulList");
       for(var i = 0 i <= 5; i++){
          // 创建一个li对象
          var li = document.createElement("li");
           // li标签内内容设置为:Itemi
           li.appendChild(document.createTextNode("Item" + i));
    
            // 绑定点击事件
            li.onclick = (function(i){
                return function (){
                alert("Item" + i + "is clicked.");
             };
          })(i) // 闭包
           // 将LI对象item拼接到UL标签体内
           ul.appendClild(li);
         }
    }

    let声明方式:

    (function(){
       var ul = document.getElementById("TopDiggPostsBlock").querySelector('ul');//TopDiggPostsBlock children ul
       for(var i = 0; i <= 5; i++){
          // 创建一个li对象
          var li = document.createElement("li");
           // li标签内内容设置为:Itemi
           li.appendChild(document.createTextNode("Item" + i));
           // 声明一个块级变量j,并将i赋给j
           let j = i;
            // 绑定点击事件
            li.onclick = function(){
                alert("Item" + j + "is clicked.");
             };
             ul.appendChild(li);
         }
    })()

    说明:采用的闭包的方式在绑定的时候已经把j的值已经传递给对应的click事件了,所以能够实现相同的结果,但是,从程序的可维护性来说不推荐使用。 

    闭包的优缺点说明:

    优点:设计私有的方法和变量,保护函数内的变量安全;

    弊端:闭包有一个非常严重的问题,那就是内存浪费问题,这个内存浪费不仅仅因为它常驻内存,更重要的是,对闭包的使用不当会造成无效内存的产生。

    摘自:https://www.cnblogs.com/amujoe/p/8874343.html

  • 相关阅读:
    在浏览器地址栏输入URL,按下回车后究竟发生了什么?
    企业内部DNS跨国配置案例
    Cobbler批量部署CentOS
    入侵检测工具之RKHunter & AIDE
    SSH服务端配置、优化加速、安全防护
    数据传输的加密过程
    mysql怎么让一个存储过程定时执行
    MYSQL中replace的用法
    eclipse 插件
    MySQL定时执行脚本(计划任务)命令实例
  • 原文地址:https://www.cnblogs.com/7qin/p/10639860.html
Copyright © 2011-2022 走看看