js 调用栈机制与ES6尾调用优化介绍

调用栈的英文名叫做Call Stack,大家或多或少是有听过的,但是对于js调用栈的工作方式以及如何在工作中利用这一特性,大部分人可能没有进行过更深入的研究,这块内容可以说对我们前端来说就是所谓的基础知识,咋一看好像用处并没有很大,但掌握好这个知识点,就可以让我们在以后可以走的更远,走的更快!

博客、前端积累文档、公众号、GitHub

目录

数据结构:栈

调用栈是什么?用来做什么?

调用栈的运行机制

调用栈优化内存

调用栈debug大法

数据结构:栈

栈是一种遵从后进先出(LIFO)原则的有序集合,新元素都靠近栈顶,旧元素都接近栈底。

生活中的栗子,帮助一下理解:

餐厅里面堆放的盘子(栈),一开始放的都在下面(先进),后面放的都在上面(后进),洗盘子的时候先从上面开始洗(先出)。

调用栈是什么?用来做什么?

调用栈是一种栈结构的数据,它是由调用侦组成的

调用栈记录了函数的执行顺序和函数内部变量等信息

调用栈的运行机制

机制

程序运行到一个函数,它就会将其添加到调用栈中,当从这个函数返回的时候,就会将这个函数从调用栈中删掉。

看一下例子帮助理解:

// 调用栈中的执行步骤用数字表示 printSquare(5); // 1 添加 function printSquare(x) { var s = multiply(x, x); // 2 添加 => 3 运行完成,内部没有再调用其他函数,删掉 console.log(s); // 4 添加 => 5 删掉 // 运行完成 删掉printSquare } function multiply(x, y) { return x * y; }

调用栈中的执行步骤如下(删除multiply的步骤被省略了):

js 调用栈机制与ES6尾调用优化介绍

调用侦

每个进入到调用栈中的函数,都会分配到一个单独的栈空间,称为“调用侦”。

在调用栈中每个“调用侦”都对应一个函数,最上方的调用帧称为“当前帧”,调用栈是由所有的调用侦形成的。

找到一张图片,调用侦:

js 调用栈机制与ES6尾调用优化介绍

调用栈优化内存

调用栈的内存消耗

如上图,函数的变量等信息会被调用侦保存起来,所以调用侦中的变量不会被垃圾收集器回收

当函数嵌套的层级比较深了,调用栈中的调用侦比较多的时候,这些信息对内存消耗是非常大的。

针对这种情况除了我们要尽量避免函数层级嵌套的比较深之外,ES6提供了“尾调用优化”来解决调用侦过多,引起的内存消耗过大的问题。

何谓尾调用

尾调用指的是:函数的最后一步是调用另一个函数

function f(x){ return g(x); // 最后一步调用另一个函数并且使用return } function f(x){ g(x); // 没有return 不算尾调用 因为不知道后面还有没有操作 // return undefined; // 隐式的return }

尾调用优化优化了什么?

尾调用用来删除外层无用的调用侦,只保留内层函数的调用侦,来节省浏览器的内存。

下面这个例子调用栈中的调用侦一直只有一项,如果不使用尾调用的话会出现三个调用侦:

a() // 1 添加a到调用栈 function a(){ return b(); // 在调用栈中删除a 添加b } function b(){ return c() // 删除b 添加c }

防止爆栈

浏览器对调用栈都有大小限制,在ES6之前递归比较深的话,很容易出现“爆栈”问题(stack overflow)。

现在可以使用“尾调用优化”来写一个“尾递归”,只保存一个调用侦,来防止爆栈问题。

注意

只有不再用到外层函数的内部变量,内层函数的调用帧才会取代外层函数的调用帧。

如果要使用外层函数的变量,可以通过参数的形式传到内层函数中

function a(){ var aa = 1; let b = val => aa + val // 使用了外层函数的参数aa return b(2) // 无法进行尾调用优化 }

尾调用优化只在严格模式下开启,非严格模式是无效的。

如果环境不支持“尾调用优化”,代码还可以正常运行,是无害的!

更多

关于尾递归以及更多尾调用优化的内容,推荐查阅

调用栈debug大法

查看调用栈有什么用

查看函数的调用顺序是否跟预期一致,比如不同判断调用不同函数。

快速定位问题/修改三方库的代码。

当接手一个历史项目,或者引用第三方库出现问题的时候,可以先查看对应API的调用栈,找到其中涉及的关键函数,针对性的修复它。

通过查看调用栈的形式,帮助我快速定位问题,修改三方库的源码。

如何查看调用栈

只查看调用栈:console.trace

a() function a() { b(); } function b() { c() } function c() { let aa = 1; console.trace() }

如图所示,点击右侧还能查看代码位置:

js 调用栈机制与ES6尾调用优化介绍

bugger打断点形式,这也是我最喜欢的调试方式:

js 调用栈机制与ES6尾调用优化介绍

积跬步以至千里

平时需要有意识的去做这种小的优化(我现在就是),尽量写最佳实践的代码。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpygds.html