在自定义元素构造函数中创建 MutationObserver 导致内存泄漏？

Question

我有一个自定义元素类，它在它的 createdCallback 中创建一个变异观察者。从来没有调用过observer.disconnect()。这会导致内存泄漏吗？如果是这样，您建议如何处理？

这是一个基本的例子：

class SomeElement extends HTMLElement {
    createdCallback() {
        // Observe nodes in the future.
        const observer = new MutationObserver(changes => {
            for (let change of changes) {
                if (change.type != 'childList') continue

                for (let node of change.addedNodes)
                    this.childConnectedCallback(node)

                for (let node of change.removedNodes)
                    this.childDisconnectedCallback(node)
            }
        })
        observer.observe(this, { childList: true })
    }

    childConnectedCallback(node) {
        // ...
    }

    childDisconnectedCallback(node) {
        // ...
    }
}

Answer 1

如果垃圾收集器设计得很好，它就不应该有内存泄漏。当自定义元素本身被删除时，突变观察者将被释放。

无论如何，您始终可以在detachedCallback() 方法中调用observer.disconnect()。在这种情况下，使用this.observer 而不是const observer 来保留引用。