阐述 `JS` `WeakMap` 和 `WeakSet` 的弱引用 (`Weak Reference`) 特性，及其在防止内存泄漏中的深层原理。

嘿，大家好！今天咱们来聊聊JavaScript里两个有点儿“神秘”的朋友：WeakMap 和 WeakSet。 别看它们名字里带个 "Weak"（弱），实际上它们在内存管理方面可是高手，能帮咱们避免一些头疼的内存泄漏问题。

讲座大纲：

1. 什么是弱引用？ （给“小白”扫盲）
2. WeakMap 和 WeakSet 的基本用法 （代码演示）
3. 弱引用的深层原理：垃圾回收机制 （揭秘幕后功臣）
4. WeakMap 的应用场景：DOM 元素关联数据、私有变量 （实战演练）
5. WeakSet 的应用场景：对象标记、去重 （灵活运用）
6. WeakMap 和 Map、WeakSet 和 Set 的区别 （划重点）
7. 总结：弱引用，内存管理的“隐形守护者” （画龙点睛）

1. 什么是弱引用？

想象一下，你有一张珍藏的照片，你想把它分享给你的朋友们。 你有两种方式：

• 强引用（Strong Reference）： 你把照片原件送给了朋友。 只要朋友拿着这张照片，它就永远不会消失。 即使你不想让朋友再保留它，你也得亲自去要回来。

• 弱引用（Weak Reference）： 你给朋友发了一张照片的链接（或者给他们看，但不给他们复制）。 朋友可以通过链接看到照片，但照片的命运并不完全掌握在朋友手中。 如果服务器（也就是存放照片的地方）觉得这张照片没啥用了，可以随时删除它，即使朋友还想看，链接也会失效。

在JavaScript里，变量之间的赋值默认都是强引用。 也就是说，只要一个对象被变量引用着，垃圾回收器（Garbage Collector，简称GC）就不会回收它。 而弱引用则不同，即使一个对象被弱引用着，GC仍然可以在适当的时候回收它。

2. WeakMap 和 WeakSet 的基本用法

WeakMap 和 WeakSet 就像它们的“大哥” Map 和 Set 一样，也是用来存储数据的。 但它们有两个关键的区别：

• 键/值（WeakMap）和值（WeakSet）必须是对象。 不能是原始类型（字符串、数字、布尔值等）。
• 它们是弱引用的。 也就是说，如果键（WeakMap）或值（WeakSet）所指向的对象只被它们引用，那么GC就可以回收这个对象。

WeakMap 的用法：

let weakMap = new WeakMap();

let obj1 = {};
let obj2 = {};

weakMap.set(obj1, "这是 obj1 的数据");
weakMap.set(obj2, "这是 obj2 的数据");

console.log(weakMap.get(obj1)); // 输出: 这是 obj1 的数据

obj1 = null; // 解除 obj1 的强引用

// 稍等片刻，让垃圾回收器有时间工作 (实际应用中不建议直接控制GC，这里只是为了演示)
// 模拟垃圾回收过程 (仅用于演示目的，实际JS中无法直接触发GC)
if (typeof global !== 'undefined' && typeof global.gc === 'function') {
    global.gc();
} else {
    console.log("请在Node.js环境下运行此示例以触发垃圾回收。");
}

console.log(weakMap.get(obj1)); // 输出: undefined (obj1 已经被回收)
console.log(weakMap.has(obj2)); // 输出: true (obj2 还存在)

weakMap.delete(obj2);
console.log(weakMap.has(obj2)); // 输出：false

WeakSet 的用法：

let weakSet = new WeakSet();

let obj3 = {};
let obj4 = {};

weakSet.add(obj3);
weakSet.add(obj4);

console.log(weakSet.has(obj3)); // 输出: true

obj3 = null; // 解除 obj3 的强引用

// 稍等片刻，让垃圾回收器有时间工作 (实际应用中不建议直接控制GC，这里只是为了演示)
// 模拟垃圾回收过程 (仅用于演示目的，实际JS中无法直接触发GC)
if (typeof global !== 'undefined' && typeof global.gc === 'function') {
    global.gc();
} else {
    console.log("请在Node.js环境下运行此示例以触发垃圾回收。");
}

console.log(weakSet.has(obj3)); // 输出: false (obj3 已经被回收)
console.log(weakSet.has(obj4)); // 输出: true (obj4 还存在)

weakSet.delete(obj4);
console.log(weakSet.has(obj4)); // 输出：false

重要提示： 你不能像 Map 和 Set 那样，直接遍历 WeakMap 和 WeakSet。 因为你无法确定在遍历的过程中，它们引用的对象是否会被GC回收。 它们只提供 get()、set()、has()、delete() 和 add() 方法。

3. 弱引用的深层原理：垃圾回收机制

要理解 WeakMap 和 WeakSet 的威力，就得先了解JavaScript的垃圾回收机制。 GC的主要任务是找出那些不再被使用的内存，并释放它们，以便程序可以继续使用。

GC 通常使用两种算法：

• 标记-清除（Mark and Sweep）： GC 从根对象（例如全局对象）开始，递归地标记所有可达的对象。 然后，它清除所有未被标记的对象。

• 引用计数（Reference Counting）： 每个对象都有一个引用计数器，记录有多少个变量引用它。 当引用计数器变为 0 时，GC 就会回收这个对象。 但引用计数算法无法解决循环引用的问题（例如，A 引用 B，B 又引用 A）。

现代JavaScript引擎（如V8）通常使用标记-清除算法，并进行了一些优化，例如分代回收。

弱引用在垃圾回收过程中扮演着重要的角色。 当GC扫描到弱引用时，它不会将弱引用指向的对象标记为“可达”。 也就是说，如果一个对象只被弱引用指向，那么它就会被GC回收。

4. WeakMap 的应用场景：DOM 元素关联数据、私有变量

WeakMap 最常见的应用场景是：

• DOM 元素关联数据： 你可能想给DOM元素添加一些额外的数据，但又不想直接修改DOM元素本身（因为这样做可能会导致性能问题）。 你可以使用 WeakMap 来存储这些数据。 当DOM元素被移除时，WeakMap 中对应的数据也会自动被回收，避免内存泄漏。

  let elementData = new WeakMap();
  
  let myButton = document.getElementById("myButton");
  
  elementData.set(myButton, { clicks: 0 });
  
  myButton.addEventListener("click", function() {
    let data = elementData.get(myButton);
    data.clicks++;
    console.log("Button clicked " + data.clicks + " times");
  });
  
  // 当 myButton 被移除时，elementData 中对应的数据也会被回收
  // document.body.removeChild(myButton);

• 模拟私有变量： JavaScript没有真正的私有变量，但你可以使用 WeakMap 来模拟。 你可以将对象的实例作为 WeakMap 的键，将私有数据作为值。 这样，只有拥有 WeakMap 的闭包才能访问这些私有数据。

  let _counter = new WeakMap();
  
  class Counter {
    constructor() {
      _counter.set(this, { value: 0 });
    }
  
    increment() {
      let data = _counter.get(this);
      data.value++;
    }
  
    get value() {
      return _counter.get(this).value;
    }
  }
  
  let myCounter = new Counter();
  myCounter.increment();
  console.log(myCounter.value); // 输出: 1
  
  // 无法直接访问 _counter.get(myCounter)
  // 这样就模拟了私有变量

5. WeakSet 的应用场景：对象标记、去重

WeakSet 的应用场景相对较少，但也有一些巧妙的用法：

• 对象标记： 你可以使用 WeakSet 来标记某个对象是否已经被处理过。 如果对象已经被处理过，就将其添加到 WeakSet 中。 下次再遇到这个对象时，就可以通过 WeakSet.has() 方法来判断是否需要再次处理。

  let processedObjects = new WeakSet();
  
  function processObject(obj) {
    if (processedObjects.has(obj)) {
      console.log("Object already processed");
      return;
    }
  
    // 处理对象的逻辑
    console.log("Processing object");
    processedObjects.add(obj);
  }
  
  let myObject = {};
  processObject(myObject); // 输出: Processing object
  processObject(myObject); // 输出: Object already processed

• 去重： 虽然 Set 也可以用来去重，但 WeakSet 在某些情况下更适合。 例如，你需要去重的是一些DOM元素，当这些DOM元素被移除时，WeakSet 会自动清理掉对应的引用，避免内存泄漏。 但要注意，WeakSet 只能存储对象，不能存储原始类型。

  let uniqueElements = new WeakSet();
  let elements = [document.createElement('div'), document.createElement('div'), document.createElement('div')];
  elements.forEach(el => uniqueElements.add(el));
  
  console.log(uniqueElements.size); //undefined  WeakSet没有size属性
  console.log(uniqueElements.has(elements[0]));//true
  
  elements[0] = null; //解除引用，等待垃圾回收
  
  //模拟垃圾回收
  if (typeof global !== 'undefined' && typeof global.gc === 'function') {
      global.gc();
  } else {
      console.log("请在Node.js环境下运行此示例以触发垃圾回收。");
  }
  
  console.log(uniqueElements.has(elements[0]));//false
  

6. WeakMap 和 Map、WeakSet 和 Set 的区别

为了更好地理解 WeakMap 和 WeakSet，我们来对比一下它们和 Map 和 Set 的区别：

特性	Map	WeakMap	Set	WeakSet
键的类型	任意类型	对象	任意类型	对象
值的类型	任意类型	任意类型	无（只有键）	无（只有值）
引用类型	强引用	弱引用	强引用	弱引用
是否可遍历	是	否	是	否
是否有 size 属性	是	否	是	否
主要用途	存储键值对	存储对象相关数据	存储唯一值	标记对象

7. 总结：弱引用，内存管理的“隐形守护者”

WeakMap 和 WeakSet 的弱引用特性，使它们成为内存管理的“隐形守护者”。 它们可以帮助我们避免一些常见的内存泄漏问题，例如：

• 忘记解除对DOM元素的引用： 当DOM元素被移除时，如果仍然有其他变量引用它，那么它就无法被GC回收。 使用 WeakMap 可以解决这个问题。
• 循环引用： 当两个或多个对象相互引用时，如果没有任何外部变量引用它们，它们仍然无法被GC回收。 使用 WeakMap 和 WeakSet 可以打破循环引用。

虽然 WeakMap 和 WeakSet 的应用场景相对较少，但它们在某些情况下是不可或缺的。 掌握它们，可以让你写出更健壮、更高效的JavaScript代码。

好了，今天的讲座就到这里。 希望大家对 WeakMap 和 WeakSet 有了更深入的了解。 记住，它们是内存管理的好帮手，但也要根据实际情况选择合适的工具。 Happy coding!