JavaScript的WeakMap:向【不属于你的对象】添加【私有数据】

WeakMap与WeakSet的本质是,向一些“不属于你的对象”,添加(attach)一些私有数据。

ownership: 这个对象属于你吗?

这里的不属于你,指的是ownership,如果这个对象不是你创建的,也不是专门为你创建的,你无法掌控,那么这个对象就“不属于你”。

  • 例子1:dom对象,是由浏览器创建的,并且它会被你无法掌控的代码使用(比如大部分页面的dom由React框架管理,又或者当前页面同时运行了别人编写的JavaScript),那么你就不是这个对象的拥有者,应该避免往上面添加属性。
  • 例子2:koa框架暴露的request、response对象。如果你正在编写一个koa middleware,那么你接收到的request、response对象就不属于你。你应该避免向添加属性,无意间造成信息泄露、或者键名冲突。
当然,koa提供了ctx,就是为了让middleware添加数据,这个成为了所有开发者的共识,所以只要注意避免命名冲突,一般往ctx添加属性没有什么问题。

WeakMap为何出现

如上所说,以前我们的一个坏习惯是往domNode对象添加一些自用的属性:domNode._data = myBigDataObj,来记录一些信息,以便以后读取。

后来我们为了避免冲突,以symbol作为key,给对象添加属性,确保别人访问不到这个属性:domNode[mySymbol] = myBigDataObj

虽然实现了私有属性,但是typescript会对这种代码报错,因为mySymbol并不在Node的Interface上。

WeakMap则是另一种实现私有属性的方式。尤其擅长向你不拥有的对象附加一些信息
WeakMap的使用方式与普通Map几乎相同,只不过它的key是对象,并且一个对象在WeakMap中作为key,不会阻止它被垃圾回收。比如:

const attachedData = new WeakMap();
let keyObj = {name:'keyObj'};
let dataObj = {name:'dataObj'};
attachedData.set(keyObj, dataObj);
// 删掉对dataObj的引用
dataObj = null;
// dataObj实际还在内存中,没有被垃圾回收,因为它还可以通过WeakMap+key访问到:
console.log(attachedData.get(keyObj));
// 删掉对keyObj的引用
keyObj = null;
// keyObj、dataObj都已经被垃圾回收了,因为没有任何方式可以访问到它们

再举一个实践中的例子,myWeakMap.set(domNode,bigDataObj),将一个对象与domNode关联起来。以后再次遇到domNode的时候,我们可以通myWeakMap.get(domNode)拿到这个对象。如果这个domNode被清除、垃圾收集,那么myWeakMap会自动取消这条关联记录,如果其他地方没有保留bigDataObj的引用,那么它也会被垃圾收集。
在这个例子中,Node就是一把“钥匙”,只要钥匙没有弄丢,你就可以用它来拿到myWeakMap中存储的对应数据。如果你的钥匙丢了,myWeakMap会自动删掉这条关联信息(bigDataObj引用数减一)。因为如果连钥匙都丢了,你不可能再向myWeakMap索要这条数据,这条关联信息也就不可能再需要用到。

使用WeakMap的优势:

  • 封装性。外部代码无法拿这些信息,甚至连对象原本的拥有者都不行!更不可能会出现冲突。
  • 代码模块化。创建weakmap、使用weakmap的代码,都可以维护在一个独立的模块中,而不会影响到对象原本的初始化代码(原本的初始化代码不会意识到这个新的私有属性的存在)。
  • typescript也不会报错,你无需extend原来的Interface,或者通过as any来绕过ts报错。在这一点上优于Symbol的方案
对于myWeakMap.set(domNode,bigDataObj),WeakMap仅仅保持对domNode的弱引用,而不妨碍它被垃圾收集。以前的domNode._data = myBigDataObj这种方式,其实也不妨碍domNode被垃圾收集。在垃圾收集方面,两种方式效果相同。

WeakSet

WeakSet类似WeakMap,只不过它相当于value总为true的WeakMap,相当于给一个对象打上标记。

比如当有一个图数据结构,我们不希望重复处理同一个节点,以前可能会这样做:node._visited= true
但是如果这个图数据结构不属于你(你不是这个对象的拥有者),张三的代码也要处理这个图结构,那么你往上面添加属性,可能会破坏封装性,造成命名冲突。
后来,我们发明了Symbol的方式:node[mySymbol]= true
再后来,我们通过visitedWeakMap.set(node, true)来打上标记。
再后来,我们发现map的标记值总是为true,于是可以简化为使用set:
visitedWeakSet.add(node).

浏览器兼容性

WeakMap的浏览器兼容性比我想象中的要好,居然被IE11支持。
WeakSet的浏览器兼容性则差一些,好在我们总是能用WeakMap来代替它。

扩展资料


csRyan的学习专栏
分享对于计算机科学的学习和思考,只发布有价值的文章: 对于那些网上已经有完整资料,且相关资料已经整...

So you're passionate? How passionate? What actions does your passion lead you to do? If the heart...

1.1k 声望
181 粉丝
0 条评论
推荐阅读
手写一个Parser - 代码简单而功能强大的Pratt Parsing
在编译的流程中,一个很重要的步骤是语法分析(又称解析,Parsing)。解析器(Parser)负责将Token流转化为抽象语法树(AST)。这篇文章介绍一种Parser的实现算法:Pratt Parsing,又称Top Down Operator Precede...

csRyan阅读 2.7k

手把手教你写一份优质的前端技术简历
不知不觉一年一度的秋招又来了,你收获了哪些大厂的面试邀约,又拿了多少offer呢?你身边是不是有挺多人技术比你差,但是却拿到了很多大厂的offer呢?其实,要想面试拿offer,首先要过得了简历那一关。如果一份简...

tonychen152阅读 17.8k评论 5

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.5k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 7.1k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.6k评论 6

So you're passionate? How passionate? What actions does your passion lead you to do? If the heart...

1.1k 声望
181 粉丝
宣传栏