JS循环变量超出作用范围
看下列代码
var li = document.querySelectorAll('li');
for(var i = 0; i<10; ++i){
li[i].oncilck=function(){
console.log(i);//无论点击哪个li都会输出10
}
}
为什么会这样?
这是因为,定时器和事件处理函数还有Ajax中回调函数,均属于异步任务
异步任务并不是在主线程中立即执行,而是放到任务队列中,所以如果将异步任务放到for循环中,且异步任务函数中使用了循环变量,当异步任务从任务队列中取出执行后,循环早已完成,循环变量也已经超出理想值,从而造成错误
这时有一个问题,为什么循环变量在循环外也能被访问?看这里.
解决方法
1.使用闭包
var li = document.querySelectorAll('li');
for(var i = 0; i<10; ++i){
(function(i){
li[i].oncilck=function(){
console.log(i);
})(i)
}
}
每次执行循环时,都会将当前的i当作实参传入立即执行函数,此时,最内层事件处理函数中的i并非为for循环中的循环变量i,而是立即执行函数中的参数i(内层函数访问for循环变量时,被立即执行函数的参数顶替,而事件处理函数未触发,则立即执行函数,无法执行完,局部变量就不会注销)
2.使用let声明循环变量
使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特性。
for(let i = 0; i<10; ++i){
}
console.log(i);//not defined
在循环中使用let关键字声明循环变量,可以防止在循坏结束后,依然可以访问