WeakMap 与 WeakSet：弱引用数据结构的内存管理优势与应用场景 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

好的，各位观众老爷，晚上好！我是你们的老朋友，代码界的段子手——Bug终结者（化名）。今天咱们不聊风花雪月，咱们来聊聊JavaScript里两个自带“佛系”光环的数据结构：WeakMap和WeakSet。

什么叫“佛系”？就是它们淡泊名利，不争不抢，默默奉献，尤其是对内存管理这方面，简直是操碎了心。咱们今天就来扒一扒它们“佛系”背后的内存管理优势，以及它们究竟能在哪些场景里发挥作用。

开场白：内存管理，程序员永远的痛

各位，咱们先扪心自问一下，谁没被“内存泄漏”折磨过？就像慢性毒药一样，悄无声息地蚕食着你的程序资源，最后给你来个措手不及的崩溃。想想看，辛辛苦苦写的代码，因为内存泄漏，用户体验差到爆，老板脸色比锅底还黑，这滋味，简直比吃了十斤辣椒还难受啊！🌶️🌶️🌶️

JavaScript作为一门自带垃圾回收机制的语言，按理说应该能自动管理内存，但架不住我们这些“熊孩子”程序员，一不小心就制造出各种“循环引用”之类的幺蛾子，硬生生把垃圾回收器给绕晕了。

这时候，就需要我们的“佛系”英雄出场了——WeakMap和WeakSet。

第一幕：WeakMap——“弱引用”的温柔陷阱

WeakMap，顾名思义，就是“弱弱的Map”。它长得跟Map很像，都是键值对的集合，但它最大的特点就是：它的键（key）必须是对象，而且是弱引用。

什么叫弱引用？简单来说，就是垃圾回收器在判断一个对象是否应该被回收的时候，如果这个对象只被WeakMap的键引用，那么它就可以被回收掉。WeakMap不会阻止垃圾回收器的工作。

你可以把WeakMap想象成一个“备忘录”，它只是记住了某个对象的存在，但不会阻止这个对象被“遗忘”（回收）。

举个栗子：

let obj = { name: '张三' };
let weakMap = new WeakMap();
weakMap.set(obj, '张三的信息');

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

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

// 此时，如果垃圾回收器开始工作，obj指向的对象就可以被回收了，
// 即使weakMap里还存着对它的引用。

// 稍后... (垃圾回收器工作后)
console.log(weakMap.get(obj)); // 输出: undefined

在这个例子中，当我们将obj设置为null后，obj原本指向的对象失去了强引用，如果此时垃圾回收器开始工作，它就会把这个对象回收掉。即使weakMap里还存着对这个对象的引用，也无济于事。这就是弱引用的威力！

表格对比：WeakMap vs Map

特性	WeakMap	Map
键类型	只能是对象	可以是任意类型
引用类型	弱引用	强引用
是否可迭代	不可迭代（无法直接遍历键值对）	可迭代（可以使用`for...of`等方法遍历）
用途	存储与对象关联的元数据，且不阻止对象被回收	存储任意键值对
内存管理	有利于内存管理，避免内存泄漏	可能导致内存泄漏，需要手动管理
适用场景	存储DOM节点关联的数据，缓存计算结果等	存储需要长期保存的数据，建立索引等

WeakMap的应用场景：

DOM节点元数据存储：

想象一下，你正在开发一个复杂的网页应用，需要为每个DOM节点存储一些额外的信息，比如节点的ID、状态等等。如果使用普通的Map，当DOM节点被移除后，Map里仍然存着对它的引用，导致内存泄漏。

而使用WeakMap，就可以避免这个问题。当DOM节点被移除后，WeakMap里对它的引用也会自动失效，垃圾回收器就可以回收这个节点占用的内存。
```
let element = document.getElementById('myElement');
let elementData = new WeakMap();

elementData.set(element, { state: 'active', id: 123 });

// 当element从DOM树中移除后...
// elementData里对element的引用也会自动失效，避免内存泄漏
```

对象私有属性模拟：

在ES6之前，JavaScript没有真正的私有属性。我们可以使用WeakMap来模拟私有属性的效果。

const _counter = new WeakMap();

class Counter {
  constructor() {
    _counter.set(this, 0); // 初始化私有属性
  }

  increment() {
    const currentCount = _counter.get(this);
    _counter.set(this, currentCount + 1);
  }

  getCount() {
    return _counter.get(this);
  }
}

const myCounter = new Counter();
myCounter.increment();
console.log(myCounter.getCount()); // 输出: 1

// 无法直接访问_counter，实现了私有属性的效果

在这个例子中，_counter是一个WeakMap，它以this（Counter实例）为键，存储计数器的值。由于无法直接访问_counter，因此实现了私有属性的效果。而且，当Counter实例被销毁后，WeakMap里对它的引用也会自动失效，避免内存泄漏。

缓存计算结果：

有时候，我们需要对一些对象进行复杂的计算，并且希望缓存计算结果，避免重复计算。如果使用普通的Map，当对象被销毁后，Map里仍然存着对它的引用，导致内存泄漏。

而使用WeakMap，就可以避免这个问题。

const cache = new WeakMap();

function calculate(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 myObj = { value: 10 };
console.log(calculate(myObj)); // 输出: 进行复杂计算, 20
console.log(calculate(myObj)); // 输出: 从缓存中获取结果, 20

myObj = null; // 解除引用

// 当myObj被回收后，cache里对它的引用也会自动失效

第二幕：WeakSet——“弱引用”的集合

WeakSet，顾名思义，就是“弱弱的Set”。它长得跟Set很像，都是不包含重复值的集合，但它最大的特点就是：它只能存储对象，而且是弱引用。

和WeakMap类似，WeakSet也不会阻止垃圾回收器的工作。如果一个对象只被WeakSet引用，那么它就可以被回收掉。

你可以把WeakSet想象成一个“点名册”，它只是记录了某个对象的存在，但不会阻止这个对象被“开除”（回收）。

举个栗子：

let obj1 = { name: '张三' };
let obj2 = { name: '李四' };
let weakSet = new WeakSet();

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

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

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

// 此时，如果垃圾回收器开始工作，obj1指向的对象就可以被回收了，
// 即使weakSet里还存着对它的引用。

// 稍后... (垃圾回收器工作后)
console.log(weakSet.has(obj1)); // 输出: false

在这个例子中，当我们将obj1设置为null后，obj1原本指向的对象失去了强引用，如果此时垃圾回收器开始工作，它就会把这个对象回收掉。即使weakSet里还存着对这个对象的引用，也无济于事。

表格对比：WeakSet vs Set

特性	WeakSet	Set
存储类型	只能是对象	可以是任意类型
引用类型	弱引用	强引用
是否可迭代	不可迭代（无法直接遍历元素）	可迭代（可以使用`for...of`等方法遍历）
用途	存储对象的集合，且不阻止对象被回收	存储任意值的集合
内存管理	有利于内存管理，避免内存泄漏	可能导致内存泄漏，需要手动管理
适用场景	跟踪对象的生命周期，标记对象是否被访问等	存储需要长期保存的值，去重等

WeakSet的应用场景：

对象标记：

可以使用WeakSet来标记某个对象是否被访问过，或者是否属于某个集合。

let visited = new WeakSet();

function visit(obj) {
  if (!visited.has(obj)) {
    console.log('首次访问该对象');
    visited.add(obj);
    // 进行其他操作...
  } else {
    console.log('该对象已被访问过');
  }
}

let obj1 = { name: '张三' };
let obj2 = { name: '李四' };

visit(obj1); // 输出: 首次访问该对象
visit(obj1); // 输出: 该对象已被访问过
visit(obj2); // 输出: 首次访问该对象

obj1 = null; // 解除引用

// 当obj1被回收后，visited里对它的引用也会自动失效

跟踪对象生命周期：

可以使用WeakSet来跟踪对象的生命周期，例如，判断某个对象是否仍然存活。

let aliveObjects = new WeakSet();

class MyObject {
  constructor() {
    aliveObjects.add(this);
  }

  destroy() {
    // 移除对象
    aliveObjects.delete(this);
  }

  isAlive() {
    return aliveObjects.has(this);
  }
}

let obj = new MyObject();
console.log(obj.isAlive()); // 输出: true

obj.destroy();
console.log(obj.isAlive()); // 输出: false

第三幕：WeakMap和WeakSet的局限性

虽然WeakMap和WeakSet在内存管理方面有着独特的优势，但它们也有一些局限性：

不可迭代： 无法直接遍历WeakMap和WeakSet中的键值对或元素。这意味着你不能使用for...of循环或者forEach方法来访问它们的内容。
只能存储对象： WeakMap的键和WeakSet的元素都必须是对象。这意味着你不能使用基本类型（例如字符串、数字、布尔值）作为键或元素。
没有size属性： WeakMap和WeakSet没有size属性，无法直接获取它们的大小。

结论：选择合适的工具，解决内存管理难题

WeakMap和WeakSet是JavaScript中两个非常有用的数据结构，它们通过弱引用的特性，可以有效地避免内存泄漏，提高程序的性能和稳定性。

但是，它们也有一些局限性，需要根据具体的应用场景来选择是否使用。

记住，没有银弹！选择合适的工具，才能更好地解决内存管理难题。

结尾：感谢观看，下次再见！

好了，各位观众老爷，今天的分享就到这里了。希望大家能够对WeakMap和WeakSet有更深入的了解，并在实际开发中灵活运用它们，写出更健壮、更高效的代码。

如果你觉得今天的分享对你有帮助，不妨点个赞、留个言、分享一下，让更多的人受益。

下次再见！ 👋

发表回复 取消回复

发表回复取消回复