各位观众，各位朋友，大家好！我是今天的主讲人，咱们今天不谈风花雪月，就聊聊 JavaScript 里的“弱”关系——WeakMap 和 WeakSet。 别担心，这“弱”可不是指它们能力不行，而是指它们在内存管理方面的一种特殊机制，理解了它，能让你在 JavaScript 的世界里更加游刃有余。
开场白：强引用与垃圾回收的爱恨情仇
在 JavaScript 的世界里，内存管理是个大问题。JavaScript 引擎会定期进行垃圾回收（Garbage Collection, GC），释放不再使用的内存空间。 那么，引擎怎么判断哪些内存“不再使用”了呢？答案是：看有没有“强引用”指向它们。
所谓强引用，就好比你紧紧抓住一个气球的绳子，只要你抓着，气球就不会飞走（被回收）。在 JavaScript 中，一个变量、一个对象的属性，都可能构成强引用。
let obj = { name: '气球' }; // obj 变量强引用着 { name: '气球' } 对象
let anotherObj = obj; // anotherObj 也强引用着同一个对象
obj = null; // obj 不再引用该对象
console.log(anotherObj.name); // 气球 - 另一个引用仍然存在，所以对象没有被回收在这个例子中，即使我们把 obj 设为 null，{ name: '气球' } 对象依然存在，因为 anotherObj 还在引用它。只有当所有指向该对象的强引用都消失的时候，垃圾回收器才会认为这个对象可以被回收了。
问题来了：有时候，我们可能需要“观察”一个对象，但又不想阻止它被回收。比如，我们想给 DOM 元素关联一些数据，但当 DOM 元素从页面上移除后，我们希望与之关联的数据也能自动被回收，而不是一直占用内存。 这时候，就轮到我们的主角 WeakMap 和 WeakSet 登场了。
第一幕：WeakMap——“弱”关系，真朋友
WeakMap 是一种特殊的 Map 结构，它的 key 必须是对象。与普通 Map 的最大区别在于，WeakMap 对 key 是弱引用。
-
弱引用： 就像你用一根很细的线拴住气球，如果气球自己想飞，线很容易断掉，气球就飞走了（被回收）。 也就是说，当
WeakMap的 key 所引用的对象没有其他强引用指向它时，该对象就会被垃圾回收器回收，同时，WeakMap中对应的键值对也会被自动移除。 -
用途：
WeakMap非常适合用于存储与对象相关联的元数据，而又不想阻止对象被回收的情况。 比如：- DOM 元素的元数据： 存储与 DOM 元素关联的数据，当 DOM 元素被移除时，数据也自动被回收。
- 对象私有属性： 模拟对象的私有属性，避免属性名冲突。
- 缓存计算结果： 缓存函数的计算结果，当参数对象被回收时，缓存也自动失效。
让我们看一个例子：
let wm = new WeakMap();
let element = document.createElement('div'); // 创建一个 DOM 元素
wm.set(element, { data: '一些与元素相关的数据' }); // 将数据与 DOM 元素关联
console.log(wm.get(element)); // { data: '一些与元素相关的数据' }
element = null; // 移除 DOM 元素的强引用
// 稍等片刻，垃圾回收器运行后，WeakMap 中的键值对也会被移除
// 此时再访问 wm.get(element) 将返回 undefined
setTimeout(() => {
console.log(wm.get(element)); // undefined (假设垃圾回收器已经运行)
}, 1000);在这个例子中，当 element 被设置为 null 后，DOM 元素就没有强引用指向它了。因此，垃圾回收器可以回收该 DOM 元素，并且 WeakMap 中与之关联的键值对也会被自动移除。
WeakMap 的特性总结
| 特性 | 说明 |
|---|---|
| Key 的类型 | 必须是对象。 |
| 引用类型 | Key 是弱引用。 |
| 用途 | 存储与对象相关联的元数据，而又不想阻止对象被回收。 |
| 可枚举性 | 不可枚举。这意味着你不能使用 for...of 循环、Object.keys() 等方法来遍历 WeakMap。这是因为 WeakMap 的内容随时可能被垃圾回收器移除，所以引擎不提供枚举功能。 |
| 方法 | get(key)、set(key, value)、has(key)、delete(key)。 |
| 优点 | 避免内存泄漏。当 key 所引用的对象被回收时，WeakMap 中对应的键值对也会被自动移除。 |
| 缺点 | 无法获取 WeakMap 的大小。因为 WeakMap 的内容随时可能被垃圾回收器移除，所以引擎不提供获取大小的功能。 |
第二幕：WeakSet——“弱”关系，真朋友（Set 的兄弟）
WeakSet 类似于 Set，但它只能存储对象，并且对对象的引用是弱引用。
-
弱引用： 与
WeakMap类似，当WeakSet中的对象没有其他强引用指向它时，该对象就会被垃圾回收器回收，同时，该对象也会被自动从WeakSet中移除。 -
用途：
WeakSet常用于跟踪哪些对象是“活着的”，或者用于标记对象是否已经“处理”过。 比如：- 对象池： 维护一个对象池，当对象不再被使用时，自动从对象池中移除。
- 对象标记： 标记对象是否已经执行过某个操作，当对象被回收时，标记也自动失效。
让我们看一个例子：
let ws = new WeakSet();
let obj1 = { id: 1 };
let obj2 = { id: 2 };
ws.add(obj1);
ws.add(obj2);
console.log(ws.has(obj1)); // true
console.log(ws.has(obj2)); // true
obj1 = null; // 移除 obj1 的强引用
// 稍等片刻，垃圾回收器运行后，WeakSet 中的 obj1 也会被移除
// 此时再访问 ws.has(obj1) 将返回 false
setTimeout(() => {
console.log(ws.has(obj1)); // false (假设垃圾回收器已经运行)
}, 1000);在这个例子中，当 obj1 被设置为 null 后，obj1 对象就没有强引用指向它了。因此，垃圾回收器可以回收 obj1 对象，并且 WeakSet 中 obj1 也会被自动移除。
WeakSet 的特性总结
| 特性 | 说明 |
|---|---|
| 存储类型 | 只能存储对象。 |
| 引用类型 | 对象的引用是弱引用。 |
| 用途 | 跟踪哪些对象是“活着的”，或者用于标记对象是否已经“处理”过。 |
| 可枚举性 | 不可枚举。这意味着你不能使用 for...of 循环来遍历 WeakSet。这是因为 WeakSet 的内容随时可能被垃圾回收器移除，所以引擎不提供枚举功能。 |
| 方法 | add(value)、has(value)、delete(value)。 |
| 优点 | 避免内存泄漏。当对象被回收时，WeakSet 中对应的对象也会被自动移除。 |
| 缺点 | 无法获取 WeakSet 的大小。因为 WeakSet 的内容随时可能被垃圾回收器移除，所以引擎不提供获取大小的功能。 |
第三幕：实战演练——告别内存泄漏的烦恼
光说不练假把式，咱们来看几个实际的例子，看看 WeakMap 和 WeakSet 是如何帮助我们避免内存泄漏的。
例子 1：DOM 元素的元数据
假设我们有一个复杂的 Web 应用，需要为每个 DOM 元素关联一些自定义的数据。如果使用普通的 Map，当 DOM 元素从页面上移除后，Map 中的键值对依然存在，导致内存泄漏。
// 使用普通 Map 导致的内存泄漏
let dataMap = new Map();
function attachData(element, data) {
dataMap.set(element, data);
}
function removeData(element) {
dataMap.delete(element); // 必须手动删除，否则会内存泄漏
}
// 使用 WeakMap 避免内存泄漏
let weakDataMap = new WeakMap();
function attachWeakData(element, data) {
weakDataMap.set(element, data);
}
// 不需要 removeData 函数，当 element 被回收时，weakDataMap 中的键值对也会自动被移除在这个例子中，使用 WeakMap 后，我们不再需要手动删除与 DOM 元素关联的数据，当 DOM 元素被垃圾回收器回收时，WeakMap 中的键值对也会被自动移除，避免了内存泄漏。
例子 2：对象私有属性
在 JavaScript 中，没有真正的私有属性。通常我们会使用约定俗成的方式（比如属性名以下划线开头）来表示一个属性是私有的。但这种方式并不能阻止外部访问私有属性。
WeakMap 可以用来模拟对象的私有属性。
const _counter = new WeakMap(); // 使用 WeakMap 存储私有属性
class Counter {
constructor() {
_counter.set(this, 0); // 初始化私有属性
}
increment() {
let count = _counter.get(this) || 0;
_counter.set(this, ++count);
}
getCount() {
return _counter.get(this) || 0;
}
}
let counter = new Counter();
counter.increment();
console.log(counter.getCount()); // 1
// 无法直接访问 _counter，实现了私有属性的效果
// console.log(counter._counter); // undefined在这个例子中，我们使用 WeakMap 来存储 Counter 对象的私有属性 _counter。由于 _counter 是 WeakMap 的 key，所以外部无法直接访问 _counter，实现了私有属性的效果。 并且，当 Counter 对象被回收时，WeakMap 中对应的键值对也会被自动移除，避免了内存泄漏。
例子 3：事件监听器的清理
在一个复杂的应用中，我们经常会给DOM元素添加事件监听器。如果这些监听器没有及时清理，可能会导致内存泄漏。 WeakMap 可以用来管理事件监听器，当 DOM 元素被移除时，自动移除与之关联的监听器。
const elementListeners = new WeakMap();
function addListener(element, event, callback) {
if (!elementListeners.has(element)) {
elementListeners.set(element, []);
}
const listeners = elementListeners.get(element);
listeners.push({ event, callback });
element.addEventListener(event, callback);
}
function removeAllListeners(element) {
if (!elementListeners.has(element)) {
return;
}
const listeners = elementListeners.get(element);
listeners.forEach(({ event, callback }) => {
element.removeEventListener(event, callback);
});
elementListeners.delete(element); //可选，因为WeakMap会自动清理
}
// 使用示例
const myElement = document.createElement('div');
addListener(myElement, 'click', () => console.log('Clicked!'));
addListener(myElement, 'mouseover', () => console.log('Mouse over!'));
// 当元素被移除时 (假设 myElement 从DOM中移除)
// 如果没有其他强引用指向 myElement，垃圾回收器将回收它
// 并且 elementListeners 中与 myElement 相关的监听器也会自动被清理第四幕：注意事项——“弱”亦有道
虽然 WeakMap 和 WeakSet 在内存管理方面有很大的优势，但它们也有一些需要注意的地方。
- 不可枚举性：
WeakMap和WeakSet是不可枚举的，这意味着你不能使用for...of循环、Object.keys()等方法来遍历它们。这是因为它们的内容随时可能被垃圾回收器移除，所以引擎不提供枚举功能。 - 无法获取大小：
WeakMap和WeakSet无法获取大小。同样是因为它们的内容随时可能被垃圾回收器移除，所以引擎不提供获取大小的功能。 - Key 必须是对象：
WeakMap的 key 必须是对象，WeakSet只能存储对象。 这限制了它们的使用场景。 - 异步性： 垃圾回收器的运行是不确定的，所以不能保证
WeakMap和WeakSet中的键值对或对象何时被移除。
总结陈词：合理利用，事半功倍
WeakMap 和 WeakSet 是 JavaScript 中非常有用的数据结构，它们通过弱引用的机制，帮助我们避免内存泄漏，提高应用的性能。 虽然它们有一些限制，但只要我们理解它们的特性，合理利用它们，就能在 JavaScript 的世界里更加游刃有余。
希望今天的讲解对大家有所帮助！ 谢谢大家！