为什么这样的递归没有堆栈溢出？

Question

我不明白为什么调用recSetTimeOut() 不会导致堆栈溢出错误，而recPromise() 会。

const recSetTimeOut = () => {
  console.log('in recSetTimeOut');
  setTimeout(recSetTimeOut, 0)
};
recSetTimeOut();

const recPromise = () => {
  console.log('in recPromise');
  Promise.resolve().then(recPromise);
}
recPromise();

为什么会这样？它们有什么区别？

你能解释一下幕后的过程吗？

---

编辑更多信息

在Node.js v12.1.0 和Chrome DevTools 上运行这个sn-ps：

const recSetTimeOut = () => { setTimeout(recSetTimeOut, 0); }
recSetTimeOut();

结果Node：没有错误。

结果Chrome：没有错误。

const recPromise = () => { Promise.resolve().then(recPromise); }
recPromise();

结果Node：

致命错误：无效的表大小分配失败 - JavaScript 堆内存不足

结果Chrome：浏览器崩溃。

Answer 1

让我们依次看看。

const recSetTimeOut = () => {
  console.log('in recSetTimeOut');
  setTimeout(recSetTimeOut, 0)
};
recSetTimeOut();

这实际上不是递归。您正在向调度程序注册recSetTimeOut。当浏览器的 UI 线程空闲时，它将从列表中拉出下一个等待函数，并调用它。调用堆栈永远不会增长；调度程序（本机代码）将始终位于非常短的调用堆栈的顶部。您可以通过发出异常并检查其调用堆栈来验证这一点。

• 这个函数实际上不是递归的；堆栈没有增长。
• 它在每次调用后将控制权交还给 UI 线程，从而允许处理 UI 事件。
• 只有在 UI 完成其任务并调用下一个计划任务时才会发生下一次调用。

const recPromise = () => {
  console.log('in recPromise');
  Promise.resolve().then(recPromise);
}
recPromise();

这实际上是一个无限循环，拒绝将控制权交还给 UI。每次 promise 解决时，都会立即调用 then 处理程序。完成后，将立即调用 then 处理程序。完成后... UI 线程将饿死，并且永远不会处理 UI 事件。与第一种情况一样，调用堆栈不会增长，因为每个回调都是由有效的循环进行的。这称为“承诺链”。如果一个 Promise 解析为一个 Promise，那么新的 Promise 就会被调用，这不会导致堆栈增长。但是，它所做的 是阻止 UI 线程做任何事情。

• 实际上是一个无限循环。
• 拒绝将控制权交还给 UI。
• 调用堆栈没有增长。
• 下一个调用会立即调用，并且带有极大的偏见。

您可以使用console.log((new Error()).stack) 确认两个堆栈跟踪实际上都是空的。

这两种解决方案都不应该导致堆栈溢出异常，尽管这可能取决于实现；浏览器的调度程序可能与 Node 的运行方式不同。

Answer 2

根据我对您的问题的理解，这是失败的，因为 then 不接受您所说的参数。

这样的事情可能会产生预期的结果......

const recPromise = async () => {
  return Promise.resolve(recPromise())
}