当前位置：首页 > article >正文

创建内存泄漏(js的问题)

article 2024/11/16 6:55:22

如果没有有意识地编写代码来避免内存泄漏，那么内存泄漏几乎是不可避免的JavaScript问题。它们的发生方式有很多种，所以我们只重点介绍几种比较常见的情况。

内存泄漏实例1:对不存在的对象的悬空引用

考虑以下代码:

var theThing = null;
var replaceThing = function () {
  var priorThing = theThing; 
  var unused = function () {
     // 'unused'是'priorThing'被引用的唯一地方。
    // 但'unused'从未被调用过
    if (priorThing) {
      console.log("hi");
    }
  };
  theThing = {
    longStr: new Array(1000000).join('*'),  // 创建一个1MB的对象
    someMethod: function () {
      console.log(someMessage);
    }
  };
};
setInterval(replaceThing, 1000);    // 每秒钟调用一次 "replaceThing"。

如果你运行上述代码并监测内存使用情况，你会发现你有一个明显的内存泄漏，每秒泄漏整整一兆字节！而即使是手动垃圾收集器（GC）也无济于事。因此，看起来我们每次调用 replaceThing 都会泄漏 longStr。但是为什么呢？

每个theThing对象包含它自己的1MB longStr对象。每一秒钟，当我们调用 replaceThing 时，它都会在 priorThing 中保持对先前 theThing 对象的引用。

但是我们仍然认为这不会是一个问题，因为每次通过，先前引用的priorThing将被取消引用（当priorThing通过priorThing = theThing;被重置时）。而且，只在 replaceThing 的主体和unused的函数中被引用，而事实上，从未被使用。

因此，我们又一次想知道为什么这里会有内存泄漏。

为了理解发生了什么，我们需要更好地理解JavaScript的内部工作。实现闭包的典型方式是，每个函数对象都有一个链接到代表其词法作用域的字典式对象。如果在replaceThing里面定义的两个函数实际上都使用了priorThing，那么它们都得到了相同的对象就很重要，即使priorThing被反复赋值，所以两个函数都共享相同的词法环境。但是一旦一个变量被任何闭包使用，它就会在该作用域内所有闭包共享的词法环境中结束。而这个小小的细微差别正是导致这个可怕的内存泄露的原因。

内存泄漏实例2：循环引用

考虑下面代码：

function addClickHandler(element) {
    element.click = function onClick(e) {
        alert("Clicked the " + element.nodeName)
    }
}

这里，onClick有一个闭包，保持对element的引用（通过element.nodeName）。通过将onClick分配给element.click，循环引用被创建；即： element → onClick → element → onClick → element...

有趣的是，即使 element 被从DOM中移除，上面的循环自引用也会阻止 element 和onClick被收集，因此会出现内存泄漏。