简单易懂的现代魔法-递归

29

平时在前端开发中,好像也没啥用到递归的地方。不过这并不代表递归不重要,如果你看过一些框架的源码,就会经常见到它的影子:比如渲染虚拟DOM的render函数,webpack中require依赖分析,Koa2洋葱式的中间件模型,其实都运用到了递归算法。

博客原文

递归概念

那么递归到底是啥?先上两张图:

图1:

图2:

递归,就是在运行的过程中调用自己

我们来看个最简单的阶乘函数:

5! = 5 * 4 * 3 * 2 * 1
function factorial(num) {
    if (num === 1) { // 基线条件
        return 1;
    }

    // 递归条件
    return num * factorial(num-1);
}

factorial(5);

一个常规的递归函数都有两部分:

  1. 基线条件(if (num === 1)):保证函数不再调用自己,避免无限循环
  2. 递归条件(num * factorial(num-1)):保证函数能够调用自己

调用栈

栈是一种先进后出的数据结构,它只有两种操作,出栈和入栈

const nekopara = ['chocolat', 'Coconut'];
nekopara.push('vanilla'); // 入栈
nekopara.pop(); // 出栈

代码在运行过程中,会有一个叫做调用栈(call stack)的概念。

function greet(name) {
    console.log(`hello, ${name}!`)
    greet2(name);
    console.log(`getting ready to say bye`);
    bye();
}

function greet2(name) {
    console.log(`how are you, ${name}?`);
}

function bye() {
    console.log(`bye`);
}

greet('deepred');

调用greet('deepred')时,计算机会首先给该函数分配一块内存,并将变量名name设置为deepred

greet

每当调用函数时,都会分配一个内存块并将涉及到的变量值存储到内存中。

打印hello, deepred后,调用了greet2('deepred')。同样,计算机再次分配了一块内存,并且该内存块位于第一个内存块上面。

greet

调用栈的最上面表示当前运行的函数,如图所示,现在正在运行的是greet2函数,打印输出how are you, deepred?后,函数greet2执行完毕,栈顶的内存块被弹出。

现在栈顶的内存块又变回greet,这意味着我们从greet2的函数中跳出,再次返回到了greet。

我们在greet中调用了greet2时,greet只执行了一部分。

特别注意:调用另外一个函数时,当前函数暂停并且处于未完成状态,暂停函数的所有变量的值仍然在内存中

执行完greet2后,我们回到了greet,并从离开的地方开始接着往下执行:首先打印getting ready to say bye,然后调用bye函数。

在栈顶添加了bye函数的内存块后,开始执行bye函数,打印bye,然后函数返回,内存块被弹出。

我们又再次回到了greet中,这次没有其他要运行的代码了,于是从greet函数中返回,内存块被弹出,调用栈最后为空。

完整的一次调用流程

greet

递归调用栈

递归同样使用调用栈

我们来分析下阶乘fact(3)的调用栈

function fact(num) {
   if (num === 1) { 
       return 1;
   }
   return num * fact(num-1);
}

fact(3);

直接看图:
greet

递归注意事项

递归会导致程序的性能变低

如果递归嵌套很深,那么调用栈会很长,这将占用大量内存,可能会导致栈溢出

你可能感兴趣的

12 条评论
小蛮牛试刀 · 2018年07月31日

讲的非常好,给个赞,让我这种笨人也学会了递归

回复

fofo · 2018年07月31日

讲得很透彻,通俗易懂,功底不俗,很赞!!!

其实递归在前端开发中,还是很有适用场景的 ,比如: 对象的深拷贝、选项树形展开或者类文件夹展开等。

函数调用结合内存,有了调用栈概念,学习!!!

回复

0

嗯,的确还是有很多使用场景的

深红 作者 · 2018年07月31日
苟且 · 2018年07月31日

我是来看图的

回复

瓦力 · 2018年07月31日

我也是来看图的

回复

Sept斯科菲尔 · 2018年08月01日

这个解释很白。哦,不是,我是说这个内容很滑很嫩。。。。

回复

ciuciu · 2018年08月01日

多谢分享

回复

oyasumi · 2018年08月02日

nekopara还行

回复

茕茕 · 2018年08月03日

这个图真的是帮助很大~加上文字描述。分分钟就懂了递归到底是咋回事了~!

回复

FlagCrasher · 2018年08月04日

人类的本质是

回复

卡门 · 2018年10月08日

见图进

回复

李文耀 · 2018年12月17日

图文并茂👍

回复

载入中...