JavaScript 中的堆栈调用

最新推荐文章于 2024-04-29 08:36:05 发布

最恨不过不努力

最新推荐文章于 2024-04-29 08:36:05 发布

阅读量4.1k

点赞数

分类专栏：前端技术架构文章标签：堆栈调用 js堆栈调用栈

本文链接：https://blog.csdn.net/woleigequshawanyier/article/details/85038675

版权

15 篇文章 12 订阅

订阅专栏

在介绍 JavaScript 之前，先介绍一下数据的类型

介绍一下堆和栈

栈 (stack) ：用来保存简单的数据字段

堆 (heap) : 用来保存栈中简单数据字段对指针的引用

基本类型、引用类型数据以及堆栈的关系如下图：

如上图所示，栈内存中关于引用类型的数据的是通过指针(地址)来引用的，指针和地址指向堆内存中的数据。
为啥为导致上述区别，是因为：

基本类型的数据简单，所占用空间比较小，内存由系统自动分配
引用类型数据比较复杂，复杂程度是动态的，计算机为了较少反复的创建和回收引用类型数据所带来的损耗，就先为其开辟另外一部分空间——及堆内存，以便于这些占用空间较大的数据重复利用。堆内存中的数据不会随着方法的结束立即销毁，有可能该对象会被其它方法所引用，直到系统的垃圾回收机制检索到该对象没有被任何方法所引用的时候才会对其进行回收

举个?（基本数据类型）：

var  a = 1;
var  b = a;
b = 2;
console.log(a, b) // 1， 2

执行上述代码 var b = a 过程中，系统实际上会为 b 单独创建一个空间，当执行 b = 2 的时候，所以就和 a 没有任何关系

再举个?：

var  obj1 = {a: 1, b: 2};
var  obj2 = obj1;
obj2.a = 20;
console.log(obj1.a, obj2.a) // 20， 20

当执行上述代码 obj1 = obj2 的时候，只是将 obj2 的指针指向 obj1，也就是说 obj1 和 obj2 的指针指向的是统一个数据地址，当执行 obj2 = 20 时，结果也就自然知晓了

既然已经知道的数据的类型在堆栈中的引用方式，接下来我们再思考一下，根据上面的介绍，貌似对每声明一个变量就会向堆栈中添加一个值，事实也的确如此：
我们再来看一个?：

function a() {
  b()
}
function b() {
  c()
}
function c() {
  console.trace() // 查看当前函数的调用帧
}
a()

通过以上代码的执行以及控制太打印结果，会发现，函数的调用的进栈和出栈的顺序，遵循 先进后出 的原则

既然调用是用来放置调用帧的地方，那么我们是否会考虑到调用栈是不是可以无限的放置调用帧，答案毋庸置疑当然是不可以的
看下面的?：

function a() {
  b()
}
function b() {
  a()
  console.trace()
}
a()

控制台直接告诉我们已经超出了最大栈，也就是说我们刚才的死循环会导致 栈溢出
图示如下：

既然会存在栈溢出，那就可以避免我们向栈中添加过于长的调用帧，也就是说调用越少，所占用的内存空间就越少，性能自然就更好了，关于调用帧的优化，最需要注意的就是为调用优化

尾调用优化：
关于尾调用优化，阮一峰老师的 es6 入门教程已经描述的相当清楚明了，简单易懂，在这里就不再复制黏贴代码了，连接尾调用优化

欢迎各位看官的批评和指正，共同学习和成长
希望该文章对您有帮助，你的支持和鼓励会是我持续的动力

关注

专栏目录