求解释js递归

function foo(i) {
  if (i < 0)
  return;
  console.log('begin:' + i);
  foo(i - 1);
  console.log('end:' + i);
}
foo(3);

// begin:3
// begin:2
// begin:1
// begin:0
// end:0
// end:1
// end:2
// end:3

求帮忙解释这段代码的流程，本人太菜所以希望大神详细点。

---

你可以理解当函数执行到foo(i-1)时，程序会将foo(i-1)执行完成后，再执行console.log("end:"+i)

---

function foo(i) {
    if (i < 0)
        return;
    console.log('begin:' + i);
    foo(i - 1);
    console.log('end:' + i);
}

//你把代码 拓展开成这样。。。

foo(2) {
    console.log('begin:' + 2);
    foo(1){
        console.log('begin:' + 1);
        foo(0){
            console.log('begin:' + 0);
            foo(-1){
                return
            }
            console.log('end:' + 0);
        }
        console.log('end:' + 1);
    }
    console.log('end:' + 2);
}
foo(3);

---

function foo(i) {
  if (i < 0)
  return;
  console.log('begin:' + i);
  foo(i - 1);
  console.log('end:' + i);
}
foo(3);

foo函数首先被定义
foo(3)[foo3,i=3]开始执行函数
在函数内部i=3 执行 console.log; begin:3
执行到foo(2)[foo2,i=3],在此处假设存在一个检查点checkpoint CP2，
再次进入foo函数,i=2 执行console.log;begin:2
执行到foo(1)[foo1,i=2],在此处假设存在一个检查点checkpoint CP1，
再次进入foo函数,i=1 执行console.log;begin:1
执行到foo(0)[foo0,i=1],在此处假设存在一个检查点checkpoint CP0，
再次进入foo函数,i=0 执行console.log;begin:0
执行到foo(-1)[foo-1,i=0],在此处假设存在一个检查点checkpoint CP-1，
再次进入foo函数,i=-1,i<0;foo函数return；此时返回的CP-1，
[foo-1]执行结束，从CP-1往下执行，此时i=0,执行console.log;end:0
[foo0]执行结束，从CP0往下执行，i=1,,执行console.log;end:1
[foo1]执行结束，从CP1往下执行，i=2,,执行console.log;end:2
[foo2]执行结束，从CP2往下执行，i=3,,执行console.log;end:3,[foo3]也执行结束

[foo3[foo2[foo1[foo0[foo-1]]]]]

---

你直接跟踪一下函数的运行，比如当i=3是，f(3)--3-->f(2)--2-->f(1)--1-->f(0)--0-->f(-1),当i=-1,return跳出函数.执行console.log返回0，1，2，3

---

这是函数栈，如果不清楚栈，先去了解栈。然后想象一下，每次去把执行的函数压栈，执行完毕再出栈。即可。

---

看看下面的执行过程应该就能明白了。