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

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

四、 WeakMap 和 WeakSet 的应用场景

以下是使用代码案例详细说明 WeakMap 和 WeakSet 的应用场景：

解决内存泄漏问题

内存泄漏是指程序中不再使用的对象仍然保留在内存中，导致内存占用过高，甚至可能导致程序崩溃。WeakMap 可以用来解决这个问题，因为它的键是弱引用的，当键不再被其他对象引用时，WeakMap 会自动释放对应的键值对，从而避免内存泄漏。

// 示例：使用 WeakMap 解决内存泄漏问题
class LeakyClass {
  constructor() {
    this.data = new Map();
  }

  // 添加数据
  setData(key, value) {
    this.data.set(key, value);
  }

  // 获取数据
  getData(key) {
    return this.data.get(key);
  }

  // 移除数据
  removeData(key) {
    this.data.delete(key);
  }
}

// 创建 LeakyClass 的实例
const leakyObject = new LeakyClass();

// 将对象添加到 WeakMap 中，并将其作为键
const weakMap = new WeakMap();
weakMap.set(leakyObject, 'some data');

// 断开对 leakyObject 的引用
leakyObject = null;

// 检查 WeakMap 中是否仍然存在对应键值对
console.log(weakMap.has(leakyObject)); 

在上述示例中，我们创建了一个LeakyClass类，它有一个data属性，用于存储数据。我们将leakyObject添加到weakMap中，并将其作为键。然后，我们断开对leakyObject的引用，此时leakyObject成为垃圾回收的候选对象。最后，我们检查weakMap中是否仍然存在对应键值对。由于leakyObject已经不再被引用，它将被垃圾回收，因此weakMap.has(leakyObject)返回false。

避免循环引用

循环引用是指两个或多个对象之间相互引用，形成一个循环，导致这些对象无法被垃圾回收。WeakSet 可以用来避免循环引用，因为它的成员是弱引用的，不会阻止垃圾回收。

// 示例：使用 WeakSet 避免循环引用
class Node {
  constructor(value) {
    this.value = value;
    this.children = new WeakSet();
  }

  addChild(node) {
    this.children.add(node);
  }

  removeChild(node) {
    this.children.delete(node);
  }
}

// 创建两个 Node 对象，并形成循环引用
const node1 = new Node(1);
const node2 = new Node(2);
node1.addChild(node2);
node2.addChild(node1);

// 将 node1 添加到 WeakSet 中
const weakSet = new WeakSet();
weakSet.add(node1);

// 断开对 node1 的引用
node1 = null;

// 等待垃圾回收
setTimeout(() => {
  // 检查 WeakSet 中是否仍然存在 node1
  console.log(weakSet.has(node1)); 
}, 1000);

在上述示例中，我们创建了两个Node对象，并通过addChild方法形成循环引用。然后，我们将node1添加到weakSet中。最后，我们断开对node1的引用，并等待垃圾回收。在垃圾回收之后，weakSet.has(node1)返回false，因为node1已经被回收。

临时数据存储

WeakMap 和 WeakSet 可以用于存储临时数据，这些数据只在特定的时间段内有用。由于它们的弱引用特性，当不再需要这些数据时，它们会被自动释放，不会造成内存泄漏。

// 示例：使用 WeakMap 存储临时数据
const weakMap = new WeakMap();

// 创建一个临时对象，并将其添加到 WeakMap 中
const tempObject = {key: 'value'};
weakMap.set(tempObject, 'some data');

// 使用临时对象
console.log(weakMap.get(tempObject)); 

// 断开对临时对象的引用
tempObject = null;

// 等待垃圾回收
setTimeout(() => {
  // 检查 WeakMap 中是否仍然存在对应键值对
  console.log(weakMap.has(tempObject)); 
}, 1000);

在上述示例中，我们使用WeakMap存储了一个临时对象和相关的数据。然后，我们断开对临时对象的引用，并等待垃圾回收。最后，WeakMap.has(tempObject)返回false，因为临时对象已经被回收。

缓存

WeakMap 和 WeakSet 也可以用于缓存数据，尤其是在一些数据可能会变得很大的情况下。由于它们的弱引用特性，可以确保在不再需要这些数据时，它们会被自动释放，避免占用过多的内存。

// 示例：使用 WeakMap 进行缓存
const weakMap = new WeakMap();

// 创建一个大型对象，并将其添加到 WeakMap 中
const largeObject = {key: 'value'};
weakMap.set(largeObject, 'cached data');

// 使用缓存的数据
console.log(weakMap.get(largeObject)); 

// 断开对大型对象的引用
largeObject = null;

// 等待垃圾回收
setTimeout(() => {
  // 检查 WeakMap 中是否仍然存在对应键值对
  console.log(weakMap.has(largeObject)); 
}, 1000);

在上述示例中，我们使用WeakMap缓存了一个大型对象。然后，我们断开对大型对象的引用，并等待垃圾回收。最后，WeakMap.has(largeObject)返回false，因为大型对象已经被回收。

这些只是 WeakMap 和 WeakSet 的一些常见应用场景。实际使用中，具体的场景可能会有所不同，需要根据具体情况选择合适的数据结构来解决问题。

五、 WeakMap 和 WeakSet 的优缺点

优点

• 减少内存泄漏
• 自动释放不再需要的对象
• 提高性能

缺点

• 不支持遍历
• 键必须是对象

六、总结

回顾 WeakMap 和 WeakSet 的重要概念和特点

WeakMap 和 WeakSet 是ES6提供的新的数据结构，它们的特点和概念如下：

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

需要注意的是，WeakMap 和 WeakSet 的键是弱引用，这意味着垃圾回收机制可以自动回收不再被引用的键所对应的对象，而不用手动删除键或者值。

强调它们在处理内存泄漏和避免循环引用方面的优势

WeakMap 和 WeakSet 在处理内存泄漏和避免循环引用方面具有以下优势：

1. 内存泄漏：WeakMap 和 WeakSet 的键是弱引用，这意味着如果一个对象不再被其他地方引用，那么它所对应的键也将不再被 WeakMap 或 WeakSet 引用，从而可以被垃圾回收器回收，避免了内存泄漏的问题。

2. 避免循环引用：循环引用是指两个或多个对象相互引用，导致它们无法被垃圾回收器回收。WeakMap 和 WeakSet 的弱引用特性可以帮助避免循环引用的问题，因为它们不会阻止垃圾回收器回收其他对象。

3. 性能优势：由于 WeakMap 和 WeakSet 的键是弱引用，它们不会对对象的生存时间产生影响，因此在某些情况下可以提高性能，尤其是在处理大量对象时。

总之，WeakMap 和 WeakSet 在处理内存泄漏和避免循环引用方面具有优势，可以帮助开发人员更好地管理内存和避免潜在的问题。