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

更新时间：2016年07月05日 16:22:30 作者：饶总真坏

这篇文章主要带领大家深入理解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,不会继续下一次递归。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

利用JS实现点击按钮后图片自动切换的简单方法
下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
JS正则替换掉小括号及内容的方法
下面小编就为大家带来一篇JS正则替换掉小括号及内容的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
手写Spirit防抖函数underscore和节流函数lodash
这篇文章主要介绍了手写Spirit防抖函数underscore和节流函数lodash，接下来将会带你们了解下这两者的区别,以及我们该如何手写实现这两个函数
2022-03-03
JavaScript 拖拉时间之drag案例详解
这篇文章主要介绍了JavaScript 拖拉时间之drag案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09
Textbox控件注册回车事件及触发按钮提交事件具体实现
Lyncplus客户端中访问Web页面时遇到了TextBox控件回车自动完成按钮的提交事件失效的情况,于是上网查找相关的介绍最终解决了这两个问题，感兴趣的你可以参考下或许对你有所帮助
2013-03-03
JS如何根据条件取出数组中对应项
这篇文章主要介绍了JS根据条件取出数组中对应项,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
js移动焦点到最后位置的简单方法
下面小编就为大家带来一篇js移动焦点到最后位置的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
uniapp H5 https跨域请求实现
这篇文章主要介绍了uniapp H5 https跨域请求实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
js以分隔符分隔数组中的元素并转换为字符串的方法
下面小编就为大家带来一篇js以分隔符分隔数组中的元素并转换为字符串的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
js如何在字符串中查找某个字符的位置
这篇文章主要给大家介绍了关于js如何在字符串中查找某个字符的位置的相关资料,在JavaScript中我们经常需要对字符串进行各种操作,包括查找包含特定字符的字符串,需要的朋友可以参考下
2023-11-11