javascript - JS 的循环引用, 原因是什么?

Question

Mozilla 文档上的例子, 这个是在 IE 6,7 里的,
https://developer.mozilla.org/en-US/docs/JavaScript/Memory_Management

var p = document.createElement("p");
p.onclick = function(){
  doSomething();
}; // The p has a reference to the event handler via its 'onclick' property
// The handler also has a reference to the p since the 'p' variable can be accessed within the function scope
// This cycle will cause both objects not to be garbage-collected and thus a memory leak.

这里说的, 函数里有一个对 p 的引用, 可是在哪, 是 this 么?
在 Chrome Firefox 里是否有类似的内存泄漏问题?
这是语言设计的失误么?

Answer 1

这和《Javascript高级程序设计》中函数表达式的一段很像

function assignHandler () {
  var element = document.getElementById('someElement');
  element.onclick = function () {
    alert(element.id);
  };
}

书上描述“由于匿名函数中引用了element，所以element的引用数最少是1，导致占用的内存永远不会被回收。”，把这个就叫内存泄漏。

建议写法

function assignHandler () {
  var element = document.getElementById('someElement');
  var id = element.id;
  element.onclick = function () {
    alert(id);
  };
  element = null;
}

个人觉得内存非常规的占用就应该算作内存泄漏，而不是非得无限增加的内存占用。

Answer 2

那几句英文大概是这个意思：
1. 名叫 p 的变量有一个对 handler 的引用(因为 handler 是它的一个属性)
2. handler 也同样有一个对 p 的引用(因为 p 处于它的作用域内。这是js闭包的特性，函数内的代码可以引用函数外的变量)
3. 这就造成了循环引用，最后两个变量都不会被销毁，成了内存泄露

按照这个说法，像下面这样写代码就不会出现这种内存泄露了。
因为 p 变量不再处于 handler 函数的作用域之中。

var handler = function(){ dosomething(); };
(function(){
  var p = document.createElement("p");
  p.onclick = handler;
})();

不过我也是猜想的，没怎么研究过内存泄露的问题。

Answer 3

这是不是一个长生命周期的对象对一个短生命周期对象持有引用而导致对象无法回收 而内存泄露的问题。 在java里这种类似写法会有内存泄露的问题。

Answer 4

啥叫内存泄露，这几句代码绝逼不会引起内存泄露。。。。。

只是有内存泄露的风险。。。只是在内存里常驻了。。。其实js里很容易写出造成变量在内存里常驻的代码什么的。。写多了都没感觉了，最多多占用几B几KB。。。内存泄露是指不断循环引用，，，造成内存狂飙的那种代码。

写NodeJS的时候就对内存泄露有更多体会了，因为你一个方法可能会在瞬间被无数个请求激活调用，如果代码写的不好很容易就泄露了。。。不过V8也远比我们想象的聪明，它会自动帮我们处理掉一些情况，具体就木有研究过了。

说来说去，其实我也不是很懂，纯扯皮

Answer 5

刚刚特意测试了一下，chrome里无此问题，只要这一堆东西在外部没有引用了，管它内部怎么互相引用，内存都不会增加（被GC了）。