js函数中关于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);

想不通为什么这里fn()不加return ，i自加到10，不走else,return的是undefined而不是10,我知道加了递归调用的时候加了return fn()就可以返回10，但是不能理解

var i = 0;
function fn(){
    i++;
    if(i < 10){
        //不管什么代码，递归还是其他的，我不关心，它造个原子弹也行
        fn()
        //没有返回值吧？所以返回undefined
    }else{
        //后面的递归你不去想，第一次的fn并不会进入这个分支
        return i;
    }
}

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

不要被递归绕晕了，你不要管什么递归，它就是一个函数，在第一个fn进入的i<10分支里，没有返回值，那么这个函数就返回默认的undefined

我们这里减少一下递归层数，手把手的一层层展开

var i = 0;
function fn(){
    i++; // 1
    if(i < 2){
        //fn()代码直接写进去
        function() {
            i++ // 2
            if(i < 2) {
                ... //不会进入
            }else {
                return i 
                // 貌似这里有返回值, 但是这里是这个函数的返回值，
                //不是上面fn的返回值，而且你并没有使用这个返回值
            }
        }()
    }else{
        return i;
    }
}

最外层return没执行

可以这样理解

functon fn(){
    i++
    if(i < 2){
        //没 return
        (function fn(){
          i++;
          if(i<2){
            
          }else{
            rerurn i//return i
          }
        })
    }else{
        return i;//没执行
    }
}

转载本站文章《js函数中关于fn()和return fn()的一个问题》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/js/2009_0108_8077.html