各位好，欢迎来到今天的“JS 奇淫巧技”讲座。今天我们要聊聊 JavaScript 里两个比较神秘，但关键时刻能救命的家伙：WeakRef 和 FinalizationRegistry。准备好了吗？系好安全带，我们发车了！
第一站：记忆的迷宫与垃圾回收
在开始深入 WeakRef 和 FinalizationRegistry 之前，我们需要理解 JavaScript 引擎是如何管理内存的，特别是垃圾回收（Garbage Collection, GC）机制。
想象一下，你的代码就像一个乱糟糟的房间，充满了各种变量（物品）。有些变量你还在用（常用物品），有些变量你已经不用了（废弃物品）。垃圾回收器就像一个尽职的清洁工，负责找出并清理掉那些你不再使用的变量，释放内存空间。
JavaScript 使用的是自动垃圾回收机制，这意味着开发者通常不需要手动释放内存（像 C/C++ 那样）。垃圾回收器会定期扫描内存，找出不再被引用的对象，并将它们回收。
最常用的垃圾回收算法是标记-清除（Mark-and-Sweep）算法：
- 标记（Mark）阶段： 垃圾回收器从根对象（比如全局对象
window或globalThis）开始，遍历所有可达的对象，并给它们打上标记。这些被标记的对象就是活跃对象，意味着它们还在被使用。 - 清除（Sweep）阶段： 垃圾回收器遍历整个内存空间，找出那些没有被标记的对象（即非活跃对象），并将它们回收，释放内存。
问题来了，如果一个对象只被某些特定的引用所持有，而这些引用不应该阻止垃圾回收器回收该对象，该怎么办？这就是 WeakRef 登场的时候了。
第二站：WeakRef：若有似无的引用
WeakRef（弱引用）是 ES2021 引入的一个特性，它允许你创建一个指向对象的引用，但这个引用不会阻止垃圾回收器回收该对象。换句话说，即使一个对象只被 WeakRef 引用，垃圾回收器仍然可以回收该对象。
为什么要用 WeakRef？
- 缓存优化： 你可能想缓存一些资源，但是不希望这些缓存阻止垃圾回收器回收它们。如果内存压力很大，即使缓存被回收了，也没关系，下次再重新加载就行了。
- 避免循环引用导致的内存泄漏： 有时候，对象之间会形成循环引用，导致垃圾回收器无法判断它们是否应该被回收，从而造成内存泄漏。
WeakRef可以打破这种循环引用。 - 观察对象是否被回收： 配合
FinalizationRegistry，你可以知道一个对象何时被垃圾回收器回收。
WeakRef 的基本用法：
let obj = { data: "Important Data" };
let weakRef = new WeakRef(obj);
// 获取弱引用指向的对象
let dereferencedObj = weakRef.deref();
console.log(dereferencedObj); // { data: "Important Data" }
// 如果对象已经被垃圾回收，deref() 方法会返回 undefined
obj = null; // 解除强引用
// 等待一段时间，让垃圾回收器有机会运行
setTimeout(() => {
console.log(weakRef.deref()); // 可能是 { data: "Important Data" }，也可能是 undefined
}, 1000);代码解释：
- 我们创建了一个对象
obj。 - 我们使用
WeakRef创建了一个指向obj的弱引用weakRef。 weakRef.deref()方法用于获取弱引用指向的对象。如果对象还存在，deref()方法会返回该对象；如果对象已经被垃圾回收，deref()方法会返回undefined。- 我们将
obj设置为null，解除了对该对象的强引用。 - 我们使用
setTimeout等待一段时间，让垃圾回收器有机会运行。 - 在
setTimeout的回调函数中，我们再次调用weakRef.deref()。此时，dereferencedObj可能是原始对象，也可能是undefined，这取决于垃圾回收器是否已经回收了该对象。
需要注意的是：
- 垃圾回收器的运行时间是不确定的，所以你无法保证
weakRef.deref()何时会返回undefined。 WeakRef只能用于对象，不能用于原始类型（比如数字、字符串、布尔值）。
第三站：FinalizationRegistry：善后的管家
FinalizationRegistry 是另一个 ES2021 引入的特性，它允许你注册一个回调函数，当一个对象被垃圾回收器回收时，该回调函数会被调用。
为什么要用 FinalizationRegistry？
- 资源清理： 当一个对象被回收时，你可能需要释放该对象持有的资源，比如关闭文件、释放网络连接等。
- 监控对象生命周期： 你可以使用
FinalizationRegistry来监控对象的生命周期，了解对象何时被创建和回收。 - 调试内存泄漏： 如果你怀疑代码中存在内存泄漏，可以使用
FinalizationRegistry来跟踪对象的创建和回收情况，找出泄漏的原因。
FinalizationRegistry 的基本用法：
let registry = new FinalizationRegistry((heldValue) => {
console.log(`Object with held value ${heldValue} was finalized.`);
// 在这里执行资源清理操作
});
let obj = { data: "Important Data" };
let heldValue = "obj-123"; // 用于标识被回收的对象
registry.register(obj, heldValue);
obj = null; // 解除强引用
// 等待一段时间，让垃圾回收器有机会运行
setTimeout(() => {
// 垃圾回收器会在未来的某个时间点调用回调函数
}, 2000);代码解释：
- 我们创建了一个
FinalizationRegistry对象registry，并传入一个回调函数。这个回调函数会在对象被垃圾回收时被调用。回调函数接受一个参数heldValue，这个参数是在注册对象时传递的。 - 我们创建了一个对象
obj。 - 我们使用
registry.register(obj, heldValue)方法将obj注册到registry中。heldValue是一个任意的值，用于标识被回收的对象。 - 我们将
obj设置为null，解除了对该对象的强引用。 - 我们使用
setTimeout等待一段时间，让垃圾回收器有机会运行。 - 在未来的某个时间点，垃圾回收器会回收
obj，并调用registry的回调函数，打印出Object with held value obj-123 was finalized.。
需要注意的是：
FinalizationRegistry的回调函数是在垃圾回收器运行的某个时间点被调用的，你无法预测回调函数何时会被调用。FinalizationRegistry的回调函数是在一个低优先级的任务队列中执行的，所以回调函数的执行可能会被延迟。- 在回调函数中，不要引用任何可能已经被回收的对象，否则可能会导致错误。
FinalizationRegistry的回调函数只能被调用一次，当对象被垃圾回收后，回调函数就不会再被调用了。
第四站：WeakRef + FinalizationRegistry：珠联璧合
WeakRef 和 FinalizationRegistry 经常一起使用，可以实现一些有趣的功能。例如，你可以使用 WeakRef 来创建一个缓存，并使用 FinalizationRegistry 来在对象被回收时清理缓存。
let cache = new Map();
let registry = new FinalizationRegistry((key) => {
console.log(`Cleaning up cache entry for key ${key}`);
cache.delete(key);
});
function getCachedData(key, createData) {
let cachedRef = cache.get(key);
let cachedData = cachedRef ? cachedRef.deref() : undefined;
if (!cachedData) {
console.log(`Creating new data for key ${key}`);
cachedData = createData(key);
cache.set(key, new WeakRef(cachedData));
registry.register(cachedData, key);
} else {
console.log(`Using cached data for key ${key}`);
}
return cachedData;
}
// 使用示例
let data1 = getCachedData("data1", (key) => ({ value: `Data for ${key}` }));
let data2 = getCachedData("data1", (key) => ({ value: `Data for ${key}` })); // 使用缓存
// 模拟对象被回收
data1 = null;
// 等待一段时间，让垃圾回收器有机会运行
setTimeout(() => {
// 垃圾回收器会在未来的某个时间点回收 data1，并清理缓存
}, 3000);代码解释：
- 我们创建了一个
Map对象cache，用于存储缓存数据。 - 我们创建了一个
FinalizationRegistry对象registry，用于在对象被回收时清理缓存。 getCachedData函数用于获取缓存数据。如果缓存中存在数据，则直接返回缓存数据；如果缓存中不存在数据，则创建新的数据，并将其添加到缓存中。- 我们将新的数据添加到缓存时，使用
WeakRef来存储数据，这样可以避免缓存阻止垃圾回收器回收数据。 - 我们使用
registry.register(cachedData, key)方法将新的数据注册到registry中，这样可以在数据被回收时清理缓存。 - 当
data1被设置为null时，垃圾回收器会在未来的某个时间点回收data1，并调用registry的回调函数，清理缓存中对应的条目。
第五站：Reachability Semantics：可达性语义
WeakRef 和 FinalizationRegistry 的核心在于可达性（Reachability） 的概念。一个对象是否可以被垃圾回收，取决于它是否可以从根对象（比如全局对象）通过一系列的引用链到达。
- 强引用： 强引用会阻止垃圾回收器回收对象。如果一个对象被强引用，那么它就是可达的。
- 弱引用： 弱引用不会阻止垃圾回收器回收对象。即使一个对象只被弱引用，垃圾回收器仍然可以回收该对象。
WeakRef 和 FinalizationRegistry 的 Reachability Semantics 可以总结如下：
| 特性 | 作用 | 对可达性的影响 |
|---|---|---|
WeakRef |
创建一个弱引用，指向一个对象。 | 不阻止对象被垃圾回收。如果对象只被弱引用，那么它仍然是可回收的。 |
FinalizationRegistry |
注册一个回调函数，当对象被垃圾回收时，该回调函数会被调用。 | 不影响对象的垃圾回收。即使一个对象被注册到 FinalizationRegistry 中，它仍然可以被垃圾回收。 |
| 结合使用 | 使用 WeakRef 创建缓存，并使用 FinalizationRegistry 在对象被回收时清理缓存。 |
既可以避免缓存阻止垃圾回收，又可以在对象被回收时释放资源。 |
举个例子：
let obj = { data: "Some Data" }; // obj 被强引用，可达
let weakRef = new WeakRef(obj); // weakRef 弱引用 obj, obj 仍然可达
let registry = new FinalizationRegistry(() => { console.log("Finalized!") }); // registry 持有回调函数
registry.register(obj, "obj"); // 注册 obj, obj 仍然可达
obj = null; // obj 不再被强引用，weakRef 仍然持有引用，但 obj 现在是可能被回收的
// 等待一段时间，垃圾回收器可能会回收 obj，并调用 FinalizationRegistry 的回调
setTimeout(() => {
console.log(weakRef.deref()); // 可能是 undefined, 也可能是原始对象
}, 1000);在这个例子中，一开始 obj 是可达的，因为有一个强引用指向它。当我们把 obj 设置为 null 之后，它就不再被强引用了。虽然 weakRef 仍然持有对 obj 的弱引用，但 obj 现在是可能被回收的。这意味着垃圾回收器可以在未来的某个时间点回收 obj，并且调用 FinalizationRegistry 的回调函数。
第六站：注意事项与最佳实践
在使用 WeakRef 和 FinalizationRegistry 时，需要注意以下几点：
- 不要过度使用：
WeakRef和FinalizationRegistry应该只在必要的时候使用。过度使用可能会使代码难以理解和维护。 - 考虑性能： 垃圾回收器的运行会消耗一定的性能。过度使用
WeakRef和FinalizationRegistry可能会导致性能下降。 - 谨慎使用回调函数：
FinalizationRegistry的回调函数是在一个低优先级的任务队列中执行的，所以回调函数的执行可能会被延迟。在回调函数中，不要执行耗时的操作，也不要依赖于回调函数立即执行。 - 避免循环引用： 尽量避免对象之间形成循环引用，否则可能会导致内存泄漏。可以使用
WeakRef来打破循环引用。 - 测试和调试： 使用
WeakRef和FinalizationRegistry的代码可能难以测试和调试。建议编写充分的测试用例，并使用调试工具来跟踪对象的生命周期。
最佳实践：
- 使用
WeakRef来创建缓存，避免缓存阻止垃圾回收。 - 使用
FinalizationRegistry来在对象被回收时清理资源。 - 使用
FinalizationRegistry来监控对象的生命周期，调试内存泄漏。 - 在
FinalizationRegistry的回调函数中，只执行简单的资源清理操作。 - 编写清晰的代码，并添加适当的注释，方便理解和维护。
总结：
WeakRef 和 FinalizationRegistry 是 JavaScript 中两个高级特性，可以帮助你更好地管理内存和资源。虽然它们的使用场景相对较少，但在某些情况下，它们可以解决一些棘手的问题。希望今天的讲座能够帮助你理解 WeakRef 和 FinalizationRegistry 的工作原理和使用方法。
下次再见！记得保持代码的整洁，就像打扫你的房间一样！