JS `WeakRef` `Targeting` `FinalizationRegistry` `Callback` 的调度时机与陷阱

大家好，我是你们今天的JS避坑指南针，今天要跟大家聊聊 WeakRef、Targeting、FinalizationRegistry 和 Callback 这四个家伙凑在一起的时候，会发生哪些让人挠头的事情。这几个家伙单独拎出来都挺好理解，但是一旦搅和在一起，就容易出现一些意想不到的状况。

我们今天的目标是：彻底搞清楚它们的调度时机，并且挖出那些潜藏的陷阱，让大家以后遇到类似问题的时候，能够优雅地解决，而不是一脸懵逼地对着屏幕发呆。

第一部分：WeakRef，Targeting，它们究竟是什么玩意儿？

首先，我们来简单回顾一下这几个概念。如果你已经很熟悉了，可以跳过这一部分。

• WeakRef (弱引用): 想象一下，你有一个玩具（对象），你不想让这个玩具一直霸占着空间，如果没人玩它了，你就希望垃圾回收器（GC）能把它收走。WeakRef 就像一个“弱鸡”的引用，它不会阻止 GC 回收这个对象。只要指向对象的唯一引用是 WeakRef，那么这个对象就可以被回收。

  let target = { name: "我的玩具" };
  let weakRef = new WeakRef(target);
  
  console.log(weakRef.deref() === target); // true
  
  target = null; // target 不再指向这个对象
  
  // 等待一段时间，让 GC 执行...  （这部分很难控制，后面会讲到）
  
  console.log(weakRef.deref()); // 可能会输出 undefined，也可能仍然输出 { name: '我的玩具' }

• Targeting (目标对象): Targeting 指的是 WeakRef 实际引用的那个对象。在上面的例子中，target 指向的对象就是 Targeting。

• FinalizationRegistry (终结注册表): 这是一个神奇的工具，允许你在某个对象被垃圾回收之后，执行一个回调函数。你可以把它想象成一个“遗嘱执行人”，在对象去世后，帮你处理一些后事。

  let registry = new FinalizationRegistry((heldValue) => {
    console.log("对象被回收了，这是 heldValue: ", heldValue);
  });
  
  let target = { name: "我的玩具" };
  registry.register(target, "玩具的名字"); // 注册 target，并传递 heldValue
  
  target = null;
  
  // 等待一段时间，让 GC 执行...
  
  // 可能会输出 "对象被回收了，这是 heldValue:  玩具的名字"

• Callback (回调函数): 这就是 FinalizationRegistry 注册的，在对象被回收后执行的函数。

第二部分：调度时机大揭秘！

搞清楚这几个家伙的调度时机是关键。记住，GC 的行为是不可预测的，它由 JavaScript 引擎决定，我们无法强制 GC 执行。但是，我们可以了解 GC 的一些基本原则，以及 WeakRef 和 FinalizationRegistry 的工作方式，从而更好地预测和控制程序的行为。

1. WeakRef 的 deref() 方法：

   • deref() 方法用于获取 WeakRef 引用的对象。
   • 如果目标对象仍然存在，deref() 返回目标对象。
   • 如果目标对象已经被垃圾回收，deref() 返回 undefined。
   • 重点： deref() 的返回值反映了目标对象当前的状态。它不会触发 GC，也不会延迟对象的回收。

2. FinalizationRegistry 的 register() 方法：

   • register() 方法用于注册一个对象，以及在对象被回收后执行的回调函数。
   • 你可以传递一个 heldValue 给 register() 方法，这个值会作为参数传递给回调函数。
   • 重点： register() 方法本身不会触发 GC。它只是告诉引擎，当这个对象被回收时，要执行这个回调函数。

3. GC 的回收时机：

   • GC 的回收时机是不确定的。通常，当内存压力增大时，GC 才会启动。
   • 即使你将所有指向对象的引用都置为 null，GC 也可能不会立即回收这个对象。
   • 重要提示： 不要依赖 GC 的立即回收行为。你的代码应该能够处理对象仍然存在，或者已经被回收的情况。

4. FinalizationRegistry 的回调函数执行时机：

   • 回调函数会在目标对象被垃圾回收之后执行。
   • 回调函数的执行时机也是不确定的，它由引擎决定。
   • 重点： 回调函数的执行可能会延迟一段时间。不要指望回调函数会立即执行。
   • 更重要的是： 回调函数不会在主线程执行。它会在一个单独的后台线程执行。这意味着在回调函数中修改 DOM 或访问其他主线程资源可能会导致问题。

第三部分：陷阱大盘点！

现在，我们来看看 WeakRef、Targeting、FinalizationRegistry 和 Callback 组合在一起时，有哪些常见的陷阱。

陷阱类型	描述	解决方案	示例代码
时序问题	依赖 GC 的立即回收行为。认为将所有引用置为 null 后，对象会立即被回收，回调函数会立即执行。	不要依赖 GC 的立即回收行为。你的代码应该能够处理对象仍然存在，或者已经被回收的情况。 使用 deref() 检查对象是否仍然存在。如果需要，可以手动触发 GC（不推荐，因为 GC 是由引擎控制的）。	javascript let registry = new FinalizationRegistry((heldValue) => { console.log("对象被回收了，这是 heldValue: ", heldValue); }); let target = { name: "我的玩具" }; registry.register(target, "玩具的名字"); let weakRef = new WeakRef(target); target = null; // 不要在这里直接假设对象已经被回收 // 错误的做法： // console.log(weakRef.deref()); // 可能会输出 undefined，也可能仍然输出 { name: '我的玩具' } // 正确的做法： setTimeout(() => { console.log(weakRef.deref()); // 可能会输出 undefined，也可能仍然输出 { name: '我的玩具' } // 这仅仅是在一段时间后检查，仍然不能保证对象已经被回收 }, 1000); // 延迟 1 秒检查
回调函数中的错误	在回调函数中访问已经不存在的资源，或者执行耗时操作。	在回调函数中，只访问必要的资源。避免执行耗时操作。如果需要执行耗时操作，可以使用 Web Workers。	javascript let registry = new FinalizationRegistry((heldValue) => { try { // 检查资源是否仍然存在 if (typeof window !== 'undefined') { // 避免访问可能已经不存在的 DOM 元素 console.log("对象被回收了，但是 window 对象仍然存在"); } else { console.log("对象被回收了，window 对象可能已经不存在"); } } catch (error) { console.error("回调函数执行出错:", error); } }); let target = { name: "我的玩具" }; registry.register(target, "玩具的名字"); target = null;
内存泄漏	在回调函数中，不小心创建了新的引用，阻止了对象的回收。	确保回调函数不会创建新的强引用，阻止对象的回收。使用 WeakRef 或 WeakMap 来存储对象之间的关系。	javascript let registry = new FinalizationRegistry((heldValue) => { // 错误的做法： // let leakedObject = heldValue; // 创建了一个新的强引用，阻止了 heldValue 的回收 // 正确的做法： // 如果需要存储 heldValue，可以使用 WeakMap let weakMap = new WeakMap(); weakMap.set(heldValue, "一些数据"); // WeakMap 不会阻止 heldValue 的回收 }); let target = { name: "我的玩具" }; registry.register(target, target); target = null;
竞态条件	在回调函数中访问共享资源，而没有进行同步。	使用锁或其他同步机制来保护共享资源。	javascript let sharedResource = 0; let lock = false; let registry = new FinalizationRegistry((heldValue) => { // 模拟一个竞态条件 if (!lock) { lock = true; sharedResource++; console.log("sharedResource incremented:", sharedResource); lock = false; } else { console.log("资源被锁定，无法访问"); } }); let target = { name: "我的玩具" }; registry.register(target, "玩具的名字"); target = null;
回调函数中的错误处理	回调函数中抛出错误，导致程序崩溃或者行为异常。	在回调函数中使用 try...catch 语句来捕获错误，并进行适当的处理。	javascript let registry = new FinalizationRegistry((heldValue) => { try { // 可能会抛出错误的代码 throw new Error("Something went wrong!"); } catch (error) { console.error("回调函数执行出错:", error); // 进行适当的错误处理，例如记录日志 } }); let target = { name: "我的玩具" }; registry.register(target, "玩具的名字"); target = null;
heldValue 的选择	选择不合适的 heldValue，导致回调函数无法完成预期的任务。	选择能够帮助回调函数完成任务的 heldValue。例如，可以传递对象的 ID 或其他标识符。	javascript let registry = new FinalizationRegistry((heldValue) => { // heldValue 是对象的 ID console.log("对象被回收了，ID 是:", heldValue); // 可以根据 ID 来执行一些清理操作 }); let target = { name: "我的玩具", id: 123 }; registry.register(target, target.id); // 传递对象的 ID 作为 heldValue target = null;
过早的取消注册	错误地取消注册了对象，导致回调函数无法执行。	确保只有在不再需要回调函数时，才取消注册对象。	javascript let registry = new FinalizationRegistry((heldValue) => { console.log("对象被回收了，这是 heldValue: ", heldValue); }); let target = { name: "我的玩具" }; let token = registry.register(target, "玩具的名字"); // ... // 错误的做法：过早地取消注册 // registry.unregister(token); target = null; // 正确的做法：只有在不再需要回调函数时，才取消注册 // registry.unregister(token);

第四部分：最佳实践！

为了避免这些陷阱，这里有一些最佳实践建议：

• 不要依赖 GC 的立即回收行为。 你的代码应该能够处理对象仍然存在，或者已经被回收的情况。
• 在回调函数中，只访问必要的资源。 避免执行耗时操作。
• 确保回调函数不会创建新的强引用，阻止对象的回收。
• 使用锁或其他同步机制来保护共享资源。
• 在回调函数中使用 try...catch 语句来捕获错误，并进行适当的处理。
• 选择能够帮助回调函数完成任务的 heldValue。
• 只有在不再需要回调函数时，才取消注册对象。
• 谨慎使用 FinalizationRegistry。 它主要用于清理一些外部资源，例如文件句柄或网络连接。不要用它来管理 JavaScript 对象之间的关系。
• 充分测试你的代码。 由于 GC 的行为是不可预测的，因此需要进行充分的测试，以确保你的代码在各种情况下都能正常工作。

第五部分：总结！

WeakRef、Targeting、FinalizationRegistry 和 Callback 组合在一起，是一个强大的工具，但也容易出错。理解它们的调度时机，并避免常见的陷阱，才能编写出健壮可靠的代码。记住，GC 是一个黑盒，我们无法完全控制它。但是，我们可以通过了解它的工作方式，以及使用适当的工具和技术，来更好地管理内存，并避免潜在的问题。

希望今天的讲解对大家有所帮助。如果大家还有什么疑问，欢迎随时提问。

感谢大家的参与！下次再见！