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

原文地址:https://www.cnblogs.com/7qin/p/10639860.html