JavaScript内核与高级编程之：`JavaScript`的`WeakRef`：如何实现`DOM`元素的弱引用。

各位听众，早上好！ 欢迎来到今天的“JavaScript内核与高级编程”特别讲座。 今天咱们聊点儿刺激的，聊聊JavaScript里那些“若有若无”的关系——WeakRef，以及它在DOM世界里的妙用。

1. 啥是WeakRef？ 为啥要有它？

想象一下，你是个房东，手里有N多房子（对象）。 租客（变量）来了，你把钥匙（引用）给他们，他们就能住进去（访问对象）。 这很美好，对不对？ 但是问题来了：如果租客赖着不走（变量一直持有引用），你的房子就永远不能拆迁（垃圾回收），即使房子已经破烂不堪（对象不再有用）。

WeakRef就像一种“君子协议”。 你给租客的是一把“魔法钥匙”，他们能用它开门，但如果房子实在没人住了，政府要拆迁（垃圾回收器要回收对象），这把魔法钥匙就失效了，租客也就进不去了。

简单来说：

• 强引用（Strong Reference）：传统的引用，只要存在强引用，对象就不会被垃圾回收。
• 弱引用（Weak Reference）：允许在对象不再被需要时，即使存在弱引用，也能被垃圾回收。

为什么要引入 WeakRef 呢？ 主要为了解决 内存泄漏 问题。 当某些对象生命周期很长，而我们又需要缓存这些对象，但又不想阻止垃圾回收器回收它们时，WeakRef 就派上用场了。

2. WeakRef 的基本用法： 像变魔术一样创建弱引用

WeakRef 是一个构造函数，使用它就像变魔术一样：

// 创建一个普通对象
let obj = { name: "张三", age: 30 };

// 使用 WeakRef 创建一个弱引用
let weakObj = new WeakRef(obj);

// 通过 weakObj.deref() 获取原始对象
let originalObj = weakObj.deref(); // originalObj === obj (初始状态)

console.log(originalObj); // 输出: { name: "张三", age: 30 }

// 手动解除 obj 的强引用
obj = null;

// 等待一段时间，让垃圾回收器运行（实际项目中不要依赖这种方式）
setTimeout(() => {
  // 再次尝试获取原始对象
  let originalObjAfterGC = weakObj.deref();

  console.log(originalObjAfterGC); // 输出: undefined (可能，取决于垃圾回收)
}, 1000);

代码解释：

1. new WeakRef(obj) 创建了一个指向 obj 的弱引用。
2. weakObj.deref() 用于解引用，也就是获取 WeakRef 对象所指向的原始对象。如果原始对象已经被垃圾回收，deref() 会返回 undefined。
3. obj = null 清空了 obj 的强引用。
4. setTimeout 模拟等待垃圾回收器运行。注意，永远不要依赖 setTimeout 来触发垃圾回收，这只是为了演示目的。 垃圾回收的具体时机是由 JavaScript 引擎决定的。

注意：

• deref() 方法返回的是原始对象，如果原始对象已经被回收，则返回 undefined。
• WeakRef 对象不能直接访问原始对象的属性，必须使用 deref() 方法。

3. WeakRef 与 FinalizationRegistry： 清理“后事”

WeakRef 通常与 FinalizationRegistry 配合使用，用于在对象被垃圾回收后执行一些清理操作。 FinalizationRegistry 可以注册一个回调函数，当某个对象被垃圾回收时，这个回调函数会被调用。

let registry = new FinalizationRegistry((heldValue) => {
  console.log(`对象被回收了，heldValue: ${heldValue}`);
  // 在这里执行清理操作，例如释放资源
});

let obj = { name: "李四", age: 25 };
let weakObj = new WeakRef(obj);

// 注册 obj 对象，并传递一个 heldValue
registry.register(obj, "obj的heldValue");

// 解除 obj 的强引用
obj = null;

// 等待一段时间，让垃圾回收器运行
setTimeout(() => {
  // 垃圾回收后，FinalizationRegistry 的回调函数会被调用
}, 1000);

代码解释：

1. new FinalizationRegistry((heldValue) => { ... }) 创建了一个 FinalizationRegistry 对象，并定义了一个回调函数。 heldValue 是在注册对象时传递的额外参数。
2. registry.register(obj, "obj的heldValue") 将 obj 对象注册到 FinalizationRegistry 中，并传递一个 heldValue。
3. 当 obj 对象被垃圾回收时，FinalizationRegistry 的回调函数会被调用，并传入 heldValue。

FinalizationRegistry 的作用：

• 在对象被回收后执行清理操作，例如释放资源、更新缓存等。
• 提供了一种可靠的方式来执行清理操作，避免内存泄漏。

4. WeakRef 在 DOM 世界的妙用： 缓存 DOM 元素

在 Web 开发中，我们经常需要缓存 DOM 元素，以便提高性能。 但是，如果 DOM 元素从 DOM 树中移除，但 JavaScript 代码仍然持有对该元素的强引用，就会导致内存泄漏。 使用 WeakRef 可以解决这个问题。

场景： 假设我们有一个复杂的页面，其中包含大量的 DOM 元素。 我们需要缓存这些 DOM 元素，以便快速访问。 但是，当某些 DOM 元素被移除时，我们希望它们能够被垃圾回收。

// 创建一个 WeakMap 用于存储 DOM 元素的弱引用
let domCache = new WeakMap();

function getElement(id) {
  // 1. 先从缓存中查找
  let elementRef = domCache.get(id);
  if (elementRef) {
    let element = elementRef.deref();
    if (element) {
      console.log(`从缓存中获取元素 ${id}`);
      return element;
    } else {
      // 缓存中的元素已经被回收，需要重新获取
      console.log(`缓存中元素 ${id} 已被回收，重新获取`);
      domCache.delete(id); // 清理无效的缓存
    }
  }

  // 2. 如果缓存中没有，则从 DOM 中获取
  let element = document.getElementById(id);
  if (element) {
    console.log(`从 DOM 中获取元素 ${id}`);
    // 创建弱引用并存储到缓存中
    domCache.set(id, new WeakRef(element));
    return element;
  }

  return null;
}

// 示例用法
let element1 = getElement("myElement1"); // 从 DOM 中获取
let element2 = getElement("myElement1"); // 从缓存中获取

// 模拟 DOM 元素被移除
if (element1) {
  element1.parentNode.removeChild(element1);
}

// 模拟等待一段时间，让垃圾回收器运行
setTimeout(() => {
  let element3 = getElement("myElement1"); // 从 DOM 中获取 (缓存已被清理)
}, 1000);

代码解释：

1. domCache 是一个 WeakMap，用于存储 DOM 元素的弱引用。 WeakMap 的键是字符串（元素的 ID），值是 WeakRef 对象。
2. getElement(id) 函数首先尝试从缓存中获取 DOM 元素。
   • 如果缓存中存在该元素的弱引用，则使用 deref() 方法获取原始 DOM 元素。
   • 如果 deref() 返回 undefined，说明原始 DOM 元素已经被垃圾回收，需要从缓存中删除该条记录。
3. 如果缓存中没有该元素，则从 DOM 中获取，并创建一个新的 WeakRef 对象存储到缓存中。
4. element1.parentNode.removeChild(element1) 模拟 DOM 元素被移除。
5. 当 DOM 元素被移除后，由于 domCache 中存储的是弱引用，因此该元素可以被垃圾回收。
6. 下次调用 getElement(id) 时，由于缓存中的弱引用已经失效，因此会重新从 DOM 中获取该元素。

为什么使用 WeakMap？

• WeakMap 的键必须是对象。 这里我们使用字符串作为键，因此需要将字符串包装成一个对象。 但是，由于 WeakMap 对键是弱引用，因此我们可以避免内存泄漏。
• 当键对象被垃圾回收时，WeakMap 中对应的键值对也会被自动删除。

5. WeakRef 的高级用法： 解决循环引用问题

循环引用是指两个或多个对象相互引用，导致它们都无法被垃圾回收。 WeakRef 可以用来打破循环引用，避免内存泄漏。

场景： 假设我们有两个类：Parent 和 Child。 Parent 对象持有 Child 对象的引用，Child 对象也持有 Parent 对象的引用，从而形成循环引用。

class Parent {
  constructor(name) {
    this.name = name;
    this.children = [];
  }

  addChild(child) {
    this.children.push(child);
    child.setParent(this); // 循环引用
  }
}

class Child {
  constructor(name) {
    this.name = name;
    this.parent = null;
  }

  setParent(parent) {
    this.parent = parent;
  }
}

// 创建 Parent 和 Child 对象
let parent = new Parent("父亲");
let child = new Child("儿子");

// 添加子节点，形成循环引用
parent.addChild(child);

// 解除强引用
parent = null;
child = null;

// 即使解除了强引用，由于循环引用，Parent 和 Child 对象仍然无法被垃圾回收

使用 WeakRef 解决循环引用：

class Parent {
  constructor(name) {
    this.name = name;
    this.children = [];
  }

  addChild(child) {
    this.children.push(child);
    child.setParent(this); // 循环引用
  }
}

class Child {
  constructor(name) {
    this.name = name;
    // 使用 WeakRef 存储 parent 的弱引用
    this.parent = new WeakRef(null);
  }

  setParent(parent) {
    this.parent = new WeakRef(parent);
  }

  getParent() {
    return this.parent.deref();
  }
}

// 创建 Parent 和 Child 对象
let parent = new Parent("父亲");
let child = new Child("儿子");

// 添加子节点，形成循环引用
parent.addChild(child);

// 解除强引用
parent = null;
child = null;

// 现在 Parent 和 Child 对象可以被垃圾回收

代码解释：

1. 在 Child 类中，使用 WeakRef 来存储 parent 对象的弱引用。
2. setParent(parent) 方法也使用 WeakRef 来存储 parent 对象的弱引用。
3. getParent() 方法使用 deref() 方法来获取 parent 对象。

通过使用 WeakRef，我们打破了 Child 对象对 Parent 对象的强引用，从而避免了循环引用。 现在，当 parent 和 child 对象不再被需要时，它们可以被垃圾回收。

6. WeakRef 的注意事项

• 不要过度使用 WeakRef。 只有在确实需要缓存对象或解决循环引用问题时才应该使用 WeakRef。
• WeakRef 并不保证对象一定会被垃圾回收。 垃圾回收的时机是由 JavaScript 引擎决定的。
• WeakRef 会增加代码的复杂性。 在使用 WeakRef 时，需要特别注意对象的生命周期和状态。
• 避免在 FinalizationRegistry 的回调函数中执行耗时操作。 回调函数应该尽可能快地完成，以避免阻塞垃圾回收。
• WeakRef 的使用场景相对有限，主要用于底层库和框架的开发。 在日常的 Web 开发中，很少需要直接使用 WeakRef。

7. 小结

特性	强引用 (Strong Reference)	弱引用 (WeakRef)
对象生存周期	只要存在强引用，对象就不会被回收	允许对象在没有其他强引用时被回收
访问方式	直接访问	需要通过 deref() 方法访问
应用场景	默认引用方式，适用于大多数情况	缓存、解决循环引用、FinalizationRegistry
内存泄漏风险	高	低
代码复杂度	低	高

WeakRef 就像一位隐士，默默地守护着内存的健康。 它不是万能的，但它在特定的场景下，能发挥巨大的作用。 希望今天的讲解能让大家对 WeakRef 有更深入的了解。

感谢大家的聆听， 下次再见！