WeakMap 弱引用与 Map 强引用浅析：走进 JavaScript 内存管理的微妙世界

前端

2023-09-09 03:31:10

在 JavaScript 中，我们经常使用 Map 和 WeakMap 来存储键值对。然而，这两者之间存在着本质上的区别：Map 使用强引用来关联键值对，而 WeakMap 则使用弱引用。

强引用与弱引用的区别

强引用意味着 JavaScript 引擎将始终跟踪被引用的对象，即使该对象不再被任何其他变量引用。这意味着强引用的对象永远不会被垃圾回收器（GC）回收。

弱引用则不同，当一个对象仅被 WeakMap 引用时，该对象被视为 "可回收的"。这意味着当 GC 运行时，它可以回收该对象所占用的内存。

为什么引入弱引用 WeakMap？

WeakMap 的引入是出于对 JavaScript 内存管理的考虑。在某些情况下，强引用可能会导致内存泄漏。内存泄漏是指由于强引用而导致的对象无法被 GC 回收，从而导致内存占用不断增加。

为了避免内存泄漏，JavaScript 引入了弱引用。当使用 WeakMap 时，如果某个对象不再被任何其他变量引用，那么该对象将被视为可回收的，从而避免了内存泄漏的发生。

WeakMap 的妙用

WeakMap 在 JavaScript 开发中有着广泛的应用，其中一些巧妙的应用包括：

缓存：WeakMap 可以用作缓存，因为当缓存项不再被任何其他变量引用时，它将被 GC 自动回收，从而避免了内存泄漏。
事件监听器：WeakMap 可以用来存储事件监听器，当 DOM 元素不再被任何其他变量引用时，这些事件监听器将被自动移除，从而避免了内存泄漏。
私有数据：WeakMap 可以用来存储私有数据，因为这些数据只在 WeakMap 中被引用，不会被 GC 回收。

示例：WeakMap 的使用

// 创建一个 WeakMap
const weakMap = new WeakMap();

// 将一个 DOM 元素作为键，一个事件监听器作为值存储在 WeakMap 中
const element = document.getElementById('element');
const listener = () => { console.log('Element clicked!'); };
weakMap.set(element, listener);

// 给 DOM 元素添加事件监听器
element.addEventListener('click', listener);

// 当 DOM 元素不再被任何其他变量引用时，事件监听器将被自动移除
element = null;

// 运行 GC
gc();

// 检查事件监听器是否已被移除
console.log(weakMap.get(element)); // undefined