阐述 `JS` `WeakMap` 和 `WeakSet` 的弱引用 (`Weak Reference`) 特性，及其在防止内存泄漏中的深层原理。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

好的，各位观众老爷们，今天咱们来聊点儿高级货——JS中的WeakMap和WeakSet，以及它们那个“弱引用”的骚操作，看看它们是怎么在暗中保护我们免受内存泄漏之苦的。

开场白：谁动了我的内存？

想象一下，你是个兢兢业业的程序员，每天码代码到深夜，好不容易写出一个功能强大的应用。上线之后，用户反馈说用着用着就卡了，甚至浏览器直接崩溃。你一脸懵逼地打开控制台，发现内存占用蹭蹭往上涨，就像坐了火箭一样。这很可能就是内存泄漏在作祟！

内存泄漏就像水龙头没关紧，一点一滴地浪费着宝贵的内存资源。时间一长，内存就被耗光了，程序自然就崩溃了。

在JavaScript中，内存泄漏的原因有很多，其中一种常见的情况就是无意中保持了对不再需要的对象的引用。这就好比你把垃圾扔进了回收站，但回收站的门却关不紧，垃圾时不时地跑出来，越积越多，最后把你的房间都占满了。

这时候，WeakMap和WeakSet就像两位默默无闻的超级英雄，它们拥有“弱引用”的超能力，可以在关键时刻挺身而出，防止内存泄漏的发生。

第一幕：什么是弱引用？

要理解WeakMap和WeakSet，首先要搞清楚什么是“弱引用”。

在JavaScript中，默认情况下，变量对对象的引用都是强引用。这意味着，只要有一个变量引用着某个对象，这个对象就不会被垃圾回收器回收。即使这个对象已经不再被使用，它也会一直占用着内存。

举个例子：

let obj = { name: "张三" }; // obj 对 { name: "张三" } 的强引用

// ... 一段时间后，我们不再需要 obj 了

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

在这个例子中，只有当我们显式地将 obj 设置为 null 时，才能解除对 { name: "张三" } 的强引用，垃圾回收器才能回收这个对象。如果忘记了这一步，或者在其他地方还有对这个对象的引用，那么这个对象就会一直占用内存，导致内存泄漏。

而弱引用则不同。它不会阻止垃圾回收器回收对象。也就是说，如果一个对象只被弱引用指向，那么当垃圾回收器运行时，这个对象就会被回收，即使弱引用仍然存在。

可以把强引用想象成一根结实的绳子，牢牢地拴住一个气球。而弱引用则是一根脆弱的线，轻轻地连着气球。只要气球本身没有其他东西拴着，风一吹，气球就会飘走（被垃圾回收）。

第二幕：WeakMap——键是弱引用，值是普通引用

WeakMap是一个键值对的集合，它的特别之处在于：

键必须是对象。
键是对对象的弱引用。

这意味着，如果一个对象只被WeakMap的键引用，那么当垃圾回收器运行时，这个对象就会被回收，同时WeakMap中对应的键值对也会被移除。

用表格来总结一下：

特性	`WeakMap`	`Map`
键	对象 (弱引用)	任意类型 (强引用)
值	任意类型 (强引用)	任意类型 (强引用)
迭代	不可迭代 (无法遍历)	可迭代 (可以使用 `for...of` 等方法遍历)
用途	存储与对象关联的元数据，当对象被回收时，元数据也会自动被移除，避免内存泄漏。	存储任意键值对，需要手动管理内存。
内存管理	自动 (依赖于垃圾回收器)	手动
典型应用场景	DOM 元素的元数据存储 (例如：记录某个 DOM 元素是否被点击过)，对象私有属性的实现。	缓存，配置信息存储等。

让我们来看一个例子：

let weakMap = new WeakMap();

let element = document.getElementById("myElement"); //假设页面上有这个元素

weakMap.set(element, { clicked: false }); // 将 DOM 元素作为键，存储一个对象作为值

// ... 一段时间后，DOM 元素被移除

element.parentNode.removeChild(element);
element = null; // 解除对 DOM 元素的强引用

// 此时，由于 DOM 元素只被 weakMap 的键引用，它会被垃圾回收器回收，
// 同时 weakMap 中对应的键值对也会被移除。

在这个例子中，我们使用WeakMap来存储与 DOM 元素关联的元数据。当 DOM 元素被移除后，我们解除了对它的强引用。由于 DOM 元素只被WeakMap的键引用，垃圾回收器会回收这个 DOM 元素，同时WeakMap中对应的键值对也会被移除，从而避免了内存泄漏。

WeakMap 的应用场景：

DOM 元素的元数据存储： 像上面的例子一样，可以用来存储与 DOM 元素相关的状态信息，例如是否被点击过、是否可见等等。当 DOM 元素被移除时，这些状态信息也会自动被清除，避免内存泄漏。
对象私有属性的实现： 可以使用WeakMap来存储对象的私有属性。由于WeakMap的键是弱引用，因此无法从对象外部直接访问私有属性，从而实现了信息的封装。

实现对象私有属性的例子：

const _counter = new WeakMap();

class Counter {
  constructor() {
    _counter.set(this, 0); // 使用 WeakMap 存储私有属性
  }

  increment() {
    let count = _counter.get(this) || 0;
    _counter.set(this, ++count);
  }

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

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

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

在这个例子中，_counter 是一个 WeakMap，它以 Counter 类的实例作为键，以计数器值作为值。由于 _counter 是在 Counter 类内部定义的，并且没有暴露给外部，因此无法从对象外部直接访问计数器值，实现了私有属性的封装。

第三幕：WeakSet——元素是弱引用

WeakSet类似于Set，但它的元素必须是对象，并且是对对象的弱引用。

用表格来总结一下：

特性	`WeakSet`	`Set`
元素	对象 (弱引用)	任意类型 (强引用)
迭代	不可迭代 (无法遍历)	可迭代 (可以使用 `for...of` 等方法遍历)
用途	存储对象的集合，当对象被回收时，会自动从集合中移除，避免内存泄漏。	存储任意值的集合，需要手动管理内存。
内存管理	自动 (依赖于垃圾回收器)	手动
典型应用场景	标记对象是否被处理过，存储对象的集合以便进行特定操作。	存储唯一值的集合，例如用户 ID。

与WeakMap类似，如果一个对象只被WeakSet的元素引用，那么当垃圾回收器运行时，这个对象就会被回收，同时WeakSet中也会移除这个元素。

让我们来看一个例子：

let weakSet = new WeakSet();

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

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

// ... 一段时间后，我们不再需要 obj1 了

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

// 此时，由于 obj1 只被 weakSet 引用，它会被垃圾回收器回收，
// 同时 weakSet 中也会移除 obj1。

在这个例子中，我们使用WeakSet来存储一些对象。当我们不再需要 obj1 时，我们解除了对它的强引用。由于 obj1 只被 WeakSet 引用，垃圾回收器会回收这个对象，同时 WeakSet 中也会移除 obj1，从而避免了内存泄漏。

WeakSet 的应用场景：

标记对象是否被处理过： 可以使用WeakSet来标记对象是否已经被处理过。例如，在事件处理程序中，可以使用WeakSet来记录哪些 DOM 元素已经绑定了事件处理程序，避免重复绑定。
存储对象的集合以便进行特定操作： 可以用来存储一些相关的对象，当这些对象不再被使用时，会自动从集合中移除。

标记对象是否被处理过的例子：

const processedElements = new WeakSet();

function processElement(element) {
  if (processedElements.has(element)) {
    return; // 已经处理过，直接返回
  }

  // 处理元素
  console.log("Processing element:", element);
  processedElements.add(element);
}

let element1 = document.createElement("div");
let element2 = document.createElement("p");

processElement(element1); // 输出 "Processing element: <div>"
processElement(element1); // 不输出任何内容，因为 element1 已经被处理过
processElement(element2); // 输出 "Processing element: <p>"

在这个例子中，processedElements 是一个 WeakSet，它用于存储已经被 processElement 函数处理过的 DOM 元素。当 processElement 函数被调用时，它会首先检查 processedElements 中是否已经存在该元素。如果存在，则直接返回，避免重复处理。否则，处理该元素并将其添加到 processedElements 中。

第四幕：WeakMap 和 WeakSet 的限制

虽然WeakMap和WeakSet很强大，但它们也有一些限制：

不可迭代： WeakMap和WeakSet都不可迭代，也就是说，你不能使用 for...of 循环或者 Object.keys() 等方法来遍历它们。这是因为它们的键（或元素）是弱引用，垃圾回收器可能会随时回收它们，导致遍历结果不确定。
没有 size 属性： WeakMap和WeakSet没有 size 属性，无法直接获取它们的大小。这是因为它们的键（或元素）是弱引用，垃圾回收器可能会随时回收它们，导致大小不确定。
只能存储对象： WeakMap的键和WeakSet的元素都必须是对象。这是因为弱引用只能用于对象，不能用于原始类型的值（例如数字、字符串、布尔值等）。

第五幕：总结与最佳实践

WeakMap和WeakSet是 JavaScript 中非常有用的数据结构，它们通过弱引用的特性，可以有效地防止内存泄漏。

使用 WeakMap 和 WeakSet 的最佳实践：

只在必要时使用： 不要滥用WeakMap和WeakSet。只有在需要存储与对象关联的元数据，并且希望在对象被回收时自动清除这些元数据时，才应该使用它们。
注意使用场景： WeakMap和WeakSet适用于特定的场景。例如，存储 DOM 元素的元数据、实现对象私有属性、标记对象是否被处理过等等。
了解它们的限制： WeakMap和WeakSet不可迭代，没有 size 属性，只能存储对象。在使用它们之前，要充分了解它们的限制。
避免循环引用： 在使用WeakMap和WeakSet时，要注意避免循环引用。例如，如果一个对象既是WeakMap的键，又是WeakMap的值，那么这个对象可能永远不会被回收，导致内存泄漏。

尾声：告别内存泄漏，拥抱美好未来

掌握了WeakMap和WeakSet的弱引用特性，我们就拥有了一件对抗内存泄漏的利器。合理地使用它们，可以让我们写出更健壮、更高效的 JavaScript 代码。

希望今天的讲座能帮助大家更好地理解WeakMap和WeakSet，并在实际开发中灵活运用它们。记住，好的程序员不仅要写出功能强大的代码，还要写出内存友好的代码！

谢谢大家！散会！

发表回复 取消回复

发表回复取消回复