解释 JavaScript WeakMap 和 WeakSet 在实现私有数据、缓存和循环引用检测中的具体应用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位听众，大家好！我是今天的讲师，很高兴能和大家一起聊聊 JavaScript 中两个“神秘”的数据结构：WeakMap 和 WeakSet。别看它们名字里带了个 "Weak"，可一点都不弱，反而能帮我们解决很多实际问题，尤其是那些和内存管理、私有数据、缓存以及循环引用相关的难题。今天咱们就来一场深入浅出的 "Weak" 数据结构之旅，保证让大家听得懂、用得上、还觉得有点意思。

第一站：WeakMap 和 WeakSet 的 "Weak" 之旅 —— 啥叫弱引用？

在开始具体应用之前，我们得先搞明白啥叫 "Weak"。这可是它们的核心特性。

简单来说，"Weak" 指的是弱引用。啥是弱引用呢？你可以把它想象成一种“君子之交淡如水”的关系。

强引用 (Strong Reference): 就像你和你的好基友，彼此紧密相连，你离不开他，他也离不开你。只要你的基友还活着，你就必须记得他。垃圾回收器 (Garbage Collector, GC) 看到这种关系，会说："嘿，这个对象有人在用，不能回收！"
弱引用 (Weak Reference): 就像你和一面之缘的陌生人，认识一下，但仅此而已。你可以记住他，也可以忘记他。 GC 看到这种关系，会说："嗯，这个对象虽然有人引用，但只是弱引用，如果没其他人引用它，该回收还是得回收！"

用代码来说明更直观：

let obj = { name: "小明" }; // obj 是对 { name: "小明" } 的强引用

let weakObj = new WeakRef(obj); // weakObj 现在持有对 obj 的弱引用

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

// 此时，如果没有任何其他地方持有对 { name: "小明" } 的强引用，
// 那么 GC 可能会在未来的某个时刻回收它。
// 注意：我们无法强制 GC 执行，所以不能直接判断是否回收。

//要获得weakRef引用的对象可以使用deref()方法
//const derefObj = weakObj.deref();
//console.log(derefObj);

总结：

特性	强引用	弱引用
对 GC 的影响	阻止 GC 回收被引用的对象	不阻止 GC 回收被引用的对象，如果只有弱引用存在
应用场景	需要确保对象始终存活的场景	需要在对象不再使用时自动释放内存的场景

第二站：WeakMap —— "键" 必须是对象！

WeakMap 和 Map 类似，都是键值对的集合。但它们之间有一个非常重要的区别： WeakMap 的键必须是对象！ 也就是Object类型，包括 Function, Array, 等。

这个限制乍一看有点奇怪，但正是这个限制赋予了 WeakMap 特殊的能力。

WeakMap 的特性：

键必须是对象： 这是最核心的特性，违反这个规则会报错。
弱引用键： WeakMap 对键是弱引用。当键指向的对象没有任何强引用时，GC 就会回收这个对象，同时 WeakMap 中对应的键值对也会被自动移除。
没有 size 属性： 因为 WeakMap 中的键值对可能会随时被 GC 回收，所以它没有 size 属性。
不可迭代： 同样，因为键值对的不确定性，WeakMap 是不可迭代的。你不能用 for...of 循环或者 Object.keys() 等方法来遍历它。
API 简单： 只有 set(key, value)、get(key)、has(key) 和 delete(key) 这几个方法。

WeakMap 的应用场景：

私有数据: 这是 WeakMap 最常见的应用场景。我们可以使用 WeakMap 将对象的私有数据存储起来，防止外部直接访问。

const _counter = new WeakMap();

class Counter {
  constructor() {
    _counter.set(this, 0); // 将实例作为键，初始值为 0 的计数器作为值
  }

  increment() {
    let count = _counter.get(this) || 0; // 获取当前计数器的值
    _counter.set(this, count + 1);      // 更新计数器的值
  }

  getCount() {
    return _counter.get(this) || 0;      // 获取当前计数器的值
  }
}

const counter1 = new Counter();
counter1.increment();
counter1.increment();
console.log(counter1.getCount()); // 输出 2

const counter2 = new Counter();
console.log(counter2.getCount()); // 输出 0

// 无法直接访问 _counter，实现了私有性
//console.log(_counter.get(counter1)); // 报错

在这个例子中，_counter 是一个 WeakMap，它以 Counter 类的实例作为键，以计数器的值作为值。外部代码无法直接访问 _counter，从而实现了私有性。而且，当 counter1 对象被回收时，_counter 中对应的键值对也会被自动移除，防止内存泄漏。

优点：

真正实现了私有性，外部无法访问。
不会造成内存泄漏，当对象被回收时，私有数据也会被自动清理。

缺点：

语法稍微繁琐，需要使用 WeakMap 来存储私有数据。

缓存: WeakMap 也可以用来实现缓存。当我们需要缓存一些计算结果时，可以使用 WeakMap 将对象作为键，将计算结果作为值。

const 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;
}

const obj1 = { value: 10 };
const obj2 = { value: 20 };

console.log(expensiveCalculation(obj1)); // 进行昂贵的计算，输出 20
console.log(expensiveCalculation(obj1)); // 从缓存中获取，输出 20
console.log(expensiveCalculation(obj2)); // 进行昂贵的计算，输出 40

obj1.value = 30;
console.log(expensiveCalculation(obj1)); // 从缓存中获取，输出 20

在这个例子中，cache 是一个 WeakMap，它以对象作为键，以计算结果作为值。当我们再次调用 expensiveCalculation 函数时，如果对象已经在缓存中，就直接从缓存中获取结果，避免重复计算。而且，当对象被回收时，cache 中对应的键值对也会被自动移除，防止缓存过期。

优点：

可以有效地避免重复计算，提高性能。
可以自动清理过期缓存，防止内存泄漏。

缺点：

缓存的键必须是对象，有一定的局限性。

存储 DOM 节点相关数据: 在 Web 开发中，我们经常需要给 DOM 节点关联一些数据，比如事件监听器、状态等等。使用 WeakMap 可以避免内存泄漏。
```
const elementData = new WeakMap();

const myButton = document.getElementById('myButton');

elementData.set(myButton, {
  listeners: [],
  state: 'inactive'
});

// ... 更多操作

// 当 myButton 从 DOM 中移除时，elementData 中对应的键值对也会被自动移除，防止内存泄漏。
```
优点：
- 可以安全地存储 DOM 节点相关数据，避免内存泄漏。
缺点：
- 只能存储对象类型的数据。

第三站：WeakSet —— 只能存储对象！

WeakSet 和 Set 类似，都是存储一组值的集合。但和 Set 不同的是，WeakSet 只能存储对象！

和 WeakMap 类似，这个限制也是为了实现弱引用。

WeakSet 的特性：

只能存储对象： 这是最核心的特性，违反这个规则会报错。
弱引用： WeakSet 对对象是弱引用。当对象没有任何强引用时，GC 就会回收这个对象，同时 WeakSet 中对应的值也会被自动移除。
没有 size 属性： 因为 WeakSet 中的值可能会随时被 GC 回收，所以它没有 size 属性。
不可迭代： 同样，因为值的不确定性，WeakSet 是不可迭代的。你不能用 for...of 循环或者 forEach() 等方法来遍历它。
API 简单： 只有 add(value)、has(value) 和 delete(value) 这几个方法。

WeakSet 的应用场景：

标记对象: WeakSet 可以用来标记对象。比如，我们可以用 WeakSet 来标记哪些对象已经被处理过，或者哪些对象需要被特殊处理。
```
const processedObjects = new WeakSet();

function processObject(obj) {
  if (processedObjects.has(obj)) {
    console.log("对象已经被处理过");
    return;
  }

  console.log("正在处理对象");
  // ... 处理对象的逻辑

  processedObjects.add(obj); // 标记对象已经被处理过
}

const obj1 = { name: "小明" };
const obj2 = { name: "小红" };

processObject(obj1); // 正在处理对象
processObject(obj1); // 对象已经被处理过
processObject(obj2); // 正在处理对象
```
在这个例子中，processedObjects 是一个 WeakSet，它存储了已经被处理过的对象。当我们再次调用 processObject 函数时，如果对象已经在 processedObjects 中，就说明它已经被处理过了，直接跳过。而且，当对象被回收时，processedObjects 中对应的值也会被自动移除，防止内存泄漏。

存储对象集合: WeakSet 可以用来存储一组相关的对象。

const activeElements = new WeakSet();

function activateElement(element) {
  activeElements.add(element);
}

function deactivateElement(element) {
  activeElements.delete(element);
}

function isElementActive(element) {
  return activeElements.has(element);
}

// ...

// 当 element 从 DOM 中移除时，activeElements 中对应的值也会被自动移除，防止内存泄漏。

总的来说，WeakSet 适合存储一组对象，并且这些对象的生命周期不应该由 WeakSet 控制。

第四站：循环引用检测 —— 避免内存泄漏的利器

循环引用是 JavaScript 中常见的内存泄漏原因之一。当两个或多个对象相互引用时，GC 无法回收它们，即使这些对象已经不再使用。

WeakMap 和 WeakSet 可以用来检测循环引用。

function detectCycle(obj) {
  const visited = new WeakSet();

  function dfs(node) {
    if (!node || typeof node !== 'object') {
      return false;
    }

    if (visited.has(node)) {
      return true; // 发现循环引用
    }

    visited.add(node);

    for (let key in node) {
      if (node.hasOwnProperty(key)) {
        if (dfs(node[key])) {
          return true;
        }
      }
    }

    visited.delete(node); // 回溯时移除
    return false;
  }

  return dfs(obj);
}

const a = {};
const b = {};
a.b = b;
b.a = a; // 循环引用

console.log(detectCycle(a)); // true

const c = {};
const d = {};
c.d = d;

console.log(detectCycle(c)); // false

在这个例子中，detectCycle 函数使用 WeakSet visited 来记录已经访问过的对象。如果在深度优先搜索的过程中，再次遇到已经访问过的对象，就说明存在循环引用。

第五站：WeakMap 和 WeakSet 的选择 —— 到底该用哪个？

选择 WeakMap 还是 WeakSet 取决于你的具体需求。

特性	WeakMap	WeakSet
存储内容	键值对，键必须是对象	对象集合，只能存储对象
应用场景	存储对象相关的数据，实现私有数据、缓存等	标记对象、存储对象集合等
适用情况	需要将数据与对象关联时	只需要知道对象是否存在于集合中时

总结：

如果你需要将一些数据与对象关联起来，可以使用 WeakMap。
如果你只需要知道对象是否存在于某个集合中，可以使用 WeakSet。

最后的总结和注意事项：

WeakMap 和 WeakSet 都是弱引用数据结构，可以有效地避免内存泄漏。
WeakMap 的键必须是对象，WeakSet 只能存储对象。
WeakMap 和 WeakSet 都没有 size 属性，也不可迭代。
WeakMap 和 WeakSet 的应用场景包括私有数据、缓存、循环引用检测等。
合理选择 WeakMap 和 WeakSet 可以提高代码的性能和可靠性。

好了，今天的 "Weak" 数据结构之旅就到这里了。希望大家通过今天的讲解，能够对 WeakMap 和 WeakSet 有更深入的理解，并在实际开发中灵活运用它们，写出更高效、更健壮的代码！谢谢大家！

发表回复 取消回复

发表回复取消回复