深刻理解JavaScript中 fn() 和 return fn() 的区别

在js中，常常会遇到在函数里调用其它函数的状况，这时候会有 fn() 这种调用方式，还有一种是 return fn() 这种调用方式，一些初学者常常会一脸萌逼地被这两种方式给绕晕了。这里用一个优雅的面试题来分析一下两种方式的不一样之处。

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

 这是一道隐藏了坑的面试题，看似很简单，大部分人可能想都不想就答出了10。而实际上运行可知打印出来的是 undefined。这道陷阱题很直观的体现出了前面所说的问题，当咱们将执行fn的那一行修改成：

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

 这时，会发现打印出来的结果终于不负众望的是 10 了。

为何这里加不加return区别会这么大？

这里的主要缘由很简单，JavaScript的函数都是有默认返回值的，若是函数结尾不写return，会默认返回undefined，这就是为何在chrome的console控制台里，写代码常常下面会出现一行undefined的缘由。

再仔细看看这个例子，当i自增到9的时候，也就是倒数第二次递归调用fn的那一次，若是没有return，这一次执行完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,不会继续下一次递归。