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

巴特西

for循环中的变量泄漏

最新文章

热门文章