JavaScript中栈，执行栈及栈帧的区别

1.前言

廷仔最近对js中栈、执行栈及栈帧的概念混淆，查阅了一些文档后整理成笔记加深记忆。

2.堆(heap)和栈(stack)

js数据类型分为基本类型和引用类型，基本类型在内存中占据固定大小的空间，引用类型大小不定，比如：

let a = 23 // 变量声明后可知多少字节
function tz(){
    ...
}
// tz里面写了什么只有调用的时候才会知道，函数tz声明后会在内存开辟一段空间

结论：栈自动分配内存空间，存放基本类型和引用类型值的地址；堆动态分配的内存，存放引用类型,可以使用栈中的键名来取得。

js引擎不能直接操作堆内存中的数据，这就造成了对同一个变量赋不同类型的值，会出现完全不同的效果：为一个变量赋基本值时，实际上是创建一个新值，然后把该值赋给新变量，可以说这是一种真正意义上的赋值。 为一个变量赋引用值时，实际上是为新变量添加一个指针，指向堆内存中的一个对象，属于一种赋址操作。——摘自

let a = 23;
let obj = {a:{b:1}}
let obj2 = obj

//变量a直接存储在栈中，变量obj和obj2指向堆中的同一个对象，属于该对象的指针。

3.执行栈

每个函数被调用时会创建自己的执行上下文，主程序代码函数多了就会有自己独特的管理方式。 js引擎创建了执行栈来管理执行上下文。可以把执行栈认为是一个存储函数调用的栈结构，遵循先进后出的原则。

function fn1(){
    fn2()
}
function fn2(){
   fn3()
}
function fn3(){
    console.trace()
}
fn1()

fn3最后进入栈顶，但最先执行完，其执行上下文（这里理解为函数的当前执行环境）最先出栈并等待垃圾回收，遵循了后进先出的原则，fn2、fn1以此类推。

总结如下：

• JavaScript执行在单线程上，所有的代码都是排队执行。
• 一开始浏览器执行全局的代码时，首先创建全局的执行上下文，压入执行栈的顶部。
• 每当进入一个函数的执行就会创建函数的执行上下文，并且把它压入执行栈的顶部。当前函数执行完成后，当前函数的执行上下文出栈，并等待垃圾回收。
• 浏览器的 JS 执行引擎总是访问栈顶的执行上下文。
• 全局上下文只有唯一的一个，它在浏览器关闭时出栈。

4.栈帧

栈帧是指为一个函数调用单独分配的那部分栈空间。

运行的程序从当前函数调用另外一个函数时，就会为下一个函数建立一个新的栈帧，并且进入这个栈帧，这个栈帧称为当前帧。而原来的函数也有一个对应的栈帧，被称为调用帧。每一个栈帧里面都会存入当前函数的局部变量.

当函数被调用时，就会被加入到调用栈顶部，执行结束之后，就会从调用栈顶部移除该函数。并将程序运行权利（帧指针）交给此时栈顶的栈帧。这种后进后出的结构也就是函数的调用栈。

5.总结

明白了执行栈跟栈帧的概念后不难发现，它们其实大同小异，只是个人理解不同，都代表了当前函数的执行环境。

我是前端小将廷仔，跟我一起每天前进一点点。