JavaScript递归函数行为解析：意外输出原因探究

原始代码 #

function factorial(n) {
    if (n === 0 || n === 1) {
        return 1;
    } else {
        console.log(factorial( (n - 1) ));
        return n * factorial(n - 1);
    }
}

const number = 5;
const result = factorial(number);
console.log(result);

实际输出 #

1
2
1
6
1
2
1
24
1
2
1
6
1
2
1
120

问题1：输出中为何会重复出现数值1和2？ #

因为代码的else分支存在两次完全独立的递归调用：第一次是console.log(factorial(n-1))，会触发一次完整的factorial(n-1)执行流程并打印返回值；第二次是return n * factorial(n-1)，会再次触发一次完整的factorial(n-1)执行流程。这两次调用都会逐层递归到n=1，所以下层递归产生的1、2等输出会被重复打印。

问题2：该场景下递归函数的执行行为是怎样的，为何会产生此特定输出？ #

以n=5为例拆解执行流程：

1. 调用factorial(5)，进入else分支：
   • 首先执行console.log(factorial(4))，触发factorial(4)的完整执行：
     • factorial(4)进入else，执行console.log(factorial(3))，触发factorial(3)：
       • factorial(3)进入else，执行console.log(factorial(2))，触发factorial(2)：
         • factorial(2)进入else，执行console.log(factorial(1))，factorial(1)返回1，打印1；
         • 接着factorial(2)执行return 2 * factorial(1)，再次调用factorial(1)返回1，最终factorial(2)返回2；
       • 此时factorial(3)的console.log打印2；
       • 接着factorial(3)执行return 3 * factorial(2)，再次触发factorial(2)的完整流程：打印1，返回2，最终factorial(3)返回6；
     • 此时factorial(4)的console.log打印6；
     • 接着factorial(4)执行return 4 * factorial(3)，再次触发factorial(3)的完整流程：打印1、2、1，返回6，最终factorial(4)返回24；
   • 此时factorial(5)的console.log打印24；
   • 接着factorial(5)执行return 5 * factorial(4)，再次触发factorial(4)的完整流程：打印1、2、1、6、1、2、1，返回24，最终factorial(5)返回120；
2. 最后执行console.log(result)，打印120。

整个流程中，每一层n>1的递归都会触发两次下层递归，导致下层的输出被重复打印，最终形成了给定的输出序列。

问题3：这种行为是否与JavaScript的递归运行机制相关？ #

直接原因是代码逻辑的问题——主动发起了两次重复的递归调用，而非JavaScript递归机制本身的特性。在任何支持递归的编程语言中，只要写出相同的逻辑，都会产生类似的重复输出。

不过JavaScript的递归是基于调用栈实现的：每次递归调用都会被压入调用栈，直到触发终止条件（n=1）才开始逐层返回出栈。这个机制是整个递归流程能够执行的基础，但不是输出重复的根本原因。

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