EventSource 中的事件侦听器是否会自动进行垃圾收集？

Question

我在 Stackoverflow 上看到过答案，提到如果 DOM 元素超出范围，它的事件监听器将被自动垃圾收集。非 DOM 元素也是如此，例如 事件源？

下面是我的意思的一个示例：（

function checkStatus(events) {
   return function() {
     if (events.readyState === EventSource.CLOSED) { 
       establishSSE(); // Is this fine?
     } else {
       setTimeout(checkStatus(events), 500);
     }
   }
}

function establishSSE() {
  const events = new EventSource("/sse/" + sseID);

  events.addEventListener("reply", sseReply);
  events.addEventListener("refresh", sseRefresh);

  setTimeout(checkStatus(events), 500);
}

establishSSE();

我知道我可以使用 onerror 事件。这只是一个示例）

在这种情况下，当 externalSSE 时，之前的事件处理程序会被垃圾回收吗？ code> 在第 4 行重新运行？

---

编辑：

我不明白如何对这些值进行垃圾收集。例如，以下工作有效：

function sseSubscribe() {
  let events = new EventSource("/v1/sse/mySSEID");

  events.addEventListener("message", sseHeartbeat);
  events.addEventListener("reply", sseReply);
}

也就是说，新消息仍然会导致 message 和 reply 处理程序运行。

但是 events 不再可以从程序内的任何位置访问。那么，它不应该被垃圾收集吗？似乎 EventSource 永远不会被垃圾收集（除非连接可能已损坏？）

---

编辑＃2：

似乎甚至如果事件处理程序是匿名的，就像这样：

function sseSubscribe() {
  let events = new EventSource("/v1/sse/SSEID");

  events.addEventListener("message", function() {
    console.log("Heartbeat");
  });
 }

 sseSubscribe();

这仍然对我有效。也就是说，Heartbeat 每 30 秒（我的服务器发送它们的时间间隔）就会记录到控制台。尽管事件立即超出范围并且在程序中的其他任何地方都无法访问，但仍然如此。

Answer 1

回答问题标题

是和否（来自评论）。当无法在任何地方访问事件源值时，可以对其进行垃圾回收¹。当并且如果它被垃圾收集时，任何声明为 addEventListener 的内联参数的匿名事件处理函数都将被垃圾收集。无法收集仍可访问的更全局定义的函数。

• 当无法在代码中访问 JavaScript 值时，它们就符合垃圾回收的条件。

• events 值的事件侦听器函数记录在对象的事件侦听器映射中：如果在代码中无法访问该对象，则也无法访问事件侦听器。 如果到达它们的唯一方法是通过事件处理程序映射（它们是匿名的），则可以进行垃圾收集。

每次调用建立SSE 时，它都会返回一个新的 EventSource 对象 - 作为对象“值”，该对象与上次调用时返回的对象不同。

当传递给 checkStatus 时，events 的值保存在传递给 setTimeout 的函数的闭包中。因此，当超时到期并执行计时器功能时，将“达到”该值。

接下来发生两种情况之一

1. events 中的EventSource 对象仍然打开。再次调用 checkStatus 会创建新的超时。这会为新的计时器回调函数创建一个新的闭包，但具有相同的 events 参数值。因此，仍然可以达到 events 的（未更改的）值，并且无法进行垃圾收集。

2. events 中的事件源已关闭。在这种情况下，checkStatus 调用 builtSSE（以重新打开源）并从计时器调用返回，而不将其参数存储在任何地方或将其保留在可以执行的闭包范围内稍后。此时，已关闭的 events 对象就可以进行垃圾回收，因为无法访问该对象。

   builtSSE 继续创建一个保存在名为 events 的变量中的新值，并用它调用 checkStatus，但它不一样值作为调用堆栈中其上方的 checkStatus 调用中超出范围的值。

但是，由于 sseReply 和 sseRefresh 未嵌套在 estabishSSE 中，因此它们不会仅仅因为 事件 就被垃圾回收> 对象值已被GC。

---

¹ 例外：blob 或文件对象参数传递给 createObjectURL 保存在内存中（当网络流量检索其数据时），必须通过调用 URL.revokeObjectURL 显式释放。

---

编辑答案

问题编辑后更新

但是事件不再可以从程序内的任何位置访问。

这是一个无效的假设，可能会导致以下问题：

1. checkStatus 的 events 参数位于 checkStatus< 返回的计时器回调函数的范围内/code> 因为回调函数嵌套在 checkStatus 中。

   


2. 回调函数无法被垃圾回收，因为 setTimeout 的[本机代码]实现必须持有对其的引用。

3. 如果 events 的值未处于关闭状态，计时器回调将通过使用现有 checkStatus 重新调用来创建新的计时器回调函数>events 对象值，为新的 setTimeout 调用生成新的回调函数。

4. 重复步骤 1。

如果直接将 checkStatus 用作计时器回调，而不对其自身进行延迟递归调用（例如通过 setTimeout 传递参数），则可能会更直接，也不会那么混乱。 code>：

function checkStatus(events) {
    if (events.readyState === EventSource.CLOSED) { 
          establishSSE(); // create a new EventSource object
          return; // the actual argument object value is now inaccessible
                  // and becomes eligble for garbage collection.
    }
    setTimeout( checkStatus, 500, events);
}

如果实现上述更改，externalSS 还需要将 checkStatus 传递给 setTimeout 作为其第一个参数，而不先调用它：

function establishSSE() {
  const events = new EventSource("/sse/" + sseID);

  events.addEventListener("reply", sseReply);
  events.addEventListener("refresh", sseRefresh);

  setTimeout(checkStatus, 500, events);
}