WeakMap 和 Map 的区别,WeakMap 原理,为什么能被 GC?

垃圾回收机制

我们知道,程序运行中会有一些垃圾数据不再使用,需要及时释放出去,如果我们没有及时释放,这就是内存泄露

JS 中的垃圾数据都是由垃圾回收(Garbage Collection,缩写为 GC)器自动回收的,不需要手动释放,它是如何做的呢?

很简单,JS 引擎中有一个后台进程称为垃圾回收器,它监视所有对象,观察对象是否可被访问,然后按照固定的时间间隔周期性的删除掉那些不可访问的对象即可

现在各大浏览器通常用采用的垃圾回收有两种方法:

  • 引用计数
  • 标记清除

引用计数

最早最简单的垃圾回收机制,就是给一个占用物理空间的对象附加一个引用计数器,当有其它对象引用这个对象时,这个对象的引用计数加一,反之解除时就减一,当该对象引用计数为 0 时就会被回收。

该方式很简单,但会引起内存泄漏:

// 循环引用的问题
function temp(){
    var a={};
    var b={};
    a.o = b;
    b.o = a;
}

这种情况下每次调用 temp 函数,a 和 b 的引用计数都是 2 ,会使这部分内存永远不会被释放,即内存泄漏。现在已经很少使用了,只有低版本的 IE 使用这种方式。

标记清除

V8 中主垃圾回收器就采用标记清除法进行垃圾回收。主要流程如下:

  • 标记:遍历调用栈,看老生代区域堆中的对象是否被引用,被引用的对象标记为活动对象,没有被引用的对象(待清理)标记为垃圾数据。
  • 垃圾清理:将所有垃圾数据清理掉

在我们的开发过程中,如果我们想要让垃圾回收器回收某一对象,就将对象的引用直接设置为 null

var a = {}; // {} 可访问,a 是其引用

a = null; // 引用设置为 null
// {} 将会被从内存里清理出去

但如果一个对象被多次引用时,例如作为另一对象的键、值或子元素时,将该对象引用设置为 null 时,该对象是不会被回收的,依然存在

var a = {}; 
var arr = [a];

a = null; 
console.log(arr)
// [{}]

如果作为 Map 的键呢?

var a = {}; 
var map = new Map();
map.set(a, '小芳学前端')

a = null; 
console.log(map.keys()) // MapIterator {{}}
console.log(map.values()) // MapIterator {"小芳学前端"}

很明显,该对象没有被回收,如果想让 a 置为 null 时,该对象被回收,该怎么做呢?

WeakMap vs Map

ES6 考虑到了这一点,推出了: WeakMap 。它对于值的引用都是不计入垃圾回收机制的,所以名字里面才会有一个"Weak",表示这是弱引用(对对象的弱引用是指当该对象应该被GC回收时不会阻止GC的回收行为)。

Map 相对于 WeakMap :

  • Map 的键可以是任意类型,WeakMap 只接受对象作为键(null除外),不接受其他类型的值作为键
  • Map 的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键; WeakMap 的键是弱引用,键所指向的对象可以被垃圾回收,此时键是无效的
  • Map 可以被遍历, WeakMap 不能被遍历

下面以 WeakMap 为例,看看它是怎么上面问题的:

var a = {}; 
var map = new WeakMap();
map.set(a, '小芳学前端')
map.get(a)

a = null; 

上例并不能看出什么?我们通过 process.memoryUsage 测试一下:

创建一个map.js文件,内容如下:

//map.js
global.gc(); // 0 每次查询内存都先执行gc()再memoryUsage(),是为了确保垃圾回收,保证获取的内存使用状态准确

function usedSize() {
    const used = process.memoryUsage().heapUsed;
    return Math.round((used / 1024 / 1024) * 100) / 100 + "M";
}

console.log(usedSize()); // 1 初始状态,执行gc()和memoryUsage()以后,heapUsed 值为 1.64M

var map = new Map();
var b = new Array(5 * 1024 * 1024);

map.set(b, 1);

global.gc();
console.log(usedSize()); // 2 在 Map 中加入元素b,为一个 5*1024*1024 的数组后,heapUsed为41.82M左右

b = null;
global.gc();

console.log(usedSize()); // 3 将b置为空以后,heapUsed 仍为41.82M,说明Map中的那个长度为5*1024*1024的数组依然存在

在当前map.js文件目录执行 node --expose-gc map.js 命令:

其中,--expose-gc 参数表示允许手动执行垃圾回收机制

再创建一个weakmap.js文件,如下:

// weakmap.js
function usedSize() {
    const used = process.memoryUsage().heapUsed;
    return Math.round((used / 1024 / 1024) * 100) / 100 + "M";
}

global.gc(); // 0 每次查询内存都先执行gc()再memoryUsage(),是为了确保垃圾回收,保证获取的内存使用状态准确
console.log(usedSize()); // 1 初始状态,执行gc()和 memoryUsage()以后,heapUsed 值为 1.64M
var map = new WeakMap();
var b = new Array(5 * 1024 * 1024);

map.set(b, 1);

global.gc();
console.log(usedSize()); // 2 在 Map 中加入元素b,为一个 5*1024*1024 的数组后,heapUsed为41.82M左右

b = null;
global.gc();

console.log(usedSize()); // 3 将b置为空以后,heapUsed 变成了1.82M左右,说明WeakMap中的那个长度为5*1024*1024的数组被销毁了

执行 node --expose-gc weakmap.js 命令:

上面代码中,只要外部的引用消失,WeakMap 内部的引用,就会自动被垃圾回收清除。由此可见,有了它的帮助,解决内存泄漏就会简单很多。

最后看一下 WeakMap

WeakMap

WeakMap 对象是一组键值对的集合,其中的键是弱引用对象,而值可以是任意

注意,WeakMap 弱引用的只是键名,而不是键值。键值依然是正常引用。

WeakMap 中,每个键对自己所引用对象的引用都是弱引用,在没有其他引用和该键引用同一对象,这个对象将会被垃圾回收(相应的key则变成无效的),所以,WeakMap 的 key 是不可枚举的。

属性:

  • constructor:构造函数

方法:

  • has(key):判断是否有 key 关联对象
  • get(key):返回key关联对象(没有则则返回 undefined)
  • set(key):设置一组key关联对象
  • delete(key):移除 key 的关联对象
let myElement = document.getElementById('logo');
let myWeakmap = new WeakMap();

myWeakmap.set(myElement, {timesClicked: 0});

myElement.addEventListener('click', function() {
  let logoData = myWeakmap.get(myElement);
  logoData.timesClicked++;
}, false);

除了 WeakMap 还有 WeakSet 都是弱引用,可以被垃圾回收机制回收,可以用来保存DOM节点,不容易造成内存泄漏

参考

你不知道的 WeakMap

 添加好友备注【进阶学习】拉你进技术交流群

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/276995.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JMeter逻辑控制器之While控制器

JMeter逻辑控制器之While控制器 1. 背景2.目的3. 介绍4.While示例4.1 添加While控制器4.2 While控制器面板4.3 While控制器添加请求4.3 While控制器应用场景 1. 背景 存在一些使用场景,比如:某个请求必须等待上一个请求正确响应后才能开始执行。或者&…

Springboot整合JSP-修订版本(Springboot3.1.6+IDEA2022版本)

1、问题概述? Springboot对Thymeleaf支持的要更好一些,Springboot内嵌的Tomcat默认是没有JSP引擎,不支持直接使用JSP模板引擎。这个时候我们需要自己配置使用。 2、Springboot整合使用JSP过程 现在很多的IDEA版本即使创建的项目类型是WAR工…

页面左中右下布局HTML

效果如下 代码如下 <!DOCTYPE html> <html><head><title>名曲欣赏</title><meta charset"UTF-8" /><style>body {padding: 0;margin: 0;background: linear-gradient(180deg, #d7f5f2 0%, #c4f2ee 100%);}p {margin: 0;p…

学生使用什么牌子的护眼灯好?五款优秀台灯分享

在近几年&#xff0c;儿童青少年近视率非常高。很多家长认为孩子近视的原因是没有养成正确的用眼习惯&#xff0c;例如经常趴桌子写作业、眯眼看书等&#xff0c;但实际上这些坏习惯是因为没有合适的光线而导致的。所以安排一盏合适的台灯给孩子学习是非常重要的。 很多家长会选…

基于C++的类Unix文件系统

这是一个基于C的类Unix文件系统&#xff0c;有意者私信获取。 可用指令如下&#xff1a; ls - 显示当前文件夹下的内容 cd - 按照路径进入到某个文件夹下 mkdir <path/name> - 在指定路径下创建一个文件夹 create <path/name> - 在指定路径下创建一个文件 open &…

Hadoop安装笔记2单机/伪分布式配置_Hadoop3.1.3——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2:离线数据处理

紧接着上一篇博客&#xff1a;Hadoop安装笔记1&#xff1a; Hadoop安装笔记1单机/伪分布式配置_Hadoop3.1.3——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2&#xff1a;离线数据处理-CSDN博客https://blog.csdn.net/Zhiyilang/article/details/135…

SpringBoot 项目中常用的注解

每一层对应每个包&#xff0c;包名中应全为小写。 一、Common 层&#xff08;实体类&#xff09; 前提&#xff1a;导入 Lombok 依赖 Data&#xff1a;生成 get 和 set 方法以及 toString 方法 Getter&#xff1a;只生成 get 方法&#xff0c;避免对类中的成员变量修改。 …

《MySQL系列-InnoDB引擎01》MySQL体系结构和存储引擎

文章目录 第一章 MySQL体系结构和存储引擎1 数据库和实例2 MySQL配置文件3 MySQL数据库路径4 MySQL体系结构5 MySQL存储引擎5.1 InnoDB存储引擎5.2 MyISAM存储引擎5.3 NDB存储引擎5.4 Memory存储引擎5.5 Archive存储引擎5.6 Federated存储引擎 6 连接MySQL6.1 TCP/IP6.2 命名管…

MIT线性代数笔记-第31讲-线性变换及对应矩阵

目录 31.线性变换及对应矩阵打赏 31.线性变换及对应矩阵 线性变换相当于是矩阵的抽象表示&#xff0c;每个线性变换都对应着一个矩阵 例&#xff1a; 考虑一个变换 T T T&#xff0c;使得平面上的一个向量投影为平面上的另一个向量&#xff0c;即 T : R 2 → R 2 T:R^2 \to R…

CDN 原理

CDN 原理 CND 一般包含分发服务系统、负载均衡系统和管理系统 分发服务系统 其基本的工作单元就是各个 Cache 服务器。负责直接响应用户请求&#xff0c;将内容快速分发到用户&#xff1b;同时还负责内容更新&#xff0c;保证和源站内容的同步。 根据内容类型和服务种类的不…

gitlab请求合并分支

直接去看原文: 原文链接:Gitlab合并请求相关流程_source branch target branch-CSDN博客 --------------------------------------------------------------------------------------------------------------------------------- 入口&#xff1a; 仓库控制台的这两个地方都…

RedisConnectionFailureException: Unable to connect to Redis; 报错解决

一 Unable to connect to Redis报错提示 项目启动时都会报错&#xff1a;RedisConnectionFailureException: Unable to connect to Redis; nested exception is io.lettuce.core.RedisConnectionException 如图&#xff1a; 提示是不能正确连接到redis&#xff0c;连接问题的问…

关于苹果iOS 16:揭开伪装成飞机模式的隐形蜂窝接入漏洞的动态情报

一、基本内容 在日常生活中&#xff0c;网络威胁不断演变&#xff0c;给个人和组织带来了一系列重大挑战。网络犯罪分子使用的一种最常见的、最具破坏性的方法之一就是网络钓鱼。这种攻击方式通过电子邮件、短信或其他通讯渠道冒充可信实体&#xff0c;诱使个人泄露敏感信息&am…

Flink版本更新汇总(1.14-1.18)

0、汇总 1.14.0 1.有界流支持 Checkpoint&#xff1b; 2.批执行模式支持 DataStream 和 Table/SQL 混合应用&#xff1b; 3.新增 Hybrid Source 功能&#xff1b; 4.新增 缓冲区去膨胀 功能&#xff1b; 5.新增 细粒度资源管理 功能&#xff1b; 6.新增 DataStream 的 Pulsar …

特征归一化及其原理--机器学习

归一化是数据预处理中的一种常见操作&#xff0c;其目的是将不同特征的数值范围统一或缩放到相似的尺度。这有助于提高模型的性能&#xff0c;加速模型的收敛&#xff0c;并使模型更加稳健。以下是进行归一化的一些原因和原理&#xff1a; 消除特征间的尺度差异&#xff1a; 不…

计算机网络概述(上)——“计算机网络”

各位CSDN的uu们好呀&#xff0c;好久没有更新小雅兰的计算机网络的专栏啦&#xff0c;而且期末考试也要考计算机网络&#xff0c;所以&#xff0c;小雅兰就来写计算机网络的内容啦&#xff01;&#xff01;&#xff01;下面&#xff0c;让我们进入计算机网络概述的世界吧&#…

php 之 redisk 扩展问题

系统&#xff1a; ARM V10 server &#xff08;1229&#xff09; 软件&#xff1a; php、phpdevel redis5.1.0RC1 redis5.1.0RC1.tgz phpredis 编译&#xff1a; 解压进入目录内&#xff1a; # phpize # ./configure withphpconfig/usr/bin/phpconfig # make # make ins…

物理层概述

目录 基本介绍 四个重要特性 物理层的常用标准 EIA RS-232 EIA RS-449 RJ-45 数字传输系统 宽带接入技术 基本介绍 物理层是网络体系结构中的最低层&#xff0c;它既不是指连接计算机的具体物理设备&#xff0c;也不是指负责信号传输的具体物理介质&#xff0c;而是指…

新年团圆时,关爱近在咫尺

转眼间&#xff0c;元旦将至&#xff0c;在这团圆时刻&#xff0c;也可以关心常在&#xff0c;这份长辈用机指南请查收&#xff01; 一、畅连视频&#xff0c;随时随地与家人连线&#xff0c;新年团圆&#xff0c;让爱近在咫尺 二、家庭空间&#xff0c;全天候监测家人身体状况…

每日一题——LeetCode922

方法一 双指针&#xff1a; 一个偶指针一个奇指针&#xff0c;偶指针每次都指向nums里的偶数&#xff0c;奇指针每次指向nums里的奇数&#xff0c;两个指针交替push进新数组即可&#xff1a; var sortArrayByParityII function(nums) {var even0,odd0,res[],flagtruewhile(r…