js死递归却不一定栈溢出

三个案例代码

先看下面三种js代码：

function foo() {
 foo() 
}
foo()

function foo() {
  setTimeout(foo, 0)
}
foo()

function foo() {
    return Promise.resolve().then(foo)
}
foo()

这三段类似死循环的递归代码都会导致栈溢出吗？
结果是否定的，只有第一段函数代码会导致栈溢出。
第二段代码会正确执行，第三段代码也不会导致栈溢出但却会让整个页面卡住。

现象原因

这三段代码的底层执行逻辑是完全不同的：

• 第一段代码是在同一个任务中重复调用嵌套的 foo 函数，这个任务是在同一个函数调用栈中完成，所以会导致栈溢出；
• 第二段代码是使用 setTimeout 让 foo 函数在不同的任务中执行，所以不会导致栈溢出；
• 第三段代码是在同一个任务中执行 foo 函数，但是却不是嵌套执行，所以也不会导致栈溢出；

原因详解

首先，第一段代码会导致栈溢出的现象是很显然，这里我就不做解释。
在开始解释第二个原因前，先做一个铺垫：
解析引擎执行代码的环境除了主线程和调用栈外还包括消息队列，主线程会从消息队列中取出需要执行的宏任务，而取出的任务就是要执行的这段代码，然后结合调用栈来执行代码，代码执行完毕后会退出当前函数调用栈。

setTimeout封装的函数是一个宏任务，所以递归调用setTimeout里的foo函数时只会使得主线程不断重复的从消息队列中取出由setTimeout所产生的不同的宏任务，并且，每次执行完宏任务时都会及时退出foo函数的调用栈，所以不会导致栈溢出。

同样，在开始解释第三个原因前，也先做一个铺垫：
JavaScript 中引入了微任务，微任务会在当前（宏）任务执行结束之前被执行，这也就意味着在当前微任务执行结束之前，消息队列中的其他任务是不可能被执行的。

Promise.resolve()会触发微任务，解析引擎会将该微任务添加进微任务队列中，退出当前 foo 函数的执行。然后，解析引擎在准备退出当前的宏任务之前，会检查微任务队列，发现微任务队列中有一个微任务，于是先执行微任务。由于这个微任务就是调用 foo 函数本身，所以在执行微任务的过程中，需要继续调用 foo 函数，在执行 foo 函数的过程中，又会触发了同样的微任务。那么这个循环就会一直持续下去，当前的宏任务无法退出，也就意味着消息队列中其他的宏任务是无法被执行的，比如通过鼠标、键盘所产生的事件。这些事件会一直保存在消息队列中，页面无法响应这些事件，具体的体现就是页面的卡死。同样，由于每次执行微任务时都会退出foo 函数的调用栈，所以不会导致栈溢出。