在JavaScript中，`fn()` 和 `return fn()` 在使用上有着显著的区别，这些差异主要体现在函数的执行流程和返回值上。本篇文章通过一道面试题深入解析这两种调用方式的不同。
首先，我们要明白函数在JavaScript中的默认行为。如果一个函数没有显式地使用`return`语句返回一个值，那么它会隐式地返回`undefined`。这是在控制台中看到`undefined`的原因之一。
让我们来看一下题目中给出的第一个示例：
```javascript
var i = 0;
function fn(){
i++;
if(i < 10){
fn();
}else{
return i;
}
}
var result = fn();
console.log(result);
```
在这个例子中，由于在`if`分支中调用`fn()`，但没有返回该调用的结果，因此每次递归调用都会在`if`分支结束时返回`undefined`，而不会进入`else`分支。因此，当`i`达到10时，`fn()`的调用链并没有真正返回`10`，而是返回了`undefined`，所以`result`被赋值为`undefined`。
现在，我们修改代码，加入`return`关键字：
```javascript
var i = 0;
function fn(){
i++;
if(i < 10){
return fn();
}else{
return i;
}
}
var result = fn();
console.log(result);
```
这次，当`i`达到9时，`fn()`会返回其自身的调用结果，即再次调用`fn()`。这个过程会一直持续到`i`等于10，满足`else`条件，此时函数会返回`10`，并沿着调用栈逐层返回，最终`result`被赋值为`10`。
这个例子揭示了`return`在递归调用中的重要性。没有`return`，函数调用会中断当前执行路径，导致丢失后续的递归结果。而使用`return`，则可以确保递归调用的连续性，直到找到预期的结果。
另一个经典的案例是二分查找算法。在二分查找中，我们需要递归地调整搜索范围，直到找到目标值或确定其不存在。以下是一个二分查找的简单实现：
```javascript
var arr = [/*...*/]; // 假设这是一个已排序的数组
var n = /*...*/; // 目标值
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, Math.floor((arr.length - 1) / 2));
console.log(index);
```
在这里，每个递归调用都伴随着`return`，这样递归的每一次执行都能将结果传递回上一层，直到找到目标值或确定其不存在。如果忘记了`return`，那么即使找到了目标值，也无法正确地将结果返回给最初的调用者。
总结起来，`fn()` 和 `return fn()` 的主要区别在于是否将函数的执行结果作为返回值传递给调用者。`fn()` 只是执行函数，不传递结果；而 `return fn()` 会返回函数的执行结果，使得结果可以在调用链中传递。在涉及递归调用时，正确使用`return`至关重要，因为它决定了递归能否正确终止，并将结果返回给调用者。对于理解和编写递归函数，理解这一差异是至关重要的。
