JS中 for 循环的变量作用域

探讨JS中因变量作用域引发的常见错误,解析for循环内闭包导致的变量污染问题,及ES5和ES6提供的解决方案。

js中作用域只有函数作用域和全局作用域,在函数体内使用var 定义的变量,会被提到函数开始处进行定义,作用域为整个函数,常见的误区如下:

var a=[];
for(var i = 0;i<10;i++){
    var q = i;
    a[i]=function(){console.log(q)}
}
a[6]()

由于for循环并不是一个函数体,所以for循环中定义的变量q和i是作用域for循环所在的函数体,和a同级,
i++ 和  q=i 并不是重新定义变量,只是重复赋值,最终循环结束,i = 10,q=9;
由于function(){console.log(q)} 并不是立即执行,所以这里的q一直是存储的内存引用,
最终所有的a[i]()都是输出 9

es5解决方法,改为立即执行函数

var a=[];
for(var i = 0;i<10;i++){
    var q = i;
    a[i]=function(){console.log(q)}()
}
a[6]()

es6解决方法,使用 let 来声明。

在es6中新增了let命令声明变量  用法和var类似,不过let所声明的变量,只在let命令所在的代码块有效果,for循环的计数器中就很适合let命令
var a=[];
for(let i = 0;i<10;i++){
    let q = i;
    a[i]=function(){console.log(q)}
}
a[6]()    //这里会输出 6 ,let声明的变量仅在块级作用域有效,所以这里的i只在本轮循环有效果,每次循环的i其实都是一个新的变量

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值