JAVASCRIPT中栈，执行栈及栈帧的区别
JAVASCRIPT中栈，执行栈及栈帧的区别
1.前言
廷仔最近对js中栈、执行栈及栈帧的概念混淆，查阅了一些文档后整理成笔记加深记忆。
2.堆(HEAP)和栈(STACK)
js数据类型分为基本类型和引用类型，基本类型在内存中占据固定大小的空间，引用类型大小不定，比如：
let a = 23 // 变量声明后可知多少字节 function tz(){ ... } // tz里面写了什么只有调用的时候才会知道，函数tz声明后会在内存开辟一段空间
结论：栈(stack)自动分配内存空间，存放基本类型和引用类型值的地址；堆动态分配的内存，存放引用类型,可以使用栈中的键名来取得。
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.总结
明白了执行栈跟栈帧的概念后不难发现，它们其实大同小异，只是个人理解不同，都代表了当前函数的执行环境。
我是前端小将廷仔，跟我一起每天前进一点点。
