前端知识点——理解堆栈执行及闭包

写在前面

笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。

哪些平台可以执行JS代码

• 浏览器
• Node
• WebView

无论JS代码在哪个平台上执行，最终都需要有一个执行的地方

• 代码最终都是在内存中运行
• 在JS执行过程中，浏览器加载界面时会向计算机的内存申请一片空间，用于执行JS代码
• 这个空间我们称之为执行环境栈(ECS execution context stack)

执行环境栈 -> 本质就是一个内存空间

执行上下文

• 一段JS代码里有很多内容，比如变量的声明，函数的定义，对象，块作用域
• 上述这些区域内都有自己的代码，默认情况下他们里面的内容可能会出现重名
• 所以代码将来在之行时候不可能直接放在一个环境下执行，我们需要进行隔离
• JS当中就有了执行上下文的概念，专门用于将不同区域的代码隔离开
• 它也是一个内存空间，我们无需将它具象化，在它里面存放了当前区域代码运行时所需要的数据

var a = 100
function foo() {
  // 此时函数当中的 a 和外部的 a 是互不影响的
  var a = 'aeorus'
}

进栈执行

• 执行环境栈具有先进后出的特点
• 每当一段代码要运行时就会生成一个新的执行上下文，然后在这个上下文当中将执行时所需要的内容准备好，之后就开始进栈执行

EC(G) -> execution context global

• 全局执行上下文，浏览器加载界面的时候就默认创建的一个环境
• 当前这个上下文如果想出栈，当前页面需要关闭

VO(G) -> variable object global

• 全局变量对象(全局执行上下文当中的变量需要一个地方来存放，因此有了这个对象)
• 每一段代码中都有声明和定义，他们放在那儿？
• 针对全局执行上下文来说，它里面的声明和定义放在了一个对象当中，这个对象我们称之为VO(G)

GO -> global object

• 全局变量，它和VO(G)不是同一个东西，window属于GO
• 它也是浏览器加载界面时就会创建的一个对象，在它内部存放了许多JS默认就可以调用的属性和方法(setTimeout setInterval JSON eval…)

声明和定义

• var obj = {}
• 声明 -> var obj
• 定义 -> obj = {}

堆栈基本值

• 在EC(G)当中有VO(G)，用来存储当前执行上下文中的变量声明和定义
• 代码执行之前会有变量提升，对于var来说只声明不定义，对于function foo() {}既声明又定义
• 基本数据类型的值是直接存放在栈区
• 引用类型会放在堆区，并在栈区存放一个16进制的地址便于引用
• VO(G)当中默认就有一个window，它存放的是一个内存地址，指向GO对象所在的内存

函数执行过程

• 确定作用域链 scope-chain
• 确定this
• 初始化arguments
• 形参赋值
• 变量提升
• 函数代码执行