为什么这段代码会导致IE内存泄漏？

Question

我正在阅读online JavaScript tutorial，其中声称以下代码会导致IE早于版本8的内存泄漏。

function setHandler() {
  var elem = document.getElementById('id')
  elem.onclick = function() { /* ... */ }
}

作者还提供了防止内存泄漏的修复程序：

function setHandler() {
  var elem = document.getElementById('id')
  elem.onclick = function() { /* ... */ }
  elem=null;
}

为什么原始代码会导致内存泄漏以及修复如何阻止它？

Answer 1

文章给出了一个很好的解释，问题是IE和循环引用。

这意味着当你这样做时：

function setHandler() { 
  var elem = document.getElementById('id') // (1)
  elem.onclick = function() { /* ... */ } //(2)
}

该函数的第一行是重新引用第二行，第二行引用第一行，这导致IE不释放它为创建elem变量而分配的内存。

您通过明确删除第二个引用来破坏引用，通过“破坏”行中的elem值

elem = null

所以IE可以释放内存

第二个引用发生是因为closure存在问题，onclick中绑定的内部函数可以访问elem（它存在于函数范围内），因此它被“锁定”在那里

换句话说，有两个对elem的引用，一个在var语句中创建，一个在onclick函数中创建，并且在释放闭包之前不会释放该引用。

您可以在here

中找到更多信息here，this stack overflow answer