题目
for (var i = 0;i < 100;i++) {
setTimeout(() => {
console.log(i);
}, 0);
}
求输出结果。
答案是:100,100,100,100·······
这道题就是涉及到了变量的作用域。因为ES5没有块级作用域,因此for循环中使用var声明的变量i是全局变量,而setTimeout()是一个异步函数,在这里表示在0s后,将console.log(i)加入事件池。然而for中的循环是同步的,因此,同步执行for中的循环,此时i已经变为了100,然后console.log(i)就是100了
改进方法
- 运用闭包
for (var i =0;i < 100;i++) {
(function(i) {
setTimeout(() => {
console.log(i);
}, 0);
})()
}
通过闭包保存i当时的值。
- ES6方法
for (let i = 0;i < 100;i++) {
setTimeout(() => {
console.log(i);
}, 0);
}
通过let声明的变量有了块级作用域,因此,console.log中的i值是当时for循环中的i。ES6也推荐使用let声明变量,有很多好处(块级作用域、暂时性死区等)
就是这样:)