DOM node.remove() 不会使 Javascript 变量引用无效。如何解决？

Question

我在 Chromium 控制台中做了这个简单的测试：

var e = document.querySelector('#myElement');
e.remove();

//But here, 'e' still references the original node even though its no longer in the DOM.

我不想要这种行为。我希望 'e' 更像一个弱引用，它会变为 NULL 或 UNDEFINED 或 something 表明节点已被破坏。

我知道问题是由于节点在技术上仍然存在，即使它不再是 DOM 的一部分。我推测它会一直存在，直到浏览器认为合适的时间对其进行垃圾回收。

因此，除了简单地执行 .remove() 之外，是否有一种方法可以真正 destroy/delete 节点，以便所有引用它的变量都将变为未定义或 null 或稍后可以检测到的某些效果？

提前致谢！

另外，我推测这种行为在浏览器之间会有很大差异。因此，也非常欢迎任何提及非 Chromium 浏览器的反馈。 :)

Answer 1

如果一个独立的变量持有一个对象的引用，并且该变量仍然可以被引用，垃圾收集器的 mark-and-sweep 算法将不会拾取该对象，并且该对象将继续存在于至少只要变量仍然可以被引用。

给定一个对象的引用，您不能销毁它以致其他对该对象的引用中断。

不幸的是，

JavaScript 没有提供您正在寻找的那种手动内存控制。

您可以将元素放入 WeakSet 中，然后从 DOM 中删除元素最终会导致元素从 WeakSet 中删除，如果没有其他可能引用该元素 - 但事实并非如此你在找

确实存在WeakRefs，一个非常新的API，它允许对变量进行特殊声明，以便它们引用的内容可以被垃圾收集，尽管他们仍然可以参考：

const ref = (() => {
  const e = document.querySelector('#myElement');
  const ref = new WeakRef(e);
  e.remove();
  return ref;
})();

有了上面的内容，调用 ref.deref() 最终会给你 undefined 如果没有其他东西可以引用该元素并且它已被垃圾收集。（在它被垃圾收集之前，.deref() 会给你元素。）

DOM node.remove() does not invalidate Javascript Variable Reference. How to fix that?