javascript - 在 JavaScript 上添加/删除监听器(垃圾收集器)

Question

我有一个关于添加/删除 DOM 对象监听器的快速问题。我想问一下垃圾收集器是否能够在从页面中删除元素时收集内存。

示例:<ul>带有几个 child 列表的标签(<li>)

var ul = document.getElementById('someParent');
var children = ul.children;
var someFunction = function() {};

for(var i = 0; i < children.length; i++) {
  children[i].addEventListener('click', someFunction);
}


// This is where I am not sure, would the garbage collector be able to collect
// the memory allocated on adding listener on children,
// if I remove the ul tag?
ul.remove();

Answer 1

ul.remove(); 行将从 DOM 中删除 ul 元素及其所有子元素。但是只要您引用了这些监听器、li 元素和 ul 元素，事件监听器的内存就不会被释放。您在变量 children、someFunction 和 ul 中拥有它们。

如果你想让垃圾收集器清理所有这些，你可以这样做:

ul.remove();
children = null;
someFunction = null;
ul = null;

这样变量 children 将不会保存对这些元素的引用，如果您的代码中没有任何其他变量保存这些元素的引用，垃圾收集器将收集它们。 someFunction 也是如此。请注意，ul 元素包含对其子元素和监听器的所有引用，因此也必须清除 ul。