递归函数返回后参数为何恢复原值？JS递归执行逻辑疑问

先看你提供的递归代码：

function foo(i) {
  if (i < 0) {
    return;
  }
  console.log(`begin: ${i}`);
  foo(i - 1);
  console.log(`end: ${i}`);
}
foo(3);

你的理解误区在于：**当i=-1时，函数直接触发return退出，根本不会执行后面的console.log(\end: ${i}`)**。这个end的打印语句，是在if(i<0)判断之后、递归调用foo(i-1)之后的代码，只有当i>=0`时，才会走到这一步。

我们一步步拆解执行流程：

• 调用foo(3)：i=3满足i>=0，先打印begin: 3，接着调用foo(2)。
• 调用foo(2)：i=2满足i>=0，打印begin: 2，调用foo(1)。
• 调用foo(1)：i=1满足i>=0，打印begin: 1，调用foo(0)。
• 调用foo(0)：i=0满足i>=0，打印begin: 0，调用foo(-1)。
• 调用foo(-1)：i=-1触发if(i<0)条件，直接return退出函数，没有执行任何打印操作，回到上一层foo(0)中foo(i-1)调用完成的位置，执行console.log(\end: 0`)`。
• foo(0)执行完毕，回到foo(1)中foo(i-1)调用完成的位置，执行console.log(\end: 1`)`。
• foo(1)执行完毕，回到foo(2)中foo(i-1)调用完成的位置，执行console.log(\end: 2`)`。
• foo(2)执行完毕，回到foo(3)中foo(i-1)调用完成的位置，执行console.log(\end: 3`)`。

这就是为什么实际输出是从end:0开始往上打印到end:3，而不是你以为的end:-1。

内容的提问来源于stack exchange，提问作者Shubham