JavaScript内核与高级编程之：`WeakMap`和`WeakSet`：如何实现无内存泄漏的缓存与引用。

哟，各位好！欢迎来到今天的“JavaScript 奇巧淫技”专场。今天咱们聊点“弱”的，但威力却很强的——WeakMap和WeakSet。别看名字带个“Weak”，它们可是解决内存泄漏问题的秘密武器。

开场白：垃圾回收的爱恨情仇

在JavaScript的世界里，垃圾回收器（Garbage Collector, GC）就像一个默默无闻的清洁工，勤勤恳恳地回收那些不再使用的内存，让我们的程序可以持续运行，而不会因为内存耗尽而崩溃。

但是，这个清洁工也有个小小的“职业病”，那就是——它需要知道哪些内存还在被使用。如果它认为一块内存“不再需要”了，就会毫不留情地回收掉。问题就出在这里：有时候，我们明明还想用这块内存，但GC却认为它没用了，然后… bye bye了。这就是传说中的内存泄漏。

举个例子，你可能在某个地方缓存了一个DOM元素，但这个DOM元素已经被从页面中移除了。你缓存的这个引用仍然存在，GC就认为这个DOM元素还在被使用，所以它永远不会被回收。时间一长，内存就被这些“僵尸”DOM元素占满了，程序就会越来越慢，最终崩溃。

WeakMap和WeakSet就是为了解决这种问题而生的。它们允许我们创建一种“弱引用”，这种引用不会阻止GC回收被引用的对象。

第一节课：认识一下WeakMap——有情有义的键值对

WeakMap，顾名思义，是一种“弱映射”。它和普通的Map很像，都是用来存储键值对的。但是，WeakMap的键必须是对象，而且是弱引用的对象。

let weakMap = new WeakMap();

let obj = { name: "张三" };

weakMap.set(obj, "张三的信息");

console.log(weakMap.get(obj)); // 输出: 张三的信息

obj = null; // 对象被设置为 null

// 稍后，当垃圾回收器运行时，如果 `obj` 真的没有其他引用了，
// 那么 `weakMap` 中对应的键值对也会被自动删除。

上面的代码里，obj是WeakMap的键。如果我们将obj设置为null，并且没有其他地方引用obj，那么垃圾回收器在下次运行时，就会回收obj占用的内存，并且weakMap中对应的键值对也会被自动删除。

重点来了：WeakMap的键必须是对象

这是WeakMap最重要的一个特性。为什么？因为只有对象才能被垃圾回收器追踪。原始类型（如数字、字符串、布尔值）是不可变的，它们的生命周期不由我们控制，所以不能作为WeakMap的键。

let weakMap = new WeakMap();

// 错误：原始类型不能作为 WeakMap 的键
// weakMap.set("name", "张三"); // 抛出 TypeError

let numberKey = new Number(123);
weakMap.set(numberKey, "数字123"); // 这是可以的，因为 Number 是一个对象。

WeakMap的常用方法

方法	描述
set(key, value)	将给定的键值对添加到 WeakMap 中。
get(key)	返回与给定键关联的值，如果键不存在则返回 undefined。
has(key)	返回一个布尔值，表示 WeakMap 中是否存在与给定键关联的值。
delete(key)	从 WeakMap 中移除与给定键关联的值。

WeakMap的应用场景

• DOM元素的元数据存储

  假设我们需要为每个DOM元素存储一些额外的信息，比如元素的ID、状态等等。我们可以使用WeakMap来存储这些信息，以DOM元素作为键，信息作为值。当DOM元素被移除时，WeakMap中对应的键值对也会被自动删除，避免内存泄漏。

  let elementData = new WeakMap();
  
  let button = document.createElement("button");
  button.textContent = "点击我";
  
  // 为按钮存储一些元数据
  elementData.set(button, { id: "myButton", state: "enabled" });
  
  // 获取按钮的元数据
  console.log(elementData.get(button)); // 输出: { id: "myButton", state: "enabled" }
  
  // 当按钮从DOM中移除时...
  // button.remove();
  
  // 稍后，如果按钮没有其他引用，垃圾回收器会自动回收按钮，
  // 并且 `elementData` 中对应的键值对也会被删除。

• 私有属性的模拟

  在ES6之前，JavaScript没有真正的私有属性。我们可以使用WeakMap来模拟私有属性。将对象的实例作为WeakMap的键，将私有属性存储在WeakMap的值中。这样，只有拥有WeakMap实例的代码才能访问对象的私有属性。

  let _counter = new WeakMap();
  
  class Counter {
    constructor() {
      _counter.set(this, 0); // 初始化私有属性
    }
  
    increment() {
      let count = _counter.get(this);
      _counter.set(this, ++count);
    }
  
    get count() {
      return _counter.get(this);
    }
  }
  
  let counter = new Counter();
  counter.increment();
  console.log(counter.count); // 输出: 1
  
  // 无法直接访问 _counter 中的值
  // console.log(counter._counter); // undefined
  
  // 即使尝试访问 _counter 变量本身，也无法访问到对应的值
  // console.log(_counter.get(counter)); // 仍然可以访问，但这是在 Counter 类的作用域内

  这种方式模拟的私有属性，实际上并不是真正的私有，因为我们仍然可以通过一些技巧（比如使用WeakMap的实例）来访问它们。但是，它可以有效地防止外部代码意外地修改对象的私有属性。

• 数据缓存

  可以使用 WeakMap 来缓存一些计算结果，以提高性能。例如，我们可以缓存某个函数的执行结果，以函数的参数作为键，结果作为值。当函数的参数对应的对象被垃圾回收时，缓存的结果也会被自动删除。

  let cache = new WeakMap();
  
  function expensiveCalculation(obj) {
    if (cache.has(obj)) {
      console.log("从缓存中获取结果");
      return cache.get(obj);
    }
  
    console.log("进行昂贵的计算...");
    let result = obj.value * 2; // 假设这是一个很耗时的计算
    cache.set(obj, result);
    return result;
  }
  
  let obj1 = { value: 10 };
  let obj2 = { value: 20 };
  
  console.log(expensiveCalculation(obj1)); // 进行昂贵的计算... 20
  console.log(expensiveCalculation(obj1)); // 从缓存中获取结果 20
  console.log(expensiveCalculation(obj2)); // 进行昂贵的计算... 40
  console.log(expensiveCalculation(obj2)); // 从缓存中获取结果 40
  
  obj1 = null; // obj1 不再被引用
  
  // 稍后，当垃圾回收器运行时，如果 `obj1` 真的没有其他引用了，
  // 那么 `cache` 中对应的键值对也会被自动删除。

第二节课：WeakSet——对象的“生死簿”

WeakSet和Set很像，都是用来存储一组值的。但是，WeakSet只能存储对象，而且是弱引用的对象。

let weakSet = new WeakSet();

let obj1 = { name: "李四" };
let obj2 = { name: "王五" };

weakSet.add(obj1);
weakSet.add(obj2);

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

obj1 = null; // 对象被设置为 null

// 稍后，当垃圾回收器运行时，如果 `obj1` 真的没有其他引用了，
// 那么 `weakSet` 中对应的对象也会被自动删除。

和WeakMap一样，WeakSet的成员也必须是对象，原因也是因为只有对象才能被垃圾回收器追踪。

WeakSet的常用方法

方法	描述
add(value)	将给定的值添加到 WeakSet 中。
has(value)	返回一个布尔值，表示 WeakSet 中是否存在给定的值。
delete(value)	从 WeakSet 中移除给定的值。

WeakSet的应用场景

• 跟踪对象的生命周期

  我们可以使用WeakSet来跟踪对象的生命周期。当对象被创建时，将其添加到WeakSet中。当对象被垃圾回收时，它会自动从WeakSet中移除。我们可以通过检查WeakSet中是否存在某个对象，来判断该对象是否还存活。

  let aliveObjects = new WeakSet();
  
  class MyObject {
    constructor() {
      aliveObjects.add(this);
      console.log("对象被创建了");
    }
  
    destroy() {
      aliveObjects.delete(this);
      console.log("对象被销毁了");
    }
  
    isAlive() {
      return aliveObjects.has(this);
    }
  }
  
  let obj = new MyObject(); // 对象被创建了
  console.log(obj.isAlive()); // 输出: true
  
  obj.destroy(); // 对象被销毁了
  console.log(obj.isAlive()); // 输出: false
  
  obj = null; // 对象不再被引用
  
  // 稍后，当垃圾回收器运行时，如果 `obj` 真的没有其他引用了，
  // 那么 `aliveObjects` 中对应的对象也会被自动删除。

• 标记对象是否已经被处理

  在某些情况下，我们需要对一组对象进行处理，但又不想重复处理同一个对象。我们可以使用WeakSet来标记对象是否已经被处理。当对象被处理时，将其添加到WeakSet中。在处理下一个对象之前，先检查它是否已经在WeakSet中。

  let processedObjects = new WeakSet();
  
  function processObject(obj) {
    if (processedObjects.has(obj)) {
      console.log("对象已经被处理过了");
      return;
    }
  
    console.log("正在处理对象...");
    // 进行一些处理...
  
    processedObjects.add(obj);
  }
  
  let obj1 = { name: "小明" };
  let obj2 = { name: "小红" };
  
  processObject(obj1); // 正在处理对象...
  processObject(obj1); // 对象已经被处理过了
  processObject(obj2); // 正在处理对象...
  processObject(obj2); // 对象已经被处理过了

第三节课：WeakMap vs Map，WeakSet vs Set：一场公平的对比

特性	Map / Set	WeakMap / WeakSet
键/值类型	Map 的键可以是任何类型的值（原始类型、对象等）。Set 可以存储任何类型的值。	WeakMap 的键必须是对象。WeakSet 只能存储对象。
引用类型	强引用。Map 和 Set 会阻止垃圾回收器回收它们存储的键和值。只要 Map 或 Set 实例存在，其中的键和值就会一直存在于内存中。	弱引用。WeakMap 和 WeakSet 不会阻止垃圾回收器回收它们存储的键和值。当 WeakMap 或 WeakSet 中的键或值没有其他引用时，垃圾回收器会自动回收它们，并且从 WeakMap 或 WeakSet 中移除对应的条目。
方法	拥有完整的 API，包括 size 属性，以及 keys(), values(), entries(), forEach() 等迭代方法。	方法有限。没有 size 属性，也没有迭代方法。只能使用 set(), get(), has(), delete() (对于 WeakMap) 和 add(), has(), delete() (对于 WeakSet) 等基本方法。
用途	用于存储需要长期存在的数据，并且需要能够遍历和操作这些数据的情况。例如，存储用户配置信息、缓存数据、实现复杂的数据结构等。	用于存储与对象生命周期相关的数据，并且不需要遍历这些数据的情况。主要用于解决内存泄漏问题，例如，存储 DOM 元素的元数据、模拟私有属性、跟踪对象是否已经被处理等。
适用场景	当你需要存储和操作大量数据，并且这些数据的生命周期与程序的生命周期相同，或者你需要手动管理数据的生命周期时，使用 Map 和 Set。	当你需要存储与对象的生命周期相关的数据，并且希望垃圾回收器自动管理这些数据的生命周期，避免内存泄漏时，使用 WeakMap 和 WeakSet。

总结：用“弱”的方式，解决“强”的问题

WeakMap和WeakSet是JavaScript中非常实用的工具，它们可以帮助我们避免内存泄漏，编写更健壮的代码。虽然它们的功能相对有限，但它们在特定场景下却能发挥巨大的作用。

• WeakMap： 存储对象的元数据，模拟私有属性，缓存计算结果。
• WeakSet： 跟踪对象的生命周期，标记对象是否已经被处理。

记住，WeakMap和WeakSet的键/值必须是对象，而且是弱引用。这意味着它们不会阻止垃圾回收器回收被引用的对象。

希望今天的课程能帮助大家更好地理解WeakMap和WeakSet。下次再见！