三、三大场景实战：自动回收这样实现

▍场景1：DOM节点关联数据（内存泄漏重灾区）

传统方案风险：

const domDataMap = new Map();  
const button = document.getElementById('btn');  
domDataMap.set(button, { clickCount: 0 });  
// 移除DOM后，Map仍强引用button → 内存泄漏！  
document.body.removeChild(button);  

WeakMap解决方案：

const domDataWeakMap = new WeakMap();  // 弱引用存储  
const button = document.getElementById('btn');  
domDataWeakMap.set(button, { clickCount: 0 });  


// 移除DOM并断开外部引用  
document.body.removeChild(button);  
button = null;  // 触发GC自动清理domDataWeakMap中的条目  

优势：DOM移除后，关联数据自动释放，无需手动维护清理逻辑。

场景2：缓存与私有属性（闭包泄漏克星）

典型问题：用闭包模拟私有属性时，闭包长期持有大对象：

function createClosure() {  
  const bigData = new Array(1000000); // 闭包持有，无法回收  
  return () => console.log('leak!');  
}  
const closure = createClosure(); // 内存持续占用  

WeakMap替代方案：

const privateCache = new WeakMap();  // 弱引用缓存  


class User {  
  constructor(name) {  
    privateCache.set(this, { name }); // 实例为键，私有数据为值  
  }  
  getName() {  
    return privateCache.get(this).name; // 外部无法直接访问  
  }  
}  


// 实例销毁 → 私有数据自动回收  
let user = new User('张三');  
user = null;  // GC回收user，同时清理privateCache中的数据  

优势：避免闭包长期持有数据，对象销毁即释放内存。

场景3：临时标记与循环引用破解

需求背景：

• 标记已处理过的对象（如避免重复动画）

• 解决父子对象循环引用导致GC失效

WeakSet实战：

const processedItems = new WeakSet();  // 弱引用标记  


function startAnimation(element) {  
  if (processedItems.has(element)) return; // 跳过已处理元素  
  processedItems.add(element);  
  // 执行动画...  
}  


// 元素销毁 → 标记自动清除  
element.remove();  
element = null;  

循环引用破解示例：

const weakMap = new WeakMap();  
let parent = {};  
let child = { parentRef: parent };  


// 打破强引用链  
weakMap.set(parent, child);  
parent = null;  // 无其他强引用 → parent和child被GC回收  

优势：对象无外部引用时标记自动失效，杜绝循环引用泄漏。

四、避坑指南：这样用弱引用才靠谱

1.功能限制：

• ❌ 不可遍历（无keys()/size）

• ❌ 键必须是对象（不支持字符串/数字）

  应对：需遍历统计时改用普通Map/Set。

1.堆快照对比（Heap Snapshot）：

操作步骤：

• 打开DevTools → Memory面板 → 点击"Take heap snapshot"

• 执行可能泄漏的操作（如增删列表项）

• 再拍一次快照 → 选择"Comparison"视图

分析重点：

• # New（新增对象数）异常增长

• Size Delta（内存增量）持续为正