分析 WeakRef 和 FinalizationRegistry (ES2021) 在构建弱引用缓存和监听对象生命周期中的高级应用，并讨论其注意事项。

各位老铁，大家好！今天咱们来聊聊JavaScript里两个挺有意思的家伙：WeakRef和FinalizationRegistry。它们就像是对象世界的“侦察兵”和“殡仪馆”，帮助我们构建更智能的缓存，并在对象生命周期结束时做一些“身后事”。

咱们先来热热身，搞清楚啥是弱引用，为啥我们需要它。

一、为啥要有弱引用？GC的爱恨情仇

JavaScript有自动垃圾回收机制（GC），简单来说，GC会定期检查哪些对象“没人要”了，然后把它们占用的内存释放掉。判断标准是：一个对象如果没有任何强引用指向它，那它就变成了孤魂野鬼，可以被回收了。

let obj = { name: '老王' }; // obj是一个强引用
let anotherObj = obj;      // anotherObj也是一个强引用

obj = null; // obj指向null，但anotherObj还在指向这个对象
console.log(anotherObj.name); // 输出 '老王'

anotherObj = null; // 现在没有任何强引用指向这个对象了，GC迟早会回收它

上面的例子里，只有当anotherObj也被设置为null时，原来的{ name: '老王' }对象才真正变成“没人要”的状态。

但是，有时候我们只想“看看”一个对象，不想阻止它被回收。比如，我们想做一个缓存，当对象还在使用时，缓存就有效；对象被回收了，缓存自动失效。如果用强引用来做缓存，那对象就永远不会被回收，缓存就变成了内存泄漏的帮凶！

这时候，就需要弱引用登场了。

二、WeakRef：偷偷摸摸的“观察者”

WeakRef允许我们创建一个指向对象的弱引用。这种引用不会阻止GC回收对象。如果对象已经被回收了，WeakRef的deref()方法会返回undefined。

let obj = { name: '老王' };
let weakRef = new WeakRef(obj);

console.log(weakRef.deref()?.name); // 输出 '老王'

obj = null; // 现在没有强引用指向这个对象了

// 假设GC已经运行（实际情况需要等待），deref()会返回undefined
setTimeout(() => {
  console.log(weakRef.deref()?.name); // 输出 undefined
}, 1000);

上面的例子里，当obj被设置为null后，没有强引用指向原来的对象了。即使weakRef还在“观察”它，GC仍然可以回收它。一段时间后，weakRef.deref()返回了undefined，说明对象已经被回收了。

三、WeakRef构建弱引用缓存

弱引用最常见的应用场景就是构建弱引用缓存。咱们来写一个简单的缓存类：

class WeakRefCache {
  constructor() {
    this.cache = new Map();
  }

  get(key) {
    const ref = this.cache.get(key);
    if (ref) {
      const value = ref.deref();
      if (value) {
        return value;
      } else {
        // 对象已经被回收，从缓存中移除
        this.cache.delete(key);
        return undefined;
      }
    }
    return undefined;
  }

  set(key, value) {
    this.cache.set(key, new WeakRef(value));
  }
}

// 使用示例
const cache = new WeakRefCache();
let data = { id: 1, name: '老王' };
cache.set(1, data);

console.log(cache.get(1)?.name); // 输出 '老王'

data = null; // 没有强引用指向data了

// 假设GC已经运行
setTimeout(() => {
  console.log(cache.get(1)?.name); // 输出 undefined
}, 1000);

这个缓存类的核心思想是：

• 使用Map来存储缓存，键是缓存的键，值是WeakRef对象。
• get()方法先从Map中取出WeakRef对象，然后调用deref()方法。
• 如果deref()返回undefined，说明对象已经被回收了，从缓存中移除该条目。
• set()方法将值包装成WeakRef对象存入缓存。

这个缓存的好处是：如果缓存中的对象不再被使用，GC可以回收它们，缓存会自动失效，避免了内存泄漏。

四、FinalizationRegistry：对象的“送终人”

FinalizationRegistry允许我们在对象被GC回收后，执行一些清理工作。你可以把它想象成对象的“送终人”，负责处理对象的“身后事”。

const registry = new FinalizationRegistry(heldValue => {
  console.log(`对象被回收了，heldValue: ${heldValue}`);
});

let obj = { name: '老王' };
registry.register(obj, '老王的身份证号'); // 注册obj，并关联一个heldValue

obj = null; // 没有强引用指向obj了

// 假设GC已经运行，FinalizationRegistry的回调函数会被调用
// 输出 "对象被回收了，heldValue: 老王的身份证号"

上面的例子里，FinalizationRegistry的回调函数会在obj被回收后执行。register()方法的第二个参数heldValue会被传递给回调函数。heldValue可以用来标识被回收的对象，或者传递一些清理工作需要的信息。

五、FinalizationRegistry的应用场景

FinalizationRegistry可以用来做一些清理工作，比如：

• 释放文件句柄
• 关闭网络连接
• 取消事件监听器

但是，强烈不建议用FinalizationRegistry来做关键性的清理工作，比如释放数据库连接。原因如下：

• GC的执行时机是不确定的，你无法保证清理工作会在你期望的时间执行。
• FinalizationRegistry的回调函数是在GC线程中执行的，如果回调函数执行时间过长，会影响GC的性能。
• 在某些情况下，FinalizationRegistry的回调函数可能永远不会被执行。

因此，FinalizationRegistry更适合做一些“锦上添花”的清理工作，而不是“雪中送炭”的关键性清理工作。

六、WeakRef和FinalizationRegistry联手：更强大的对象生命周期管理

WeakRef和FinalizationRegistry可以一起使用，构建更强大的对象生命周期管理方案。比如，我们可以用WeakRef来创建一个弱引用缓存，用FinalizationRegistry来在对象被回收后，从缓存中移除该条目。

class AdvancedWeakRefCache {
  constructor() {
    this.cache = new Map();
    this.registry = new FinalizationRegistry(key => {
      console.log(`缓存条目 ${key} 对应的对象被回收了，从缓存中移除`);
      this.cache.delete(key);
    });
  }

  get(key) {
    const ref = this.cache.get(key);
    if (ref) {
      const value = ref.deref();
      if (value) {
        return value;
      } else {
        // 对象已经被回收，从缓存中移除（理论上FinalizationRegistry已经处理了，这里只是double check）
        this.cache.delete(key);
        return undefined;
      }
    }
    return undefined;
  }

  set(key, value) {
    const ref = new WeakRef(value);
    this.cache.set(key, ref);
    this.registry.register(value, key); // 注册value，当value被回收时，移除缓存条目
  }
}

// 使用示例
const cache = new AdvancedWeakRefCache();
let data = { id: 1, name: '老王' };
cache.set(1, data);

console.log(cache.get(1)?.name); // 输出 '老王'

data = null; // 没有强引用指向data了

// 假设GC已经运行，FinalizationRegistry的回调函数会被调用，并从缓存中移除条目
setTimeout(() => {
  console.log(cache.get(1)?.name); // 输出 undefined
}, 1000);

这个缓存类的改进之处在于：

• 在set()方法中，使用FinalizationRegistry注册了对象，当对象被回收时，会自动从缓存中移除该条目。
• get()方法仍然会检查WeakRef对象是否有效，如果无效，也会从缓存中移除该条目（作为双重保障）。

七、注意事项和最佳实践

在使用WeakRef和FinalizationRegistry时，需要注意以下几点：

• GC的执行时机是不确定的：不要依赖GC的执行时机来做关键性的操作。
• FinalizationRegistry的回调函数是在GC线程中执行的：避免在回调函数中执行耗时的操作。
• 避免创建循环依赖：WeakRef和FinalizationRegistry的回调函数可能会导致循环依赖，导致内存泄漏。
• 谨慎使用FinalizationRegistry：除非确实需要，否则不要使用FinalizationRegistry。优先考虑使用其他方式来管理对象的生命周期。
• Double Check: 在get方法中检查WeakRef是否已经被回收，即使使用了FinalizationRegistry。
• heldValue的选择: FinalizationRegistry的heldValue 应该选择可以唯一标识对象的值，最好是不可变的值。

八、WeakRef 和 FinalizationRegistry 的适用场景总结

为了更清晰地了解何时应该使用 WeakRef 和 FinalizationRegistry，我们用表格总结一下：

特性	WeakRef	FinalizationRegistry
核心功能	创建对对象的弱引用，允许在对象被垃圾回收时自动失效。	在对象被垃圾回收后执行清理操作。
使用场景	– 实现弱引用缓存。	– 执行非关键性的资源清理，例如释放文件句柄或取消事件监听器（但强烈不建议用于关键资源，如数据库连接）。
	– 检测对象是否仍然存在。	– 在对象被回收后发送遥测数据。
	– 避免内存泄漏，尤其是当缓存大量对象时。	– 配合 WeakRef 使用，在对象被回收后从缓存中移除条目。
优点	– 允许对象在不再被强引用时被垃圾回收。	– 提供了一种在对象被回收后执行操作的机制。
	– 可以用来实现更智能的缓存机制。	– 可以用来减少内存泄漏。
缺点	– deref() 方法可能返回 undefined，需要进行空值检查。	– GC 的执行时机不确定，回调函数的执行时机也无法保证。
	– 不能完全替代强引用，因为对象可能随时被回收。	– 回调函数在 GC 线程中执行，不应执行耗时操作。
		– 容易产生循环依赖，导致内存泄漏。
注意事项	– 始终检查 deref() 的返回值。	– 不要依赖回调函数来执行关键操作。
	– 避免过度使用，只在确实需要弱引用时使用。	– 避免在回调函数中执行耗时操作。
		– 小心处理循环依赖。
与其他特性配合	– 与 FinalizationRegistry 配合使用，可以实现更完善的对象生命周期管理。	– 与 WeakRef 配合使用，可以实现更智能的缓存机制。
适用场景示例	– 图片缓存，当图片不再显示时，可以被回收。	– 关闭不再使用的 WebSocket 连接。
	– 对象池，当对象不再被使用时，可以被回收。	– 在对象被回收后记录日志。
不适用场景示例	– 需要确保对象始终存在的场景。	– 需要立即执行的关键资源清理操作（例如数据库连接）。
	– 替代强引用进行核心逻辑处理。	– 强制执行某些必须的操作，因为回调函数可能永远不会被执行。

九、总结

WeakRef和FinalizationRegistry是JavaScript中非常有用的工具，可以帮助我们构建更智能的缓存，并在对象生命周期结束时做一些清理工作。但是，在使用它们时，一定要谨慎，避免踩坑。

总而言之，WeakRef 像是“观察者”，帮你偷偷看对象还在不在，而 FinalizationRegistry 像是“送终人”，对象没了之后帮你收拾残局。 但记住，别太依赖它们，GC 这玩意儿，你永远不知道它啥时候来！

好了，今天的讲座就到这里。希望大家有所收获！ 咱们下次再见！