一道优雅面试题分析js中fn()和return fn()的区别

fn()与return fn()的基本区别

在JavaScript开发中，函数内部调用其他函数是常见操作。此时，开发者常面临两种调用形式：直接调用fn()，或者通过return语句返回调用结果return fn()。不少初学者容易混淆这两种写法的实际效果。本文借助一道看似简单却暗藏陷阱的面试题，清晰剖析两者的差异。

var i = 0;
function fn(){
 i++;
 if(i < 10){
 fn();
 }else{
 return i;
 }
}

var result = fn();
console.log(result); 

这道题目看似简单，许多人会直觉地回答打印结果为10。但实际运行代码后，控制台输出的却是undefined。这一现象直观地展示了前文提到的问题所在。当我们将代码中执行fn的那一行修改为加上return关键字后：

var i = 0;
function fn(){
 i++;
 if(i < 10){
 return fn();
 }else{
 return i;
 }
}

var result = fn();
console.log(result); 

此时再次运行，控制台终于输出了预期的结果10。

JavaScript函数默认返回值机制

那么，为什么仅仅增加一个return关键字，结果会有如此巨大的差异？

核心原因在于JavaScript函数的默认行为：如果函数执行过程中没有显式指定返回值，它将自动返回undefined。这也是为什么在Chrome浏览器的控制台直接编写代码时，经常会在下方看到一行undefined的原因。

递归过程中的返回值传递

仔细观察上述示例，当变量i递增到9时，即倒数第二次递归调用fn()的时刻。如果此处没有使用return，该次函数执行完毕后，将默认返回undefined，递归过程随之终止，不再进行下一次调用。而加上return后，程序会继续执行最后一次递归，即当i等于10时，进入else分支并正确返回10。

二分查找中的递归陷阱

基于此原理，可以引申出一个更为经典的案例：著名的二分查找算法。

var mid = Math.floor((arr.length - 1) / 2);

function search(n, mid) {
 if (n > arr[mid]) {
 mid = Math.floor((mid + arr.length) / 2);
 return search(n, mid);
 } else if (n < arr[mid]) {
 mid = Math.floor((mid - 1) / 2);
 return search(n, mid);
 } else {
 return mid;
 }
}

var index = search(n, mid);
console.log(index); 

二分查找同样依赖多次递归调用。许多新手在初次实现该算法时，常犯的一个错误就是在递归函数前遗漏了return语句。这会导致最终返回值为undefined，其原理与前文所述完全一致：若未在递归调用处使用return，递归结束后将直接返回undefined，无法继续后续递归逻辑。

以上内容即为本文的全部讲解，希望对各位的学习有所帮助，也欢迎大家继续支持本站。