如何移除JavaScript代码中的循环引用以避免内存泄漏？

问题分析 #

当前代码的循环引用出现在RandomEventLock与ExtensionManager（或其子类RandomEventManager）之间：

• RandomEventLock实例在构造时持有管理器的引用
• 管理器的locks数组持有RandomEventLock实例的引用
  这种双向强引用会导致GC无法正常回收不再使用的实例，在内存受限环境下容易引发问题。另外原代码中remove方法存在逻辑错误，filter结果未赋值回this.locks，无法真正移除元素。

解决方案 #

方案1：让管理器主导锁的生命周期（推荐） #

调整设计，让管理器负责调用锁的任务，并在任务完成后判断是否移除锁。锁不需要持有管理器的引用，彻底切断循环。

修改后的代码：

class ExtensionManager{
    constructor(){
        this.locks = [];
    }

    remove(lock){
        // 修正原方法的逻辑错误
        this.locks = this.locks.filter(l => l !== lock);
    }

    add(lock){
        this.locks.push(lock);
        // 添加后直接触发任务，或者按需调用
        this.processLockTask(lock);
    }

    processLockTask(lock){
        lock.taskWhichMayRequireRemoval()
            .then(shouldRemove => {
                if(shouldRemove){
                    this.remove(lock);
                }
            });
    }
}

class RandomEventManager extends ExtensionManager{
    constructor(){
        super();
    }
}

class RandomEventLock{
    // 构造函数不再需要管理器引用
    constructor(){
        // 初始化锁的自身属性
    }

    // 假设该方法返回Promise，告知是否需要移除
    async taskWhichMayRequireRemoval(){
        // 调用API判断锁状态
        const lockStatus = await fetch('/api/check-lock-status').then(res => res.json());
        // 根据状态返回是否需要移除
        return lockStatus.status === 'unlocked';
    }
}

方案2：使用弱引用（WeakRef） #

如果必须让锁持有管理器的引用，可以使用ES6的WeakRef创建弱引用，弱引用不会阻止GC回收管理器实例。

修改后的代码：

class ExtensionManager{
    constructor(){
        this.locks = [];
    }

    remove(lock){
        this.locks = this.locks.filter(l => l !== lock);
    }

    add(lock){
        this.locks.push(lock);
    }
}

class RandomEventManager extends ExtensionManager{
    constructor(){
        super();
    }
}

class RandomEventLock{
    constructor(manager){
        // 使用WeakRef创建弱引用
        this.managerRef = new WeakRef(manager);
    }

    async taskWhichMayRequireRemoval(){
        const lockStatus = await fetch('/api/check-lock-status').then(res => res.json());
        if(lockStatus.status === 'unlocked'){
            // 取出管理器实例，注意可能已被回收
            const manager = this.managerRef.deref();
            if(manager){
                manager.remove(this);
            }
        }
    }
}

方案3：事件驱动模式 #

让锁在需要移除时触发事件，管理器监听该事件并执行移除操作，锁无需持有管理器引用。

修改后的代码：

class ExtensionManager{
    constructor(){
        this.locks = [];
    }

    remove(lock){
        this.locks = this.locks.filter(l => l !== lock);
    }

    add(lock){
        this.locks.push(lock);
        // 监听锁的移除事件
        lock.addEventListener('needRemove', () => {
            this.remove(lock);
        });
        lock.taskWhichMayRequireRemoval();
    }
}

class RandomEventManager extends ExtensionManager{
    constructor(){
        super();
    }
}

class RandomEventLock extends EventTarget{
    constructor(){
        super();
    }

    async taskWhichMayRequireRemoval(){
        const lockStatus = await fetch('/api/check-lock-status').then(res => res.json());
        if(lockStatus.status === 'unlocked'){
            // 触发移除事件
            this.dispatchEvent(new Event('needRemove'));
        }
    }
}

注意事项 #

• 优先选择方案1，它从设计层面消除了循环引用，逻辑更清晰，也避免了额外的内存消耗
• 使用WeakRef时要注意deref()可能返回undefined，需要做判断处理
• 原代码的remove方法必须修正，否则无法正确移除锁元素

内容的提问来源于stack exchange，提问作者user13020816