js循环引用引起的内存泄漏示例

JavaScript017

js循环引用引起的内存泄漏示例,第1张

Js中存在和OC同等意义的闭包(block&closure)闭包可看作匿名函数,例如:

函数中 给element的onclick属性赋值了一个闭包,闭包要访问element的id属性。闭包在js中也是对象,函数即对象。闭包会持有外部传入的变量,因此闭包持有了element对象,而element对象通过onclick属性持有了闭包,因此两个对象相互持有,造成内存泄漏。

与OC类比,OC中使用weak对象引用,来解决循环引用的问题,js中也有类似操作,例如:

因为var id是由赋值得到的,js的赋值操作是值或者引用的拷贝,并不持有对象。此时element持有闭包,闭包持有id对象,并未造成循环引用。

我们先来看一个例子

在JS方法里面设置一个for循环,输出每次循环的值,如下图

我们可以根据闭包的知识来更改一下for循环中的逻辑,利用闭包将i的值传递给a

这次在运行程序我们就可以看到输出内容是0开始输出了

结果如下图

JS中如果for循环中有异步方法,就需要用闭包的方式保留当前循环变量值

var result=[]

function foo(){

    var i= 0

    for (i<3i=i+1){

        result[i]=function(){

            alert(i)

        }

    }

}

foo()

result[0]() // 3

result[1]() // 3

result[2]() // 3

这段代码中,程序员希望foo函数中的变量i被内部循环的函数使用,并且能分别获得他们的索引,而实际上,只能获得该变量最后保留的值,也就是说.闭包中所记录的自由变量,只是对这个变量的一个引用,而非变量的值,当这个变量被改变了,闭包里获取到的变量值,也会被改变.

解决的方法之一,是让内部函数在循环创建的时候立即执行,并且捕捉当前的索引值,然后记录在自己的一个本地变量里.然后利用返回函数的方法,重写内部函数,让下一次调用的时候,返回本地变量的值,改进后的代码:

var result=[]

function foo(){

    var i= 0

    for (i<3i=i+1){

        result[i]=(function(j){

            return function(){

                alert(j)

            }

        })(i)

    }

}

foo()

result[0]() // 0

result[1]() // 1

result[2]() // 2