0

0

JavaScript WeakMap是什么_它解决了什么问题【教程】

狼影

狼影

发布时间:2026-01-19 21:49:02

|

414人浏览过

|

来源于php中文网

原创

weakmap 键必须是对象且为弱引用,避免内存泄漏;不支持遍历、size 属性,仅提供 set/get/has/delete;适用于私有状态、元数据附加等场景。

javascript weakmap是什么_它解决了什么问题【教程】

WeakMap 为什么不能用普通对象或 Map 存键?

WeakMap 的核心约束是:键必须是 Object(包括函数、数组、DOM 元素等),且对键的引用是「弱引用」——也就是说,只要这个对象在其他地方不再被引用,它就能被垃圾回收器清理掉,即使它还作为 WeakMap 的键存在。

而普通对象当键时会自动转成字符串(比如 {a:1}"[object Object]"),根本没法区分不同实例;Map 虽然支持任意类型作键,但它会强持有键对象,导致内存泄漏风险——尤其当你想把 DOM 元素或大型配置对象作为键来存私有数据时。

常见错误现象:
• 用 Map 缓存组件实例状态,但组件卸载后 DOM 元素仍驻留内存
• 试图用 {} 存多个 input 元素的校验结果,结果所有 input 都共享同一份 key

WeakMap 的典型使用场景有哪些?

它不是用来替代 Map 的通用容器,而是专为「附加元数据」和「避免内存泄漏」设计的。真实项目里最常遇到的几个点:

立即学习Java免费学习笔记(深入)”;

Video Ocean
Video Ocean

人人皆导演,让视频创作变得轻松自如

下载
  • 给第三方类或原生对象(如 HTMLElement)添加私有属性,又不想污染原型或触发属性劫持
  • 实现私有字段模拟(在 class 语法普及前,很多库用 WeakMap 模拟 #private
  • 缓存计算结果,但只在目标对象存活期间有效(例如:某个 canvas 元素的渲染上下文缓存)
  • 做轻量级事件绑定代理,绑定关系随目标对象销毁而自动失效

WeakMap 和 Map 的关键行为差异

别被名字误导——WeakMap 不是「弱一点的 Map」,它连基础遍历能力都没有。这些限制直接决定了你怎么用它:

  • WeakMap.prototype.keys().values().entries() 全部不存在 —— 你无法枚举它的内容
  • WeakMap.prototype.size 属性不存在 —— 它不提供长度信息
  • 只能通过 set(key, value)get(key)has(key)delete(key) 四个方法操作
  • 键一旦是原始值(如 "string"42true),调用 set 会直接抛错:TypeError: Invalid value used as weak map key

性能上,WeakMap 查找是 O(1),但因为不暴露内部结构,V8 等引擎可以更激进地优化内存管理,实际比 Map 更轻量(尤其在大量短生命周期对象场景下)。

一个真实的私有状态封装示例

假设你在写一个可复用的 Tooltip 类,需要为每个 tooltip 实例存储 DOM 引用、延时定时器等,又不想让这些数据暴露在实例上(避免被外部误改或枚举到):

const tooltipData = new WeakMap();

class Tooltip {
  constructor(el) {
    // el 必须是 object(比如 HTMLElement)
    tooltipData.set(el, {
      timer: null,
      isVisible: false,
      config: { delay: 300 }
    });
    el.addEventListener('mouseenter', () => this.show(el));
  }

  show(el) {
    const data = tooltipData.get(el);
    if (!data) return;
    data.timer = setTimeout(() => {
      data.isVisible = true;
      // ... 显示逻辑
    }, data.config.delay);
  }

  hide(el) {
    const data = tooltipData.get(el);
    if (data?.timer) {
      clearTimeout(data.timer);
      data.timer = null;
      data.isVisible = false;
    }
  }
}

// 使用后,如果 el 被从 DOM 移除且无其他引用,tooltipData 中对应条目会自动消失

注意:这里 el 是键,不是字符串 ID;tooltipData 必须在闭包外声明(否则每次 new Tooltip 都新建一个 WeakMap,起不到跨实例共享的作用);一旦 el 被 GC,tooltipData.get(el) 就返回 undefined,不会报错。

最容易被忽略的一点:WeakMap 的「弱引用」只作用于键,值仍然会被强引用。所以如果你的 value 里又持有对 key 的引用(比如闭包里用了 el),照样会造成内存泄漏。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1010

2023.08.02

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

760

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

221

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1566

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

649

2023.11.24

java读取文件转成字符串的方法
java读取文件转成字符串的方法

Java8引入了新的文件I/O API,使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java,可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中,你需要将文件路径替换为你的实际文件路径,并且可能需要处理可能的IOException异常。想了解更多java的相关内容,可以阅读本专题下面的文章。

1208

2024.03.22

php中定义字符串的方式
php中定义字符串的方式

php中定义字符串的方式:单引号;双引号;heredoc语法等等。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

1184

2024.04.29

go语言字符串相关教程
go语言字符串相关教程

本专题整合了go语言字符串相关教程,阅读专题下面的文章了解更多详细内容。

192

2025.07.29

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号