循环语句中var与let声明循环变量的区别

循环语句中let与var声明循环变量的区别

html：

<ul>
        <li>ili>
        <li>ili>
        <li>ili>
        <li>ili>
ul>
1
2
3
4
5
6

使用var：

var elements = document.getElementsByTagName('li');
for (var i = 0; i < elements.length; i++) {
    elements[i].onclick = function () {
        console.log(i);
        alert(i);
    };
}
1
2
3
4
5
6
7

结果：

点击任意li标签控制台都打印 4

使用let：

var elements = document.getElementsByTagName('li');
for (let i = 0; i < elements.length; i++) {
    elements[i].onclick = function () {
        console.log(i);
        alert(i);
    };
}
1
2
3
4
5
6
7

点击对应li标签控制台打印对应id

解释：

• 一进入页面，for循环已经执行完毕，事件已经绑定，点击事件触发时，for循环已结束
• var作用域为全局，即全局只有一个i，每次循环结束，对i重新赋值（覆盖），for循环结束时，i=4
• 点击事件触发时函数内无i，故向父级寻找，找到i=4
• let作用域为{ }，每次循环时产生一个新的{ }，i值得以在此独立作用域中保留（不覆盖）
• 点击事件触发时{ }内保有对应值