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来代替它。

扩展资料

• WeakMaps - HTTP203脱口秀