WeakMap 和 WeakSet：解决内存泄漏&避免循环引用(上)

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

一、引言

介绍WeakMap 和 WeakSet 的背景和用途

以下是WeakMap和WeakSet的背景和用途介绍：

WeakMap类似于Map，但是键只能是对象类型，且键名所指向的对象是弱引用，这意味着如果这个对象在其他地方没有被引用，那么它将会被垃圾回收，这也是WeakMap的主要应用场景。

WeakSet类似于Set，但成员只能是对象类型，且成员对象是弱引用，这意味着如果这个对象在其他地方没有被引用，那么它将会被垃圾回收，这也是WeakSet的主要应用场景。

总的来说，WeakMap和WeakSet主要用于解决内存泄漏问题，避免循环引用，以及在一些临时数据存储和缓存的场景中提高性能。

二、 WeakMap 简介

定义和语法

WeakMap是ES6中新增的一种数据结构，用于存储键值对。它与Map类似，但有一些重要区别：

• 键必须是对象类型，值可以是任意类型。
• 由于键是弱引用，如果对键的所有引用都丢失，并且不再有对值的引用，则该值可能会被垃圾回收。

以下是WeakMap的定义和语法示例：

new WeakMap()  // 创建一个新的WeakMap对象
new WeakMap(iterable)  // iterable是数组或者任意可以迭代的对象，需要拥有key-value对（一般是一个二维数组）

WeakMap 实例方法包括：

• delete(key)：删除与键关联的任意值。删除后，has(key)返回false。
• get(key)：返回与键关联的值，如果不存在关联值，则返回undefined。
• has(key)：返回键在 WeakMap 上是否存在的结果。
• set(key, value)：在 WeakMap 对象上为对应键设置指定的值，并返回 WeakMap 对象。

与普通 Map 的区别

WeakMap 与普通 Map 的主要区别在于它们对键的处理方式不同。

普通 Map 的键必须是可枚举的（即能够通过for...of循环遍历），并且是强引用的。这意味着只要有对 Map 中键的引用存在，这个键就不会被垃圾回收。

而 WeakMap 的键必须是对象类型，并且是弱引用的。这意味着如果除了WeakMap 本身之外，没有其他对键的引用存在，那么这个键和对应的值都可能会被垃圾回收。

以下是一个示例，展示了 WeakMap 与普通 Map 在键的生命周期上的区别：

// 创建一个普通 Map
const map = new Map();
const obj1 = {key: 'value1'};
map.set(obj1, 'data');

// 创建一个 WeakMap
const weakMap = new WeakMap();
const obj2 = {key: 'value2'};
weakMap.set(obj2, 'data');

// 断开对 obj1 和 obj2 的引用
obj1 = null;
obj2 = null;

// 检查普通 Map 中键是否存在
console.log(map.has(obj1)); 
console.log(map.get(obj1)); 

// 检查 WeakMap 中键是否存在
console.log(weakMap.has(obj2)); 
console.log(weakMap.get(obj2)); 

在这个示例中，我们创建了一个普通 Map 和一个 WeakMap，并将两个对象作为键分别存储在它们里面。然后，我们断开了对这两个对象的引用。

对于普通 Map，由于键是强引用的，即使我们断开了对对象的引用，键仍然存在于 Map 中，并且可以通过map.has(obj1)和map.get(obj1)来检查和获取对应的值。

对于 WeakMap，由于键是弱引用的，当我们断开了对对象的引用后，WeakMap 无法检测到键的存在，因此weakMap.has(obj2)返回false，并且weakMap.get(obj2)返回undefined。

这就是 WeakMap 和普通 Map 在键的处理方式上的主要区别。WeakMap 适用于在某些情况下需要避免内存泄漏的场景，例如缓存、临时数据存储等。

WeakMap 的键必须是对象，值可以是任意类型

以下是一个使用 WeakMap 的简单代码示例：

// 创建一个 WeakMap 对象
const weakMap = new WeakMap();

// 创建两个对象作为 WeakMap 的键
const obj1 = { key: 1 };
const obj2 = { key: 2 };

// 将值与对应的对象键关联起来
weakMap.set(obj1, 'value1');
weakMap.set(obj2, 'value2');

// 检查键是否存在
console.log(weakMap.has(obj1));  
console.log(weakMap.has(obj2)); 

// 获取对应键的值
console.log(weakMap.get(obj1));  
console.log(weakMap.get(obj2));  

// 删除键值对
weakMap.delete(obj1);

// 检查键是否存在（现在应该为 false）
console.log(weakMap.has(obj1));  

在这个示例中，我们创建了一个 WeakMap 对象，并将两个对象作为键与一些值关联起来。然后，我们检查键是否存在，并获取对应的值。最后，我们删除了一个键值对，并再次检查该键是否存在。

请注意，WeakMap 的键必须是对象，而值可以是任意类型。另外，WeakMap 不会阻止垃圾回收对键的回收，因此如果没有其他对键的引用，对应的键值对可能会被自动删除。

如何创建和使用 WeakMap

WeakMap 是一种用于从外部扩展对象而不干扰垃圾回收的 JavaScript 数据结构。它是一个 Map 字典，其中的键很弱，即如果对该键的所有引用都丢失，并且不再有对该值的引用，则可以对该值进行垃圾回收。

与普通 Map 相比，WeakMap 的键必须是对象，而值可以是任意类型。

创建和使用 WeakMap 的方法如下：

let weakMap = new WeakMap();
let o = {n: 1};
weakMap.set(o, "A"); // 添加
console.log(weakMap.has(o)); // 检查键是否存在
console.log(weakMap.get(o)); // 检索与键关联的值

三、 WeakSet 简介

定义和语法

WeakSet 是ES6中引入的一种新的数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值。与Set不同的是，WeakSet 的成员都是对象且都是弱引用，这意味着它们可以被垃圾回收机制回收，因此可以用来保存 DOM 节点，不容易造成内存泄漏。

WeakSet 的语法与Set类似，也是一个构造函数，可以使用new命令创建WeakSet数据结构。作为构造函数，WeakSet可以接受一个数组或类似数组的对象作为参数。

WeakSet 结构有以下三个方法：

• WeakSet.prototype.add(value): 向WeakSet实例添加一个新成员。
• weakSet.prototype.delete(value): 清除WeakSet实例的指定成员。
• weakSet.prototype.has(value): 返回一个布尔值，表示某个值是否在WeakSet实例中。

需要注意的是，WeakSet 不能遍历，因为成员都是弱引用，随时可能会消失，遍历机制无法保证成员存在。

与普通 Set 的区别

WeakSet 与普通 Set 的主要区别在于它们对成员的存储方式不同。

普通 Set 的成员是强引用的，这意味着只要 Set 中存在对某个对象的引用，这个对象就不会被垃圾回收器回收。

而 WeakSet 的成员是弱引用的，这意味着如果除了 WeakSet 之外没有其他对某个对象的引用，那么这个对象可能会被垃圾回收器回收。

以下是一个示例，展示了 WeakSet 与普通 Set 在成员的生命周期上的区别：

// 创建一个普通 Set
const strongSet = new Set();
const obj1 = {key: 'value1'};
strongSet.add(obj1);

// 创建一个 WeakSet
const weakSet = new WeakSet();
const obj2 = {key: 'value2'};
weakSet.add(obj2);

// 断开对 obj1 和 obj2 的引用
obj1 = null;
obj2 = null;

// 检查普通 Set 中键是否存在
console.log(strongSet.has(obj1)); 
console.log(strongSet.has(obj2)); 

// 检查 WeakSet 中键是否存在
console.log(weakSet.has(obj1)); 
console.log(weakSet.has(obj2)); 

在这个示例中，我们创建了一个普通 Set 和一个 WeakSet，并将两个对象作为成员添加到它们里面。然后，我们断开了对这两个对象的引用。

对于普通 Set，由于成员是强引用的，即使我们断开了对对象的引用，Set 仍然能够检测到成员的存在，因此strongSet.has(obj1)和strongSet.has(obj2)仍然返回true。

对于 WeakSet，由于成员是弱引用的，当我们断开了对对象的引用后，WeakSet 无法检测到成员的存在，因此weakSet.has(obj1)和weakSet.has(obj2)返回false。

这就是 WeakSet 和普通 Set 在成员的生命周期上的主要区别。WeakSet 适用于在某些情况下需要避免内存泄漏的场景，例如缓存、临时数据存储等。

WeakSet 只包含对象

WeakSet 只包含对象，而不能包含其他类型的值，例如原始类型（如数字、字符串等）或函数等。如果试图向 WeakSet 添加非对象类型的值，将会抛出一个 TypeError 错误。

这是因为 WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，而不考虑该对象还存在于 WeakSet 之中。

如何创建和使用 WeakSet

要创建一个WeakSet，可以使用new关键字和WeakSet构造函数，示例如下：

const weakSet = new WeakSet();

由于WeakSet的元素必须是对象，而不能是原始类型（如字符串、数字等），并且WeakSet不可迭代，因此不能使用for...of循环遍历其中的元素，也没有size属性和forEach方法。

WeakSet的主要方法有add()、delete()和has()，用于向WeakSet实例添加新成员、清除指定成员以及判断某个值是否在WeakSet实例中。

由于WeakSet的成员都是弱引用，随时可能消失，因此遍历机制无法保证成员存在。WeakSet适合用于临时存放一组对象以及存放跟对象绑定的信息，只要这些对象在外部消失，它在WeakSet里面引用的就会自动消失，可以更好地管理对象的生命周期并避免内存泄漏的问题。