WeakMap 与 WeakSet：当垃圾回收爱上“若即若离”
想象一下，你是一个负责整理房间的“内存管理员”。你的工作是把房间里没用的东西扔掉，腾出空间给新的东西。平常你的工作很简单，看到一个东西没人用了，直接丢掉就好。但是，有一天，你发现房间里多了一些“神秘物品”，它们的存在依赖于其他的东西。如果那些“其他的东西”还在，这些“神秘物品”就还有用，反之，它们也应该被丢掉。
这就是 WeakMap 和 WeakSet 要解决的问题。它们就像内存管理中的“若即若离”的关系，让垃圾回收器在适当的时候，能够优雅地回收那些“神秘物品”，而不会造成内存泄漏。
什么是“弱引用”？ 为什么我们需要它？
在深入 WeakMap 和 WeakSet 之前，我们需要先理解“弱引用”的概念。简单来说，弱引用是一种特殊的引用，它不会阻止垃圾回收器回收对象。这意味着，如果一个对象只被弱引用指向，那么当内存紧张时，垃圾回收器就可以回收这个对象，而不会因为这个弱引用的存在而“手下留情”。
与之相对的是“强引用”，我们平时使用的变量赋值就是强引用。例如：
let obj = { name: "小明" }; // obj 是对对象的强引用
let anotherObj = obj; // anotherObj 也是对对象的强引用
obj = null; // 解除 obj 的强引用
console.log(anotherObj.name); // "小明" - anotherObj 仍然指向该对象，对象不会被回收在这个例子中，即使我们将 obj 设置为 null，对象仍然存在于内存中，因为 anotherObj 仍然持有对它的强引用。只有当所有指向该对象的强引用都被解除时，垃圾回收器才会回收它。
那么，为什么我们需要弱引用呢？ 考虑以下场景：
-
缓存： 你想缓存一些计算结果，以便下次使用时直接读取，而不用重新计算。但是，你不希望这些缓存结果一直占用内存，当内存紧张时，希望能够自动释放这些缓存。
-
对象关联的元数据： 你想给一个对象添加一些额外的属性或信息，但是你不希望这些额外的信息阻止对象被回收。例如，你想记录每个按钮的点击次数，但是你不想因为这个点击次数的记录，导致按钮对象无法被回收。
-
事件监听器： 你在一个对象上注册了一些事件监听器，当对象被销毁时，你希望自动移除这些监听器，避免内存泄漏。
在这些场景中，使用强引用会导致对象无法被回收，从而造成内存泄漏。而弱引用则可以很好地解决这个问题，让垃圾回收器在适当的时候回收对象，释放内存。
WeakMap： 对象与数据的“秘密约定”
WeakMap 是一种特殊的 Map 数据结构，它的键必须是对象，而值可以是任意类型。WeakMap 的关键特性在于，它对键是弱引用的。这意味着，如果键对象不再被其他强引用指向，那么 WeakMap 中的键值对也会被自动移除。
你可以把 WeakMap 想象成一个秘密的笔记本，你可以在上面记录一些关于特定对象的笔记。但是，这个笔记本非常特殊，如果这个对象“消失”了（被垃圾回收器回收了），那么关于它的笔记也会自动消失。
让我们看一个例子：
let element = document.getElementById('myButton');
let elementData = new WeakMap();
elementData.set(element, { clicks: 0 }); // 将点击次数与按钮对象关联
element.addEventListener('click', function() {
let data = elementData.get(element);
data.clicks++;
console.log('Button clicked ' + data.clicks + ' times.');
});
// 当 element 不再被使用时，例如从 DOM 中移除，
// 并且没有其他强引用指向它时，
// elementData 中对应的键值对也会被自动移除。在这个例子中，我们使用 WeakMap 来存储每个按钮的点击次数。当按钮对象从 DOM 中移除，并且没有其他强引用指向它时，WeakMap 中对应的键值对也会被自动移除，从而避免了内存泄漏。
WeakSet： 对象的“朋友圈”
WeakSet 是一种特殊的 Set 数据结构，它只能存储对象，并且对这些对象是弱引用的。这意味着，如果一个对象只存在于 WeakSet 中，而没有其他强引用指向它，那么这个对象也会被垃圾回收器回收，从而自动从 WeakSet 中移除。
你可以把 WeakSet 想象成一个“朋友圈”，你可以在里面添加一些对象。但是，这个朋友圈非常特殊，如果一个对象“消失”了（被垃圾回收器回收了），那么它也会自动从你的朋友圈中消失。
让我们看一个例子：
let activeElements = new WeakSet();
function activateElement(element) {
activeElements.add(element);
// ... 其他操作
}
function deactivateElement(element) {
activeElements.delete(element);
// ... 其他操作
}
// 当 element 不再被使用时，例如从 DOM 中移除，
// 并且没有其他强引用指向它时，
// 它也会自动从 activeElements 中移除。在这个例子中，我们使用 WeakSet 来记录当前活跃的元素。当元素从 DOM 中移除，并且没有其他强引用指向它时，它也会自动从 activeElements 中移除，从而避免了内存泄漏。
WeakMap vs Map, WeakSet vs Set： 区别在哪里？
WeakMap 和 WeakSet 与 Map 和 Set 的主要区别在于：
- 键的类型：
Map的键可以是任意类型，而WeakMap的键必须是对象。Set可以存储任意类型的值，而WeakSet只能存储对象。 - 弱引用：
WeakMap和WeakSet对键/值是弱引用的，而Map和Set对键/值是强引用的。 - 无法遍历： 由于
WeakMap和WeakSet的键/值可能会随时被垃圾回收器回收，因此它们不支持遍历操作，例如forEach，keys，values等。
什么时候应该使用 WeakMap 和 WeakSet？
总的来说，当你想给对象关联一些额外的数据，但是不希望这些数据阻止对象被回收时，就应该使用 WeakMap 和 WeakSet。
WeakMap： 适用于需要将数据与对象关联，并且数据的生命周期依赖于对象的生命周期的场景。例如，缓存对象的相关信息，存储对象的元数据，管理对象的事件监听器等。WeakSet： 适用于需要跟踪一组对象，并且当对象不再被使用时，自动从集合中移除的场景。例如，记录当前活跃的对象，管理对象的权限等。
总结： 拥抱“若即若离”的内存管理
WeakMap 和 WeakSet 是 JavaScript 中非常有用的数据结构，它们通过弱引用的方式，实现了更灵活的内存管理。它们就像内存管理中的“若即若离”的关系，让垃圾回收器在适当的时候，能够优雅地回收那些“神秘物品”，而不会造成内存泄漏。
掌握 WeakMap 和 WeakSet 的使用，可以帮助我们编写更健壮、更高效的代码，避免常见的内存泄漏问题。下次当你需要给对象关联一些额外的数据，并且不希望这些数据阻止对象被回收时，不妨试试 WeakMap 和 WeakSet，你会发现它们是你的好帮手！
最后，记住，内存管理是一门艺术，需要根据具体的场景选择合适的技术。WeakMap 和 WeakSet 只是其中的一部分，希望这篇文章能帮助你更好地理解它们，并在实际开发中灵活运用。 Happy coding!