博主信息
Sky
博文
291
粉丝
0
评论
0
访问量
6970
积分:0
P豆:617

【前端】这个js代码怎么内存泄漏了呢??评论解析得越详细越好

2021年10月12日 16:31:48阅读数:99博客 / Sky

请问,下面这段代码怎么导致内存泄漏了呢???各位大神评论解析得越详细越好。
是循环引用导致的,还是闭包导致的?

var user = {name: 'tom', age: 20, gender: 'male'}var test = document.getElementByid('test')
test.onclick = function() {
test.innerHTML = user.name;
}// ...后面还有很多其他操作,最后把user对象释放掉user = null;

还有,就是下面这样写为什么可以减少内存泄漏呢

var user = {name: 'tom', age: 20, gender: 'male'}var test = document.getElementByid('test')
(function (name) {
test.onclick = function() {
test.innerHTML = name;
}
})(user.name);
user = null;

回答

你第一段和第二段程序中引用发生的层级不同,一个是在函数体内用匿名函数完成引用(第一段),一个是在外层引用传值(第二段)。

第一段这个匿名函数一直绑定到onclick上,所以绑定不解除,买QQ账号地图引用就不解除,所以即使后面对象变量已经解除绑定了,但对象实体并不能被销毁回收内存(那块实体内存区域还有引用)。

第二段通过一个全局匿名即时调用函数,把user.name引用的具体字符串内容地址给了局部name变量,这个变量再被onclick引用绑定,而字符串的定义JS中是专门区域的,实际上user.name也仅仅是那个字符串区域的一个引用,所以实际上销毁user仅仅是对原来user.name所指区域进行一次减一次引用操作,而具体的区域并不会被回收,还可以被onclick引用绑定。

第一个里面,user一直被那个onclick指向的匿名函数引用,所以在user = null之后不会被回收
第二个里面,事件处理器里引用的是user.name的值,对user没有引用,所以可以在user = null之后被回收

JavaScript防止内存泄漏最有效的方法:少用对象、变量的引用赋值,建议了解下数据结构方面的知识。


版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论