javascript中function 函数递归的陷阱问题

//看下这个递归方法，最后输出的值function fn(i){
    i++;
    if(i<10){
        fn(i);
    }
    else{
        return i;
    }
}
var result = fn(0);
console.log(result);

大部分人都可能一下就会说出结果为10，但是真实的结果是undefined。为什么呢？因为对于每一个函数，没有写return的返回值的时候，其实对于var a = function(); 就是没有给a赋值，那么这个值就是默认的undefined值了，可以typeof a试下，返回的值为’undefined’。因此可以说就是默认一个返回值return undefined；所以我们将这个递归进行一下变形。如下：

function fn(i){
    i++;
    if(i<10){
        fn(i);
    }
    else{
        return i;
    }
  return undefined;
}
var result = fn(0);
console.log(result);

当然这个结果跟上面的结果是一样的。具体是什么原理呢？是为什么呢？看到这个if else 还有递归，你想想二叉树的先序遍历。具体在看代码。

function fn(i){
    i++;
    if(i<10){
    console.log("a:"+i);
        fn(i);
    }
    else{
    console.log("c:"+i);
        return i;
    }
  console.log("d:undefined"+i);
  return undefined;
}
var result = fn(0);
console.log(result);

输出结果：

看下二叉树的视图：

从输出的结果和二叉树的视图可以明显的看出递归的陷阱的原理了吧，很简单了，对于这个递归可以看错二叉树的先序遍历。当遍历右结点的时候，没有进行直接返回值，所以默认是undefined。当最后遍历到初始结点的时候，就返回了一个undefined。

所以这下应该明白递归的这个陷阱问题的原理了吧。当然只要我们在每个条件中都使用返回值，就会避免这个陷阱。具体代码如下：

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