弱引用

弱引用（Weak Reference）：内存管理的精细控制

一、弱引用的核心概念

定义：弱引用是一种不会阻止对象被垃圾回收（GC）的引用方式。当一个对象仅被弱引用指向时，GC 会直接回收该对象，而无需考虑弱引用的存在。
对比强引用：

强引用：普通的对象引用（如 const obj = {}），只要强引用存在，对象就不会被回收。
弱引用：允许对象在没有其他强引用时被 GC 回收，常用于缓存、映射等场景。

二、JavaScript 中的弱引用实现

1. WeakMap

特性：
- 键必须为对象（原始值不可作为键）。
- 键对象的引用为弱引用，若键对象被其他地方回收，WeakMap 中的对应项会自动删除。
- 不可枚举（没有 keys()、values()、entries() 方法），不支持迭代。

典型场景：

// 为 DOM 元素附加元数据（元素被销毁时，元数据自动清除）
const elementMap = new WeakMap();
const button = document.getElementById('myButton');

elementMap.set(button, { clickCount: 0 });

button.addEventListener('click', () => {
  const data = elementMap.get(button);
  data.clickCount++;
});

// 当 button 被移除 DOM 且无其他引用时，WeakMap 中的对应项自动消失

2. WeakSet

特性：
- 成员必须为对象（原始值不可作为成员）。
- 对象的引用为弱引用，若对象被其他地方回收，WeakSet 中的对应项会自动删除。
- 仅支持 add()、has()、delete() 方法，不可枚举。

典型场景：

// 跟踪临时对象（如防止重复处理）
const visited = new WeakSet();

function process(obj) {
  if (visited.has(obj)) return; // 已处理过，跳过
  
  visited.add(obj);
  // 处理对象...
}

// 当 obj 被其他地方回收时，WeakSet 中的记录自动清除

三、弱引用的核心优势

自动内存回收：

无需手动管理缓存或元数据的生命周期，避免内存泄漏。

// 使用 WeakMap 缓存计算结果
const cache = new WeakMap();

function compute(obj) {
  if (cache.has(obj)) return cache.get(obj);
  
  const result = /* 复杂计算 */;
  cache.set(obj, result);
  return result;
}

// 当 obj 被回收时，缓存自动清除

避免循环引用：

强引用循环会导致对象永远无法被回收，而弱引用可打破循环。

// 循环引用示例（使用 WeakMap 避免内存泄漏）
class Parent {
  constructor() {
    this.children = new Set();
  }
}

class Child {
  constructor(parent) {
    // 使用 WeakMap 存储父引用，避免循环引用
    const parentRef = new WeakMap();
    parentRef.set(this, parent);
  }
}

四、弱引用的应用场景

缓存系统：

为临时对象提供缓存，不阻止对象被回收。

// 实现组件状态缓存
const componentState = new WeakMap();

function getComponentState(component) {
  if (!componentState.has(component)) {
    componentState.set(component, {});
  }
  return componentState.get(component);
}

DOM 关联数据：

为 DOM 元素附加元数据，元素被销毁时自动清除数据。

// 为 DOM 元素添加自定义事件管理器
const eventHandlers = new WeakMap();

function addEventHandler(element, event, handler) {
  if (!eventHandlers.has(element)) {
    eventHandlers.set(element, new Map());
  }
  
  const elementEvents = eventHandlers.get(element);
  elementEvents.set(event, handler);
}

// 当元素被移除 DOM 时，eventHandlers 中的记录自动清除

防止内存泄漏的工具库：

在库中使用弱引用存储用户传入的对象，避免阻止用户对象被回收。

// 工具库示例：使用 WeakMap 存储配置，不阻止用户对象被回收
class MyLibrary {
  constructor(options) {
    this._options = new WeakMap();
    this._options.set(this, options);
  }
  
  getOptions() {
    return this._options.get(this);
  }
}

五、弱引用的局限性

不可枚举：
- 无法遍历 WeakMap/WeakSet 的内容，只能通过已知的键/对象访问。
无 size 属性：
- 无法获取 WeakMap/WeakSet 的大小，因为其内容可能随时被 GC 回收。
仅支持对象作为键/成员：
- 原始值（如 1、"string"）无法作为 WeakMap 的键或 WeakSet 的成员。
不支持 clear() 方法：
- 无法一次性清空所有内容，只能逐个删除。

六、弱引用与 GC 的交互

GC 触发条件：当对象的强引用计数为 0 时，即使存在弱引用，对象也会被回收。
弱引用清理时机：GC 回收对象后，相关的 WeakMap/WeakSet 条目会在下一次 GC 周期中被清理（非实时）。

七、总结：何时使用弱引用？

使用场景：
- 当需要为对象关联临时数据，且不希望阻止对象被回收时。
- 实现缓存、映射或元数据存储，避免手动管理内存。
避免场景：
- 需要遍历或统计数据时（如需要 size 属性或迭代器）。
- 存储原始值作为键/成员时。

弱引用是 JavaScript 内存管理的精细工具，合理使用可有效避免内存泄漏，提升应用性能。

一、弱引用的核心概念​

二、JavaScript 中的弱引用实现​

1. WeakMap​

2. WeakSet​

三、弱引用的核心优势​

四、弱引用的应用场景​

五、弱引用的局限性​

六、弱引用与 GC 的交互​

七、总结：何时使用弱引用？​