分析 JavaScript WeakMap 和 WeakSet 的弱引用 (Weak Reference) 特性如何避免内存泄漏，并比较其与 Map/Set 的异同。

咳咳，各位靓仔靓女，欢迎来到今天的“JavaScript 内存管理之 Weak 家族秘辛”讲座！我是你们的老朋友，今天来和大家聊聊 JavaScript 中那些“弱不禁风”但又至关重要的成员：WeakMap 和 WeakSet。

咱们先来热个身，想想咱们平时用 Map 和 Set 干啥？

Map/Set：强引用，内存中的“钉子户”

Map 和 Set 这哥俩，那是相当的霸道总裁范儿。 只要你在 Map 里放了 key-value，或者在 Set 里放了 value，那这些东西就像被下了“永久居住证”，除非你手动 delete 掉，否则 GC (垃圾回收器) 绝对不敢动它们一根毫毛。 这就是所谓的强引用。

举个栗子：

let obj = { name: '张三' };
let map = new Map();
map.set(obj, '张三的个人信息');

obj = null; // 张三被抛弃了？

console.log(map.get(obj)); // 输出: undefined，但是……
console.log(map.size); // 输出: 1，Map 仍然持有对原始对象的引用！

在这个例子里，即使我们把 obj 设置为 null，看起来好像张三已经不在我们的关注范围了。但是，Map 仍然紧紧地抓着张三的引用不放。 GC 没办法回收张三占用的内存，因为 Map 说了算：“张三还住在我这儿呢！” 这样一来，如果 Map 里的 key 越来越多，而且这些 key 对应的对象不再使用，就会造成内存泄漏。

WeakMap/WeakSet：弱引用，内存中的“过客”

现在，咱们的主角登场了！ WeakMap 和 WeakSet 可就佛系多了。 它们采用的是弱引用。 啥意思呢？ 就是说，如果一个对象只被 WeakMap/WeakSet 引用，而没有其他强引用指向它，那么 GC 就可以毫不犹豫地回收这个对象，而 WeakMap/WeakSet 里的相应条目也会自动消失。

它们就像客栈，客人来了就住，走了就走，客栈不会强留，也不会阻止客人离开。

再举个栗子（这次用 WeakMap）：

let obj = { name: '李四' };
let weakMap = new WeakMap();
weakMap.set(obj, '李四的个人信息');

obj = null; // 李四被抛弃了？

// 等待 GC 运行 (这在实际代码中很难控制，但为了演示，我们假设 GC 运行了)
// 在浏览器中，GC 的时机是不确定的。
// 你可以在控制台中手动触发 GC (例如，在 Chrome 中使用 `window.gc()`)，但这不保证立即执行。

// 此时，如果 obj 已经被 GC 回收，那么 weakMap 中对应的条目也会消失。
// 我们无法直接检查 weakMap 的大小，因为 WeakMap 不允许直接遍历。

// 为了验证，我们可以尝试使用一个闭包来观察对象的回收情况。
function observeObject(obj) {
  let isCollected = false;
  const observer = new FinalizationRegistry(() => {
    isCollected = true;
    console.log('对象已被回收！');
  });
  observer.register(obj, null); // 注册对象以进行观察
  return () => isCollected; // 返回一个函数，用于检查对象是否已被回收
}

let obj2 = { name: '王五' };
let weakMap2 = new WeakMap();
weakMap2.set(obj2, '王五的个人信息');

const isObj2Collected = observeObject(obj2);

obj2 = null;

setTimeout(() => {
  if (isObj2Collected()) {
    console.log('王五已经被回收了，weakMap2 里的条目也消失了！');
  } else {
    console.log('王五还活着呢！weakMap2 里的条目也还在。');
  }
}, 2000); // 延迟 2 秒，给 GC 一些时间运行

在这个例子里，我们使用了 FinalizationRegistry API 来观察对象是否被回收。 FinalizationRegistry 允许你在对象被垃圾回收时收到通知。 当 obj2 被设置为 null 并且 GC 运行后，如果 obj2 真的被回收了，那么 FinalizationRegistry 的回调函数就会被执行，并且 weakMap2 中对应的条目也会消失。

WeakMap/WeakSet 的特性和限制

弱引用听起来很美好，但它也带来了一些限制：

• WeakMap 只能用对象作为 key， WeakSet 只能存储对象。 这是因为只有对象才有可能被 GC 回收。 如果你用原始类型 (number, string, boolean, symbol, null, undefined) 作为 key，那 WeakMap 就失去了存在的意义。
• WeakMap 和 WeakSet 不可迭代。 你不能像 Map 和 Set 那样用 for...of 循环或者 forEach 方法来遍历它们。 这是因为在遍历的过程中，GC 可能会回收一些对象，导致遍历结果不一致。
• WeakMap 和 WeakSet 没有 size 属性。 你也无法知道它们里面有多少个条目，原因同上。

用表格来总结一下 Map/Set 和 WeakMap/WeakSet 的区别：

特性	Map/Set	WeakMap/WeakSet
引用类型	强引用	弱引用
Key 类型	任意类型	对象 (WeakMap) / 对象 (WeakSet)
是否可迭代	是	否
是否有 size 属性	是	否
用途	存储数据，需要遍历	存储对象关联数据，避免内存泄漏

WeakMap/WeakSet 的应用场景

那么，在实际开发中，我们应该在哪些场景下使用 WeakMap 和 WeakSet 呢？

1. 存储 DOM 元素的相关数据

   想象一下，你正在开发一个 UI 组件库。 你需要为每个 DOM 元素存储一些额外的数据 (比如组件的状态、事件监听器等等)。 如果你直接把这些数据挂载到 DOM 元素上，会污染 DOM 元素，而且容易造成命名冲突。 如果用 Map 来存储，又会阻止 DOM 元素被 GC 回收。

   这时候，WeakMap 就派上用场了！ 你可以用 DOM 元素作为 key，把相关数据作为 value 存储在 WeakMap 中。 当 DOM 元素被从页面中移除时，GC 就可以回收它，而 WeakMap 中对应的条目也会自动消失。

   let element = document.getElementById('my-element');
   let elementData = new WeakMap();
   
   elementData.set(element, { state: 'active', eventListeners: [] });
   
   // 当 element 被移除时，weakMap 中对应的条目也会被回收
   element.parentNode.removeChild(element);
   element = null;

2. 存储对象的私有变量

   在 JavaScript 中，没有真正的私有变量。 但是，我们可以用 WeakMap 来模拟私有变量。

   const _privateData = new WeakMap();
   
   class MyClass {
     constructor(name) {
       _privateData.set(this, { name: name });
     }
   
     getName() {
       return _privateData.get(this).name;
     }
   }
   
   let instance = new MyClass('赵六');
   console.log(instance.getName()); // 输出: 赵六
   
   // 无法直接访问 _privateData
   // console.log(instance._privateData); // undefined
   
   instance = null; // instance 被回收，_privateData 中对应的条目也会被回收

   在这个例子里，_privateData 是一个 WeakMap，它以 MyClass 的实例作为 key，以一个包含私有数据的对象作为 value。 由于 _privateData 是定义在闭包中的，所以外部无法直接访问它，从而实现了私有变量的效果。 当 MyClass 的实例被回收时，_privateData 中对应的条目也会自动消失。

3. 缓存计算结果

   有时候，我们需要对一些对象进行复杂的计算，并且希望缓存计算结果，以便下次使用。 但是，如果对象不再使用，我们也不希望缓存结果阻止对象被回收。 这时候，WeakMap 就可以用来存储缓存结果。

   const _cache = new WeakMap();
   
   function expensiveCalculation(obj) {
     if (_cache.has(obj)) {
       console.log('从缓存中获取结果');
       return _cache.get(obj);
     }
   
     console.log('进行昂贵的计算');
     const result = obj.value * 2; // 模拟复杂的计算
     _cache.set(obj, result);
     return result;
   }
   
   let obj1 = { value: 10 };
   console.log(expensiveCalculation(obj1)); // 输出: 进行昂贵的计算  20
   console.log(expensiveCalculation(obj1)); // 输出: 从缓存中获取结果  20
   
   obj1 = null; // obj1 被回收，_cache 中对应的条目也会被回收
   
   // 创建一个新的对象，值相同，但不是同一个对象
   let obj2 = { value: 10 };
   console.log(expensiveCalculation(obj2)); // 输出: 进行昂贵的计算  20，因为 obj2 是一个新的对象，缓存中没有对应的结果

   在这个例子里，_cache 是一个 WeakMap，它以对象作为 key，以计算结果作为 value。 当对象不再使用时，缓存结果也会自动被回收，避免了内存泄漏。

总结

WeakMap 和 WeakSet 是 JavaScript 中非常有用的工具，它们可以帮助我们避免内存泄漏，提高应用程序的性能。 但是，它们也有一些限制，需要根据具体的场景来选择使用。

记住，WeakMap/WeakSet 不是万能的，它们只是内存管理工具箱中的一件利器。 要真正写出健壮的 JavaScript 代码，还需要掌握其他的内存管理技巧，比如避免全局变量、及时释放不再使用的对象等等。

希望今天的讲座能让大家对 WeakMap 和 WeakSet 有更深入的了解。 下次再遇到内存泄漏的问题，不妨试试 Weak 家族的成员，也许它们能给你带来惊喜！

好了，今天的讲座就到这里，大家下课！ 记得回去多练习，熟能生巧哦！