曾经见过这样的一道面试题：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
鼠标点击相应的<li>，输出那个<li>的索引号。
当时年少无知，这不简单吗，直接注册事件不就完事了吗？
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function () {
console.log(i);
})
}
结果。。
图片.png
为何4个4。？
后来研究了下，这是因为JavaScript的缺陷导致，也就是变量声明提升导致的闭包问题。
console.log(i); //undefined
var i = 123;
看到没有，我没有定义 i 的时候，直接打印不会报错。这是因为下面用 var 定义了 i，飘到上面去了。。这称之为函数声明提升，提升到作用域的顶端。
在lis[i]上注册的那个click匿名函数形成了封闭的作用域(闭包)。当 for 循环结束时候，这个闭包的才打开，世界早已经发生了翻天覆地的变化了。此时的 i 不再是当年的 i 了。此时的 i 已经是4了。
解铃还须系铃人，闭包问题当然可以用闭包的方法去解决啦。
利用立即执行函数的方法：
for (var i = 0; i < lis.length; i++) {
(function (j) {
lis[j].addEventListener('click', function () {
console.log(j);
})
}(i)) //将每次循环的 i 传给 j ，保存起来。当每次执行 click 的时候，就能打印相应的索引了
}
当然也有其他的写法，但是原理是一样的
for (var i = 0; i < lis.length; i++) {
temp(i); //每次循环，及时把 i 传过去
}
function temp(j) {
lis[j].addEventListener('click', function () {
console.log(j);
})
}
但是利用这种原理去解决，都是要写一堆很恶心的代码。。。就为了这个小问题。
我们来分析一下。
图片.png
所以，ES6提出了一种定义变量的方法就是 let 。它解决了原来js几个缺陷。其中就是，函数声明，不会提升，可以这么理解。
console.log(i); //报错。
let i = 123;
在循环中，用 let 声明的循环变量，会特殊处理，每次进入循环体，都会开启一个新的作用域，并且将循环变量绑定到该作用域。也就是每次进入循环，用的都是一个新的变量 i
这是因为 let 会产生一个块级作用域 {}，
所以主题中说的问题可以这样写：
for (let i = 0; i < lis.length; i++) { //这里一共分别产生了4个作用域，每个域绑定1个i
lis[i].addEventListener('click', function () { //这里的i都是全新的
console.log(i);
})
}
在循环中用 let 声明的循环变量，在循环结束的时候回销毁。
因此，在循环结束的时候：
console.log(i); //error: i is not defined
其实底层实现上，let 声明的变量实际上也会有提升，但是，提升后会将其放入到“暂时性死区”，如果访问的变量位于暂时性死区(TDZ)，则会报错：“Cannot access 'a' before initialization”。
只有当代码运行到该变量的声明语句时，会将其从暂时性死区中移除。
图片.png
因此，将用 let 声明的变量理解成不会提升，完全不会出问题。
而且，var 还导致了其他问题，比如：
- 全局变量挂载到全局：全局对象成员的污染问题。
- 重复声明变量， 导致覆盖。
所以，在声明变量的时候，一般不用var去声明，尽量使用ES6的let或者const
网友评论