一道優(yōu)雅面試題分析js中fn()和return fn()的區(qū)別

更新時(shí)間：2016年07月05日 16:22:30 作者：饒總真壞

這篇文章主要帶領(lǐng)大家深入理解JavaScript中 fn() 和 return fn() 的區(qū)別，感興趣的小伙伴們可以參考一下

在js中，經(jīng)常會(huì)遇到在函數(shù)里調(diào)用其它函數(shù)的情況，這時(shí)候會(huì)有 fn() 這種調(diào)用方式，還有一種是 return fn() 這種調(diào)用方式，一些初學(xué)者經(jīng)常會(huì)被這兩種方式給繞暈了。這里用一個(gè)優(yōu)雅的面試題來(lái)分析一下兩種方式的不同之處。

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

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

這是一道隱藏了坑的面試題，看似很簡(jiǎn)單，大部分人可能想都不想就答出了10。而實(shí)際上運(yùn)行可知打印出來(lái)的是 undefined。這道陷阱題很直觀的體現(xiàn)出了前面所說(shuō)的問(wèn)題，當(dāng)我們將執(zhí)行fn的那一行修改為：

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

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

這時(shí)，會(huì)發(fā)現(xiàn)打印出來(lái)的結(jié)果終于不負(fù)眾望的是 10 了。

為什么這里加不加return區(qū)別會(huì)這么大？

這里的主要原因很簡(jiǎn)單，JavaScript的函數(shù)都是有默認(rèn)返回值的，如果函數(shù)結(jié)尾不寫(xiě)return，會(huì)默認(rèn)返回undefined，這就是為什么在chrome的console控制臺(tái)里，寫(xiě)代碼經(jīng)常下面會(huì)出現(xiàn)一行undefined的原因。

再仔細(xì)看看這個(gè)例子，當(dāng)i自增到9的時(shí)候，也就是倒數(shù)第二次遞歸調(diào)用fn的那一次，如果沒(méi)有return，這一次執(zhí)行完fn，會(huì)默認(rèn)return undefined，而不會(huì)繼續(xù)下一次遞歸了。當(dāng)加上了 return，在這里則會(huì)繼續(xù)最后一次遞歸，即i=10的時(shí)候，跳入else里面返回得到正確的10。

說(shuō)到這里，可以引申出一個(gè)更為經(jīng)典的例子，著名的二分查找法：

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);

二分查找法也是需要多次遞歸調(diào)用，很多新手在第一次實(shí)現(xiàn)這個(gè)算法的時(shí)候經(jīng)常會(huì)犯的一個(gè)錯(cuò)誤就是忘記在遞歸的函數(shù)前加上return，最后導(dǎo)致返回結(jié)果是undefined，這里的道理也和前面是類似的，不加return，會(huì)導(dǎo)致遞歸后，直接返回undefined,不會(huì)繼續(xù)下一次遞歸。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript中關(guān)于base64的一些事
base64 其實(shí)是一種編碼轉(zhuǎn)換方式, 將 ASCII 字符轉(zhuǎn)換成普通文本, 是網(wǎng)絡(luò)上最常見(jiàn)的用于傳輸8Bit字節(jié)代碼的編碼方式之一。這篇文章重點(diǎn)給大家介紹JavaScript中關(guān)于base64的一些事，感興趣的朋友跟隨小編一起看看吧
2019-05-05
微信小程序中做用戶登錄與登錄態(tài)維護(hù)的實(shí)現(xiàn)詳解
微信小程序的運(yùn)行環(huán)境不是在瀏覽器下運(yùn)行的。所以不能以cookie來(lái)維護(hù)登錄態(tài)。下面這篇文章主要給大家介紹了微信小程序中如何做用戶登錄與登錄態(tài)維護(hù)的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友可以參考學(xué)習(xí)。
2017-05-05
JavaScript實(shí)現(xiàn)簡(jiǎn)單MD5加密的腳本分享
MD5信息摘要算法是一種被廣泛使用的密碼散列函數(shù)，可以產(chǎn)生出一個(gè)128位（16字節(jié)）的散列值（hash value），用于確保信息傳輸完整一致。本文將用JavaScript實(shí)現(xiàn)簡(jiǎn)單MD5加密，感興趣的可以了解一下
2022-10-10
淺談javascript函數(shù)劫持[轉(zhuǎn)自xfocus]
javascript函數(shù)劫持，也就是老外提到的javascript hijacking技術(shù)。最早還是和劍心同學(xué)討論問(wèn)題時(shí)偶然看到的一段代碼
2008-02-02
小程序如何寫(xiě)動(dòng)態(tài)標(biāo)簽的實(shí)現(xiàn)方法
這篇文章主要介紹了小程序如何寫(xiě)動(dòng)態(tài)標(biāo)簽的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
如何用JS解析剪切板里的excel內(nèi)容
這篇文章主要介紹了如何用JS解析剪切板里的excel內(nèi)容，對(duì)解析excel感興趣的同學(xué)，可以參考下
2021-04-04
JavaScript實(shí)現(xiàn)小程序圖片裁剪功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)小程序圖片裁剪功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下
2023-03-03
layUI實(shí)現(xiàn)三級(jí)導(dǎo)航菜單效果
這篇文章主要為大家詳細(xì)介紹了layUI實(shí)現(xiàn)三級(jí)導(dǎo)航菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
js實(shí)現(xiàn)貪吃蛇游戲含注釋
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)貪吃蛇游戲含注釋，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-03-03
JavaScript實(shí)現(xiàn)獲取URL中參數(shù)值的4種方法
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)獲取URL中參數(shù)值的4種方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下
2025-02-02