js对象的循环引用

JavaScript015

js对象的循环引用,第1张

1 .当一个对象的属性是自己的时候,使用JSON.stringify或者一般的没有处理的deepClone的时候会发现栈溢出

1 .json序列化的时候,序列化的对象尽量避免循环依赖,子类不定义与父类相同名称的成员,避免定义非成员变量的getter、setter方法

1 .出现循环引用的时候算是bug么?要怎么处理

2 .webpack里面也会有这种情况,循环依赖a-b-c-a

3 .对象存在循环引用的时候,打印不会出现栈溢出,深拷贝的时候,才会的导致栈溢出

1 .定义了引用类型的变量后该变量存的是堆内存的地址,通过地址访问堆内存的数据,从而产生了引用。而基本数据类型定义后存储的是数据值,不需要引用

2 .在js中对两个引用类型使用 === 判断是对两者的地址进行判断

3 .所以判断是否存在循环引用,可以简单定义为对象内部的属性是否和对象本身的地址相同

1 .去除对象中涉及到的循环引用的属性.消除循环引用JSON.decycle方法可以解除循环

2 .将循环引用中的一个对象缓存起来,以避免重复序列化或者创建

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

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

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

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

js如下

<script>

function showCont()

{

var bt=document.getElementById("Play")

var s=document.getElementById("fla")

var f=document.getElementById("show")

if(s.style.display=="")

{

s.style.display="none"

f.style.display=""

bt.innerText="点击缩进全文"

}

else

{

s.style.display=""

f.style.display="none"

bt.innerText="点击展开全文"

}

}

</script>

【引申】:

1. 名叫 div 的变量有一个对 handler 的引用(因为 handler 是它的一个属性)

2. handler 也同样有一个对 div 的引用(因为 div 处于它的作用域内。这是js闭包的特性,函数内的代码可以引用函数外的变量)

3. 这就造成了循环引用,最后两个变量都不会被销毁,成了内存泄露

按照这个说法,像下面这样写代码就不会出现这种内存泄露了。

因为 div 变量不再处于 handler 函数的作用域之中。