彻底读懂 var let const 的区别&顺便重温一下闭包
1. 分享博文: 读懂 var let const 的区别
2. 顺便看看:
for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i)
}, 1000)
} // 5 5 5 5 5
console.log(i * 5) // 25
/*------------------------------*/
for (let i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i)
}, 1000)
} // 0 1 2 3 4
console.log(i) // i is not defined
理解执行过程:
- 1. 上一个循环,用 var 声明 i ,每次执行 for 循环(循环是同步任务),都遇到 setTimeout 这个异步任务,于是每次都将这个异步任务放到任务队列当中等待执行(共 5 个)。于是,1000毫秒内,for 已经循环完成,i = 5 , i 是全局变量,先执行同步任务的
console.log(i * 5)
打印出 25 。最后打印任务队列的每个console.log(i)
,打印出 5 5 5 5 5 。 - 2. 下一个循环,用 let 声明变量,和上面一样,不同的是 let 有块级作用域,类似于闭包,每次循环都将相应的变量值保存着了,因此单独运行 for 循环打印出 0 1 2 3 4 。加上
console.log(i)
会报错,上面说了,let 声明的变量有块级作用域,每大括号为一个块级作用域。
不妨看看下面用闭包的方式实现上面过程:
for (var i = 0; i < 5; i++) {
;(function (i) {
setTimeout(function () {
console.log(i) // 2. 再打印 0 1 2 3 4
}, 1000)
})(i)
}
console.log(i * 5) // 1. 先打印 25
相同的,下面也类似,用 var 和 let 不同:
let lis = document.querySelectorAll('li')
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function (e) {
console.log(i)
})
}
// 1. 使用 var 只能打印出 5
// 2. 使用 let 可以正常打印相应的索引
本文来自博客园,作者:RHCHIK,转载请注明原文链接:https://www.cnblogs.com/suihung/p/16255412.html