首页手记理解JavaScript的执行上下文

理解JavaScript的执行上下文

标签：

JavaScript

执行上下文

执行上下文：指当前执行环境中的变量、函数声明，参数（arguments），作用域链，this等信息。分为全局执行上下文、函数执行上下文，其区别在于全局执行上下文只有一个，函数执行上下文在每次调用函数时候会创建一个新的函数执行上下文。

执行上下文的组成代码示例：

const ExecutionContextObj = {
    VO: window, // 变量对象
    ScopeChain: {}, // 作用域链
    this: window
};

执行上下文的组成图例示例：

执行上下文生命周期

创建阶段
- 生成变量对象
  - 创建arguments
  - 扫描函数声明
  - 扫描变量声明
- 建立作用域链
- 确定this的指向
执行阶段
- 变量赋值
- 函数的引用
- 执行其他代码

变量对象

变量对象是与执行上下文相关的数据作用域，存储了上下文中定义的变量和函数声明。

变量对象式一个抽象的概念，在不同的上下文中，表示不同的对象:

全局执行上下文的变量对象
- 全局执行上下文中，变量对象就是全局对象。
- 在顶层js代码中，this指向全局对象，全局变量会作为该对象的属性来被查询。在浏览器中，window就是全局对象。
函数执行上下文的变量对象
- 函数上下文中，变量对象VO就是活动对象AO。
  初始化时，带有arguments属性。
  函数代码分成两个阶段执行
- 进入执行上下文时，此时变量对象包括
  - 形参
  - 函数声明，会替换已有变量对象
  - 变量声明，不会替换形参和函数
- 函数执行

执行上下文栈

执行上下文栈的作用是用来跟踪代码的，由于JS是单线程的，每次只能做一件事情，其他的事情会放在指定的上下文栈中排队等待执行。

JS解释器在初始化代码的时候，首先会创建一个新的全局执行上下文到执行上下文栈顶中，然后随着每次函数的调用都会创建一个新的执行上下文放入到栈顶中，随着函数执行完毕后被执行上下文栈顶弹出，直到回到全局的执行上下文中。（栈：一种数据结构，遵循后进先出的原则）。

代码示例：

function getName() {
    const year = getYear();

    const name = 'Lynn';
    console.log(`${name} ${year} years old this year`);
}

function getYear() {
    return 18;
}

getName();

执行上下文栈图例：

上面的执行上下文栈执行过程：

首先创建了全局执行上下文，当前全局执行上下文处于活跃状态。
全局代码中有2个函数 getName 和 getYear，然后调用 getName 函数，JS引擎停止执行全局执行上下文，创建了新的函数执行上下文，且把该函数上下文放入执行上下文栈顶。
getName 函数里又调用了 getYear 函数，此时暂停了 getName 的执行上下文，创建了 getYear 函数的新执行上下文，且把该函数执行上下文放入执行上下文栈顶。
当 getYear 函数执行完后，其执行上下文从栈顶出栈，回到了 getName 执行上下文中继续执行。
当 getName 执行完后，其执行上下文从栈顶出栈，回到了全局执行上下文中。