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

发布时间:2023年12月22日

在这里插入图片描述

🤍 前端开发工程师(主业)、技术博主(副业)、已过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里面引用的就会自动消失,可以更好地管理对象的生命周期并避免内存泄漏的问题。

文章来源:https://blog.csdn.net/weixin_42554191/article/details/135046792
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。