当前位置：首页 > news >正文

WeakSet：JavaScript 中容易被忽视的“弱集合”

news 来源：原创 2025/4/25 13:22:57

WeakSet 详解

基本概念

创建 WeakSet

WeakSet 的主要方法

WeakSet 的特性

WeakSet 的使用场景

1. 避免内存泄漏（DOM 元素管理）

2. 临时缓存系统

3. 私有属性模拟

4. 防止循环引用

与其他数据结构的对比

1. WeakSet 没有实例属性

2. WeakSet 仅有的方法

3. 原型链属性

WeakSet 注意事项

WeakSet 最佳实践建议

完整HTML示例代码

WeakSet 详解

WeakSet 是 JavaScript 中的一种集合类型，与普通的 Set 类似，但有一些重要的区别。下面我将详细讲解 WeakSet 的特性、用法以及与 Set 的区别

基本概念

WeakSet 是一种特殊的集合，它只能存储对象引用，不能存储原始值（如数字、字符串、布尔值等）。与 Set 不同，WeakSet 中的对象是弱引用的，这意味着如果没有其他引用指向这些对象，它们可以被垃圾回收机制自动回收。

创建 WeakSet

const weakSet = new WeakSet();const obj1 = {};
const obj2 = {};// 添加对象到 WeakSet
weakSet.add(obj1);
weakSet.add(obj2);console.log(weakSet.has(obj1)); // true

WeakSet 的主要方法

add(value): 向 WeakSet 添加一个对象
delete(value): 从 WeakSet 中移除指定的对象
has(value): 检查 WeakSet 中是否包含指定的对象

注意：WeakSet 没有 size 属性，也没有 clear() 方法，也不能被遍历（没有 forEach、keys、values 等方法）

WeakSet 的特性

1.只能存储对象引用

const weakSet = new WeakSet();
weakSet.add(1); // TypeError: Invalid value used in weak set
weakSet.add("string"); // TypeError: Invalid value used in weak set

2.弱引用特性

如果 WeakSet 中的对象没有其他引用，它会被垃圾回收
这使得 WeakSet 适合用于存储临时对象或私有数据

3.不可枚举

无法获取 WeakSet 中的所有值
没有 size 属性，无法知道集合中有多少元素

WeakSet 的使用场景

1. 避免内存泄漏（DOM 元素管理）

场景：跟踪 DOM 元素是否被处理过

const processedElements = new WeakSet();document.querySelectorAll(".btn").forEach(btn => {processedElements.add(btn);btn.addEventListener("click", () => {if (processedElements.has(btn)) {// 确保只处理一次}});
});// 当 DOM 元素被移除时，WeakSet 自动清理引用

2. 临时缓存系统

场景：缓存计算结果，当对象不再使用时自动失效

const cache = new WeakSet();function heavyCalculation(obj) {if (cache.has(obj)) {return "结果来自缓存";}const result = /* 复杂计算 */;cache.add(obj);return "结果来自计算";
}

3. 私有属性模拟

场景：标记对象是否已初始化（ES6 Class）

const initialized = new WeakSet();class SecureAPI {constructor() {initialized.add(this);}fetchData() {if (!initialized.has(this)) {throw new Error("必须先初始化实例");}// 安全执行逻辑}
}

4. 防止循环引用

场景：深度拷贝时记录已处理对象

function deepClone(obj, visited = new WeakSet()) {if (typeof obj !== "object" || obj === null) return obj;if (visited.has(obj)) return null; // 避免循环引用visited.add(obj);// 继续克隆逻辑...
}