WeakSet与WeakMap：垃圾回收机制、弱引用与应用场景剖析
大家好，今天我们来深入探讨JavaScript中两个非常有趣的结构：WeakSet和WeakMap。 它们与我们常用的Set和Map非常相似，但其核心区别在于它们与垃圾回收机制的交互方式，这赋予了它们独特的弱引用特性，使其在缓存和内存优化方面具有显著的优势。
1. 强引用与垃圾回收的基石
在我们深入了解WeakSet和WeakMap之前，我们需要先理解JavaScript中的垃圾回收机制以及强引用的概念。
JavaScript使用一种称为"标记清除"（Mark and Sweep）的垃圾回收算法。 这个算法大致分为两个阶段：
- 标记阶段（Marking）： 垃圾回收器从根对象（例如全局对象、调用栈中的变量）开始，递归地遍历所有可访问的对象，并将这些对象标记为"活动"或"可达"。
- 清除阶段（Sweeping）： 垃圾回收器遍历整个堆内存，将所有未被标记为"活动"的对象视为垃圾，并回收它们的内存空间。
强引用是JavaScript中最常见的引用类型。 当一个对象被一个变量或另一个对象的属性引用时，就形成了一个强引用。 只要存在强引用指向一个对象，垃圾回收器就不会回收该对象。
例如：
let obj = { name: "Example" }; // obj对{ name: "Example" } 存在强引用
let anotherObj = obj; // anotherObj也对{ name: "Example" } 存在强引用
obj = null; // obj不再指向该对象，但anotherObj仍然指向它
// 此时，{ name: "Example" } 仍然无法被垃圾回收，因为anotherObj存在强引用在这个例子中，即使我们将obj设置为null，对象{ name: "Example" }仍然无法被垃圾回收，因为anotherObj仍然持有对它的强引用。 只有当所有指向该对象的强引用都消失时，垃圾回收器才能回收该对象。
2. 弱引用的奥秘：WeakSet与WeakMap的核心
WeakSet和WeakMap引入了弱引用的概念。 弱引用是一种不会阻止垃圾回收器回收对象的引用。 换句话说，如果一个对象只被弱引用所引用，那么垃圾回收器仍然可以自由地回收该对象。
2.1 WeakSet：存储对象的集合，不阻止垃圾回收
WeakSet是一种特殊的Set，它只能存储对象，并且对存储的对象持有弱引用。 这意味着，如果WeakSet中存储的某个对象只被WeakSet引用，而没有其他强引用指向它，那么该对象可以被垃圾回收器回收。 一旦对象被回收，WeakSet会自动移除对该对象的引用。
WeakSet具有以下特点：
- 只能存储对象： WeakSet只能存储对象，不能存储原始类型（例如数字、字符串、布尔值）。 如果尝试将原始类型添加到WeakSet中，会抛出TypeError。
- 弱引用： WeakSet对其存储的对象持有弱引用，不阻止垃圾回收。
- 不可迭代： WeakSet不可迭代。 这意味着你不能使用
for...of循环或forEach方法来遍历WeakSet中的元素。 这是因为WeakSet中的对象可能会随时被垃圾回收，因此在迭代过程中可能会出现不一致的情况。 - 没有
size属性： WeakSet没有size属性，你无法直接获取WeakSet中元素的数量。 这是因为WeakSet中的对象可能会随时被垃圾回收，因此size属性的值可能会随时变化。
WeakSet提供了以下方法：
| 方法 | 描述 |
|---|---|
add(value) |
向WeakSet中添加一个对象。 |
delete(value) |
从WeakSet中移除一个对象。 如果该对象存在于WeakSet中，则返回true；否则返回false。 |
has(value) |
检查WeakSet中是否存在一个对象。 如果该对象存在于WeakSet中，则返回true；否则返回false。 |
示例：
let obj1 = { id: 1 };
let obj2 = { id: 2 };
let weakSet = new WeakSet();
weakSet.add(obj1);
weakSet.add(obj2);
console.log(weakSet.has(obj1)); // true
obj1 = null; // obj1不再指向 { id: 1 }
// 稍后，垃圾回收器可能会回收 { id: 1 }，WeakSet会自动移除对它的引用
// 注意：我们无法直接判断 { id: 1 } 是否已经被回收，因为WeakSet不可迭代
// 并且没有size属性。我们只能通过间接的方式来观察。
setTimeout(() => {
console.log(weakSet.has(obj1)); // 可能是 false，也可能是 true，取决于垃圾回收器是否已经回收了 { id: 1 }
}, 2000);2.2 WeakMap：键为对象的映射，键的弱引用
WeakMap是一种特殊的Map，它的键必须是对象，并且对键持有弱引用。 这意味着，如果WeakMap中的某个键只被WeakMap引用，而没有其他强引用指向它，那么该键可以被垃圾回收器回收。 一旦键被回收，WeakMap会自动移除该键值对。
WeakMap具有以下特点：
- 键必须是对象： WeakMap的键必须是对象，不能是原始类型。 如果尝试使用原始类型作为键，会抛出TypeError。
- 键的弱引用： WeakMap对其键持有弱引用，不阻止垃圾回收。
- 不可迭代： WeakMap不可迭代。 这意味着你不能使用
for...of循环或forEach方法来遍历WeakMap中的键或值。 - 没有
size属性： WeakMap没有size属性，你无法直接获取WeakMap中键值对的数量。
WeakMap提供了以下方法：
| 方法 | 描述 |
|---|---|
set(key, value) |
向WeakMap中添加一个键值对，其中key必须是对象。 |
get(key) |
返回与指定键关联的值。 如果该键不存在于WeakMap中，则返回undefined。 |
delete(key) |
从WeakMap中移除一个键值对。 如果该键存在于WeakMap中，则返回true；否则返回false。 |
has(key) |
检查WeakMap中是否存在一个键。 如果该键存在于WeakMap中，则返回true；否则返回false。 |
示例：
let key1 = { id: 1 };
let key2 = { id: 2 };
let value1 = "Value 1";
let value2 = "Value 2";
let weakMap = new WeakMap();
weakMap.set(key1, value1);
weakMap.set(key2, value2);
console.log(weakMap.get(key1)); // Value 1
key1 = null; // key1不再指向 { id: 1 }
// 稍后，垃圾回收器可能会回收 { id: 1 }，WeakMap会自动移除该键值对
// 注意：我们无法直接判断 { id: 1 } 是否已经被回收，因为WeakMap不可迭代
// 并且没有size属性。我们只能通过间接的方式来观察。
setTimeout(() => {
console.log(weakMap.get(key1)); // 可能是 undefined，也可能是 "Value 1"，取决于垃圾回收器是否已经回收了 { id: 1 }
}, 2000);3. WeakSet和WeakMap的应用场景：缓存与内存优化
WeakSet和WeakMap的弱引用特性使其在缓存和内存优化方面具有独特的优势。
3.1 使用WeakMap进行私有属性管理
在JavaScript中，虽然没有真正的私有属性，但我们可以使用WeakMap来模拟私有属性的行为。 我们可以将对象本身作为WeakMap的键，将私有属性存储为WeakMap的值。 这样，只有持有对象引用的代码才能访问这些私有属性，而外部代码无法直接访问。 当对象被垃圾回收时，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);
}
}
let counter = new Counter();
counter.increment();
console.log(counter.getCount()); // 1
// 外部代码无法直接访问 _counter
// console.log(_counter.get(counter)); // undefined
counter = null; // counter不再指向 Counter实例
// 稍后，垃圾回收器可能会回收 Counter实例，WeakMap会自动移除对它的引用在这个例子中，_counter是一个WeakMap，它将Counter类的实例作为键，将计数器的值作为值。 只有Counter类的方法才能访问_counter，而外部代码无法直接访问。 当counter变量被设置为null时，Counter实例可以被垃圾回收，并且_counter会自动移除对该实例的引用，从而避免内存泄漏。
3.2 使用WeakMap进行DOM元素关联数据存储
在Web开发中，我们经常需要将一些数据与DOM元素关联起来。 例如，我们可能需要存储一个DOM元素的事件处理函数，或者存储一些与DOM元素相关的配置信息。 使用WeakMap可以将DOM元素作为键，将相关的数据存储为值。 当DOM元素从文档中移除时，垃圾回收器可以回收该DOM元素，并且WeakMap会自动移除对该DOM元素的引用，从而避免内存泄漏。
const elementData = new WeakMap();
function attachData(element, data) {
elementData.set(element, data);
}
function getData(element) {
return elementData.get(element);
}
// 示例
let myDiv = document.createElement('div');
attachData(myDiv, { name: "My Div", id: 123 });
console.log(getData(myDiv)); // { name: "My Div", id: 123 }
myDiv.parentNode.removeChild(myDiv); // 将 myDiv 从 DOM 树中移除
myDiv = null; // myDiv不再指向该DOM元素
// 稍后，垃圾回收器可能会回收该DOM元素，WeakMap会自动移除对它的引用在这个例子中，elementData是一个WeakMap，它将DOM元素作为键，将相关的数据存储为值。 当myDiv元素从DOM树中移除并设置为null时，该DOM元素可以被垃圾回收，并且elementData会自动移除对该DOM元素的引用，从而避免内存泄漏。 如果使用普通的Map，即使DOM元素被移除，Map仍然会持有对该DOM元素的强引用，导致内存泄漏。
3.3 对象标记与WeakSet的妙用
WeakSet可以用来标记已经处理过的对象，而不会阻止这些对象被垃圾回收。 这在循环引用或者需要跟踪对象状态的场景下非常有用。 比如，我们可以使用WeakSet来防止重复处理同一个对象。
let processedObjects = new WeakSet();
function processObject(obj) {
if (processedObjects.has(obj)) {
console.log("Object already processed.");
return;
}
console.log("Processing object:", obj);
processedObjects.add(obj);
// ... 对对象进行处理的逻辑 ...
}
let objA = { id: "A" };
let objB = { id: "B" };
processObject(objA); // Processing object: { id: 'A' }
processObject(objA); // Object already processed.
processObject(objB); // Processing object: { id: 'B' }
objA = null; // objA不再指向该对象
// 稍后，objA指向的对象可以被垃圾回收，WeakSet会自动移除对它的引用在这个例子中，processedObjects是一个WeakSet，用于存储已经处理过的对象。 processObject函数首先检查对象是否已经被处理过，如果是，则直接返回；否则，对对象进行处理，并将对象添加到processedObjects中。 由于processedObjects持有对对象的弱引用，因此不会阻止对象被垃圾回收。
3.4 实现基于对象的缓存机制
WeakMap非常适合实现基于对象的缓存机制。 我们可以将对象作为键，将计算结果作为值存储在WeakMap中。 当对象被垃圾回收时，缓存也会自动失效，从而避免缓存过期的问题。
const cache = new WeakMap();
function expensiveCalculation(obj) {
if (cache.has(obj)) {
console.log("Fetching from cache.");
return cache.get(obj);
}
console.log("Calculating...");
// 模拟一个耗时的计算
const result = obj.id * 2;
cache.set(obj, result);
return result;
}
let objC = { id: 3 };
let objD = { id: 4 };
console.log(expensiveCalculation(objC)); // Calculating... 6
console.log(expensiveCalculation(objC)); // Fetching from cache. 6
console.log(expensiveCalculation(objD)); // Calculating... 8
objC = null; // objC不再指向该对象
// 稍后，objC指向的对象可以被垃圾回收，WeakMap会自动移除对它的引用，缓存失效在这个例子中，cache是一个WeakMap，用于存储计算结果。 expensiveCalculation函数首先检查缓存中是否存在该对象的结果，如果是，则直接从缓存中获取；否则，进行计算，并将结果存储到缓存中。 由于cache持有对对象的弱引用，因此当对象被垃圾回收时，缓存也会自动失效。
4. WeakSet和WeakMap的局限性与注意事项
尽管WeakSet和WeakMap在缓存和内存优化方面具有显著的优势，但它们也存在一些局限性：
- 不可枚举： WeakSet和WeakMap不可枚举，无法遍历其内容。 这使得它们不适合用于需要遍历所有元素的场景。
- 只能存储对象（WeakSet）/键必须是对象（WeakMap）： WeakSet只能存储对象，WeakMap的键必须是对象，不能存储原始类型。 这限制了它们的使用范围。
- 依赖垃圾回收机制： WeakSet和WeakMap的行为依赖于垃圾回收机制。 垃圾回收的时机是不确定的，因此无法精确控制何时从WeakSet和WeakMap中移除元素。
- 调试困难： 由于WeakSet和WeakMap不可枚举，且元素可能随时被垃圾回收，因此调试起来比较困难。
在使用WeakSet和WeakMap时，需要注意以下事项：
- 只在必要时使用： WeakSet和WeakMap的性能可能不如普通的Set和Map，因此只在需要弱引用特性时才使用它们。
- 避免过度依赖垃圾回收： 不要过度依赖垃圾回收来管理内存。 应该尽量避免创建不必要的对象，并及时释放不再使用的对象。
- 理解垃圾回收机制： 深入理解垃圾回收机制有助于更好地使用WeakSet和WeakMap，避免潜在的内存泄漏问题。
5. 总结与最佳实践
WeakSet和WeakMap是JavaScript中非常有用的数据结构，它们通过弱引用特性，在缓存管理、内存优化等方面提供了强大的能力。 理解它们的弱引用特性、局限性以及适用场景，可以帮助我们编写更高效、更健壮的代码。
记住，使用WeakSet和WeakMap的关键在于理解JavaScript的垃圾回收机制，并在合适的情况下利用它们的弱引用特性来避免内存泄漏，提高性能。 在需要对象级别的缓存、私有数据存储或对象标记时，WeakSet和WeakMap将是你的得力助手。