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里面引用的就会自动消失,可以更好地管理对象的生命周期并避免内存泄漏的问题。
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!