一道优雅面试题分析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通过AES加密后PHP用Openssl解密的方法
这篇文章主要给大家介绍了关于Js如何通过AES加密后PHP利用Openssl解密的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-07-07
JavaScript中reduce方法的用法及使用场景
reduce()方法对数组中的每个元素按序执行一个提供的reducer函数,每一次运行 reducer会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值,今天我们就介绍一下reduce的几种简单使用场景,需要的朋友可以参考下
2023-08-08
CodeMirror js代码加亮使用总结
一个基于JavaScript的代码编辑器，CodeMirror支持大量语言的语法高亮,也包括css,html,js等的高亮显示。此外，CodeMirror还支持代码自动完成、搜索/替换、HTML预览、行号、选择/搜索结果高亮、可视化tab、代码自动格式等
2017-03-03
浅析Promise的介绍及基本用法
Promise是异步编程的一种解决方案，在ES6中Promise被列为了正式规范，统一了用法，原生提供了Promise对象。接下来通过本文给大家介绍Promise的介绍及基本用法，感兴趣的朋友一起看看吧
2021-10-10
JS验证IP，子网掩码，网关和MAC的方法
这篇文章主要介绍了JS验证IP，子网掩码，网关和MAC的方法,涉及javascript正则表达式的相关使用技巧,需要的朋友可以参考下
2015-07-07
JS实现苹果计算器
这篇文章主要为大家详细介绍了JS实现苹果计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
js实现自动轮换选项卡
这篇文章主要为大家详细介绍了js实现自动轮换选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
解决使用attachEvent函数时，this指向被绑定的元素的问题的方法
解决使用attachEvent函数时，this指向被绑定的元素的问题的方法...
2007-08-08
编辑浪子版表单验证类
编辑浪子版表单验证类...
2007-05-05
详解js获取video任意时间的画面截图
这篇文章主要介绍了js获取video任意时间的画面截图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具