实例未被垃圾回收

Question

我的情况是这样的，我在本地范围内创建了 class 的实例，这个实例在构造期间分配了一个具有绑定上下文的方法作为事件处理程序。

最小示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Minimal</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">
</head>
<body>
    <a>Hello</a>
    <button>Click</button>
    <script text="javascript">

(function()
{
    class App
    {
        constructor()
        {
            let anchor = document.getElementsByTagName(`a`)[0];
            let anchorHandler = this.sayClicked.bind(this);
            anchor.addEventListener(`click`, anchorHandler, false);
        }

        sayClicked()
        {
            alert(`Clicked`); 
        }
    }

    new App();
})();


    </script>
</body>
</html>

我了解到，在 IIFE 执行后，仅引用 App 实例是具有绑定上下文的事件处理程序。到目前为止一切顺利 Chrome 内存选项卡显示我

我的问题是，删除锚元素后（删除是通过控制台实现的，控制台被删除），Chrome 内存仍然显示内存中的 App 实例。我不明白，我相信只有引用是事件处理程序，根据 this 事件处理程序也应该被删除，这意味着只对 App 实例的引用也应该被删除，所以我期待垃圾收集。在堆快照之前我强制垃圾收集，但是 App 实例仍然存在

在 native_bind() 中的 bound _this 旁边是 window 图标，Chrome 告诉我可以从 window.我试图检查 window 但我无法访问 App 实例。

Answer 1

通过控制台删除锚点和直接通过您的站点删除锚点是有区别的。如果您通过文档删除元素，则该应用程序将不再存在于内存中。 Try this

实例未被垃圾回收

Instance is not garbage collected

javascript

garbage-collection

memory-leaks

google-chrome-devtools