JS `WeakMap` 与 `WeakSet`：弱引用在内存管理中的应用

各位观众，晚上好！ 欢迎来到 “前端弱弱说” 栏目，我是今晚的主讲人，江湖人称“代码界段子手”的程序猿老王。 今天咱们聊聊 JavaScript 里两个容易被忽视，但关键时刻能救你狗命的家伙：WeakMap 和 WeakSet。 别怕，它们的名字听起来高大上，其实用起来特简单，就像你用筷子吃饭一样自然。 咱们先从内存管理这个老生常谈的问题说起。

第一幕：内存，你的钱袋子

想象一下，你的电脑内存就像你的钱袋子，容量有限，装满了就没钱花了（程序崩溃）。 在 JavaScript 里，当我们创建一个对象、数组、函数等等，都会占用一部分内存。 如果这些东西用完之后不及时清理，就会造成内存泄漏，时间长了，你的浏览器或者 Node.js 应用就会变得越来越慢，最后卡死。

JavaScript 有一套垃圾回收机制（Garbage Collection，简称 GC），它会自动识别那些不再使用的内存，然后释放掉。 但是，GC 的工作方式有点像个懒惰的清洁工，它不是随时都在打扫卫生，而是隔一段时间才出来溜达一圈。

第二幕：引用，剪不断理还乱的线

GC 判断一个对象是否需要回收，主要看有没有“引用”指向它。 就像你和你的前女友/前男友，如果还有微信联系，那就算藕断丝连，GC 就不会清理掉你对应的内存。

let obj = { name: "老王" }; // obj 变量引用了这个对象
let anotherObj = obj; // anotherObj 也引用了这个对象

obj = null; // obj 不再引用这个对象

// 此时，anotherObj 仍然引用着这个对象，所以 GC 不会回收它
console.log(anotherObj.name); // 输出 "老王"

在这个例子里，即使 obj 变量被设置为 null，但由于 anotherObj 仍然引用着那个对象，所以 GC 不会回收它。 这就是“强引用”的威力。 强引用就像一条牢固的绳子，把对象紧紧地绑在内存里，除非所有的引用都断了，GC 才会动手。

第三幕：WeakMap，温柔的守护者

现在，隆重介绍我们的第一个主角：WeakMap。 WeakMap 是一种特殊的 Map 结构，它的键（key）必须是对象，而且这些键是“弱引用”的。

什么是弱引用？ 弱引用就像一根细细的线，它指向对象，但不会阻止 GC 回收这个对象。 也就是说，如果一个对象只被 WeakMap 的键引用，而没有其他强引用指向它，那么 GC 就可以毫不犹豫地回收这个对象。

let wm = new WeakMap();
let element = document.getElementById('myElement');

wm.set(element, { data: 'some data related to the element' });

// 当 myElement 从 DOM 中移除后...
// ...如果没有其他引用指向 element，那么 element 就会被 GC 回收
// ...同时，WeakMap 中对应的键值对也会被自动移除

在这个例子里，WeakMap 用来存储和 DOM 元素相关的数据。 当 myElement 从 DOM 中移除后，如果没有任何其他引用指向它，那么 element 对象就会被 GC 回收。 关键是，WeakMap 中对应的键值对也会被自动移除，避免了内存泄漏。

WeakMap 的特点：

特点	描述
键的类型	必须是对象。
键的引用	弱引用。 不会阻止 GC 回收键指向的对象。
自动清理	当键指向的对象被 GC 回收后，WeakMap 中对应的键值对也会被自动移除。
API	只有 set、get、has 和 delete 方法。 没有 size 属性，也没有 forEach 方法，因为无法确定 WeakMap 的大小，也无法遍历它，因为键随时可能被 GC 回收。
应用场景	1. 存储和 DOM 元素相关的数据，当 DOM 元素被移除后，自动清理相关数据，避免内存泄漏。 2. 在对象上存储元数据，而不需要修改对象本身。 例如，你可以用 WeakMap 来存储对象的私有属性，或者缓存计算结果。 3. 解决循环引用问题。

WeakMap 的常见用法：

• 存储 DOM 元素相关的数据：

  let elementData = new WeakMap();
  
  document.querySelectorAll('.my-element').forEach(element => {
    elementData.set(element, {
      isVisible: true,
      position: { x: 10, y: 20 }
    });
  
    element.addEventListener('click', () => {
      let data = elementData.get(element);
      console.log('Element clicked, data:', data);
    });
  });

• 存储对象的私有属性：

  let _counter = new WeakMap();
  
  class Counter {
    constructor() {
      _counter.set(this, 0); // 初始化私有属性
    }
  
    increment() {
      let count = _counter.get(this);
      _counter.set(this, count + 1);
    }
  
    getCount() {
      return _counter.get(this);
    }
  }
  
  let myCounter = new Counter();
  myCounter.increment();
  console.log(myCounter.getCount()); // 输出 1
  
  // 外部无法直接访问 _counter，实现了私有属性的效果

第四幕：WeakSet，忠实的守望者

接下来，让我们欢迎第二位主角：WeakSet。 WeakSet 和 WeakMap 非常相似，它也是一种特殊的 Set 结构，它的元素必须是对象，而且这些元素也是“弱引用”的。

也就是说，如果一个对象只被 WeakSet 包含，而没有其他强引用指向它，那么 GC 也可以回收这个对象，同时 WeakSet 会自动移除这个对象。

let ws = new WeakSet();
let obj = { name: "老王" };

ws.add(obj);

// 当 obj 没有其他引用指向时，GC 会回收 obj
// 同时，WeakSet 会自动移除 obj

WeakSet 的特点：

特点	描述
元素的类型	必须是对象。
元素的引用	弱引用。 不会阻止 GC 回收元素指向的对象。
自动清理	当元素指向的对象被 GC 回收后，WeakSet 会自动移除这个元素。
API	只有 add、has 和 delete 方法。 没有 size 属性，也没有 forEach 方法，原因和 WeakMap 一样。
应用场景	1. 跟踪对象的生命周期。 例如，你可以用 WeakSet 来记录哪些对象已经被创建，但还没有被销毁。 2. 标记对象。 例如，你可以用 WeakSet 来标记哪些对象已经被处理过，避免重复处理。 3. 解决循环引用问题。

WeakSet 的常见用法：

• 跟踪对象的生命周期：

  let processedObjects = new WeakSet();
  
  function processObject(obj) {
    if (processedObjects.has(obj)) {
      console.log('Object already processed.');
      return;
    }
  
    // 处理对象...
    console.log('Processing object:', obj);
  
    processedObjects.add(obj);
  }
  
  let obj1 = { id: 1 };
  let obj2 = { id: 2 };
  
  processObject(obj1); // 输出 "Processing object: {id: 1}"
  processObject(obj1); // 输出 "Object already processed."
  processObject(obj2); // 输出 "Processing object: {id: 2}"

• 标记对象：

  let activeElements = new WeakSet();
  
  function activateElement(element) {
    if (activeElements.has(element)) {
      return; // Already active
    }
  
    // Activate the element
    element.classList.add('active');
    activeElements.add(element);
  }
  
  let element1 = document.getElementById('element1');
  let element2 = document.getElementById('element2');
  
  activateElement(element1);
  activateElement(element1); // No effect, already active
  activateElement(element2);

第五幕：WeakMap vs WeakSet，哥俩好

WeakMap 和 WeakSet 都是用来处理弱引用的，它们的主要区别在于：

• WeakMap 存储的是键值对，键必须是对象，值可以是任意类型。
• WeakSet 存储的是对象，类似于一个只能存储对象的数组，但它不允许存储重复的对象。

你可以把 WeakMap 想象成一个“对象专用字典”，用来存储和对象相关的数据； 而 WeakSet 想象成一个“对象集合”，用来记录哪些对象存在。

第六幕：注意事项，避坑指南

• 由于 WeakMap 和 WeakSet 的键或元素是弱引用，所以无法确定它们的大小，也无法遍历它们。 因此，它们没有 size 属性，也没有 forEach 方法。
• WeakMap 和 WeakSet 的主要目的是为了解决内存泄漏问题，所以它们通常用在一些特殊的场景下，例如和 DOM 元素相关的数据存储、对象的私有属性等。
• 不要滥用 WeakMap 和 WeakSet，在大多数情况下，普通的 Map 和 Set 已经足够满足需求。

第七幕：总结，划重点

• WeakMap 和 WeakSet 是 JavaScript 中用于处理弱引用的数据结构。
• 它们可以用来存储和对象相关的数据，而不会阻止 GC 回收对象，从而避免内存泄漏。
• WeakMap 存储键值对，键必须是对象； WeakSet 存储对象。
• 它们没有 size 属性，也没有 forEach 方法。
• 合理使用 WeakMap 和 WeakSet 可以提高程序的性能和稳定性。

好了，今天的 “前端弱弱说” 就到这里。 希望大家通过今天的学习，能够更好地理解 WeakMap 和 WeakSet 的作用，并在实际开发中灵活运用它们，写出更健壮、更高效的代码。 记住，代码写的溜不溜，细节决定成败！ 下次再见！ 别忘了点赞关注，老王带你飞！