深刻理解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,不會繼續下一次遞歸。