正文
for循环中的变量泄漏
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
经典的案例
let arr = []
for(var i =0;i<=5;i++){
arr[i]= function fn(){
console.log(i)
}
}
arr[0]() //6
解析：我们的想法是arr[0]的函数应该是打印0的，而且每个元素的函数都能打印出自己的索引才对，可结果出乎意料。实际上为啥是6，我们先逐步分析。
1.js没有块级作用域
for(var i =0;i<=5;i++){
b=3
console.log(i)
}
{var a =1}
console.log('结果：',a,b) //结果： 1 3
也就是说，在大括号中声明的变量在大括号外部能拿到。这些变量是全局变量。
2.函数操作的变量值是函数调用时的而非函数声明时的
var a = 1
var fn = function(){
console.log('a:',a)
}
a=2
fn() //a:2
函数声明时变量a的值是1，声明后a的值变成了2，此时再调用fn函数，取得的a是2.
3.for循环的变量泄漏
let arr = []
for(var i =0;i<=5;i++){
arr[i]= function fn(){
console.log('i',i)
}
}
//实际上此时的arr是，[fn,fn,fn,fn,fn,fn]
console.log('i:',i) //i:6
arr[0]() //i 6
//实际上就是 console.log('i',i),而此时的i变成了6，无论是数组的第几个元素，最终打印的都是6
如果我希望每个元素都是打印它的索引，如何解决这个问题
方案1:闭包
返回一个函数,实际上就是我希望函数里打印的变量时当时循环的i的值,那我就把这个值作为参数传进去.所以,我用函数去返回一个函数
let arr = []
for(var i =0;i<=5;i++){
var fn = function(a){
return function(){
console.log('i',a) //打印的并不是全局变量i,而是实参'i'
}
}
arr[i]= fn(i) //调用的时候,i是当前循环的值
}
arr[0]() //i 0
我们常说闭包可以用来延长变量的使用寿命,实际上就是单独用一个函数作用域去保存外部变量值.
方案2:let和const
let和const声明的变量常被视为块级作用域,即虽然js无块级作用域的说法,但是let 和const的功能可以被视作块级作用域
let arr = []
for(let i =0;i<=5;i++){
arr[i]= function fn(){
console.log('i:',i)
}
}
arr[0]() //i 0
如下:
let arr = []
{let a = 1
arr[0] =function (){
console.log('a:',a)
}}
{let a =2
arr[1] = function(){
console.log('a::',a)
}}
arr[0]() //a: 1
arr[1]() //a:: 2
说明,let声明的变量,在一个大括号里是可以视作独立的存在的。类似块级作用域的效果，如果把let换成var，那就会提升为全局变量，最后被后面的赋值修改。
