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，那就会提升为全局变量，最后被后面的赋值修改。