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