JS Set 怎么配合 WeakSet 存储对象防止泄漏-js教程-PHP中文网

weakset 适合轻量标记（如防重复绑定），对象销毁后标记自动失效；set 适合持久记录，但需手动管理生命周期以防内存泄漏；二者不可混用兜底，应按语义二选一或分层封装。

js set 怎么配合 weakset 存储对象防止泄漏

单纯用 Set 存储对象无法防止内存泄漏，因为它对元素保持强引用；而 WeakSet 的价值在于它不阻止垃圾回收——但两者不能“配合使用”来共同存同一个对象并指望一个兜底、一个持久。关键是要根据数据用途选对结构，而不是混用。

WeakSet 适合标记，Set 适合持久记录

WeakSet 和 Set 解决的是不同问题：

WeakSet：只用来判断“这个对象是否被标记过”，比如“已初始化”“已监听”“正在处理中”。它不存值、不可遍历、无 size，对象一消失，标记自动失效。
Set：当你需要长期持有对象、后续还要枚举、统计、查找或主动清理时才用。但它要求你手动管理生命周期，否则必然泄漏。

典型误用：把 WeakSet 当缓存，再用 Set 做后备

这种设计反而增加复杂度，还可能掩盖问题。例如：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

const weak = new WeakSet();
const strong = new Set();

function track(node) {
  weak.add(node);
  strong.add(node); // ❌ 错误：node 现在被强引用，WeakSet 失去意义
}

只要 strong 还持有该 DOM 节点，哪怕页面已移除它，节点就无法回收——WeakSet 完全失效。

正确做法：按语义二选一，必要时分层设计

如果既要临时标记，又要可查列表，应明确职责分离：

用 WeakSet 做运行时轻量标记（如防重复绑定）
用 Set 存真正需长期维护的句柄（如管理员手动管理的白名单），并配套清理逻辑

若需“自动同步”，可通过封装函数统一控制：

class NodeTracker {
  #weak = new WeakSet();
  #activeList = new Set(); // 只存当前有效的，由业务决定何时 add/remove

  mark(node) {
    if (node && !this.#weak.has(node)) {
      this.#weak.add(node);
      this.#activeList.add(node); // 主动加入，非自动同步
    }
  }

  cleanup() { // 由调用方在合适时机触发，比如路由切换前
    for (const node of this.#activeList) {
      if (!this.#weak.has(node)) { // 表明 node 已不可达
        this.#activeList.delete(node);
      }
    }
  }
}