JS WeakMap 详细用法从基础到实战指南

// 1. 创建 WeakMap
const wm = new WeakMap();
// 2. 定义对象作为键（原始值不能做键）
let user = { name: "张三" };
let info = { age: 20 };
// 3. set(key, value)：添加键值对
wm.set(user, "用户信息");
wm.set(info, { id: 1001 });
// 4. get(key)：获取值
console.log(wm.get(user)); // 输出：用户信息
// 5. has(key)：判断是否存在
console.log(wm.has(info)); // 输出：true
// 6. delete(key)：删除键值对
wm.delete(info);
console.log(wm.has(info)); // 输出：false

// 报错：Invalid value used as weak map key
wm.set("字符串键", 123); 
wm.set(123, "数值键");

// 1. 使用 Map（强引用）
let obj = { id: 1 };
const map = new Map();
map.set(obj, "数据");
obj = null; // 手动释放引用
// Map 中依然保留 obj，不会被回收 → 内存泄漏
// 2. 使用 WeakMap（弱引用）
let obj2 = { id: 2 };
const weakMap = new WeakMap();
weakMap.set(obj2, "数据");
obj2 = null; // 手动释放引用
// 没有其他引用 → 垃圾回收自动清理 obj2 和 weakMap 中的键值对

const btn = document.querySelector("#btn");
const domData = new WeakMap();
// 给 DOM 绑定数据
domData.set(btn, { clickCount: 0 });
// 使用数据
btn.addEventListener("click", () => {
  const data = domData.get(btn);
  data.clickCount++;
  console.log(data.clickCount);
});
// DOM 被删除时 → WeakMap 自动清理，无内存泄漏
// btn.remove();

const _private = new WeakMap();
class User {
  constructor(name) {
    // 私有数据存在 WeakMap 中
    _private.set(this, { name });
  }
  getName() {
    return _private.get(this).name;
  }
}
const u = new User("李四");
console.log(u.getName()); // 李四
console.log(u.name); // undefined（真正私有）

const cache = new WeakMap();
// 缓存计算结果
function getCachedData(obj) {
  if (cache.has(obj)) {
    return cache.get(obj);
  }
  // 模拟耗时计算
  const result = obj.id * 100;
  cache.set(obj, result);
  return result;
}