JavaScript知识点:WeakMap解析

WeakMap是一种键值对的集合，其中的键必须是对象或Symbol。 键被设计为弱引用，如果没有对键的引用，那么垃圾回收器会对其回收。 目的是在一个对象不被使用后，能自动清除其在Map里面对应的键和值。防止内存泄露。 因为键随时会被垃圾回收器回收，所以不支持遍历操作。

举个例子，直观看到对象被回收了。

因为浏览器调试原因，就算被回收了在调试控制台也没那么快消失。延时久一点就可以看到对象被回收了

const map = new Map()
const weakmap = new WeakMap()

(function () {
  const foo = { foo: 1 }
  const bar = { bar: 2 }
  map.set(foo, 1)
  weakmap.set(bar, 2)
})()

setTimeout(() => {
  debugger
}, 10000)

实际使用场景： Vue的响应式对象就使用到了WeakMap

• 代理对象get的时候,会进行依赖收集track副作用函数。
• 这时候Vue通过targetMap管理所有的响应式对象。 就是用的WeakMap。
• targetMap存储的key是被代理对象，值是对象的属性和副作用函数的映射。
• 目的是被代理对象没被引用（使用）后，对应属性的副作用函数会被自动清除。
• 如果使用Map，那样就需要手动清除，如果不清除，随着时间的增长,targetMap不断变大 就可能会产生内存泄露。

总结

WeakMap 是一种特殊的数据结构，允许我们将额外的信息关联到对象，且当对象不再被使用时，该信息会自动被清除，防止内存泄漏。