JS 中的执行上下文和执行栈

目录

• 执行上下文
  • 执行上下文的类型
• 执行栈（调用栈）
• 怎么创建执行上下文？
  • 创建阶段

执行上下文

执行上下文（context）一般称为js代码执行的所在环境。即js代码在执行上下文中运行。

执行上下文的类型

大致可以分为三种：
1.全局执行上下文：默认上下文。主要的作用是在浏览器的环境下，创建window对象，此时this便是window。一般一个程序只有一个全局执行上下文。
2.函数执行上下文：一个函数被调用时，就会为它创建一个新的上下文。每个函数都有对应的函数上下文，因为在调用函数时创建。
3.Eval函数执行上下文。Eval函数内部代码有自己的上下文。但是用得极少。

执行栈（调用栈）

执行栈是一种用来储存js代码调用时创建的执行上下文。
当 JavaScript 引擎第一次遇到你的脚本时，它会创建一个全局的执行上下文并且压入当前执行栈。每当引擎遇到一个函数调用，它会为该函数创建一个新的执行上下文并压入栈的顶部。
引擎会执行那些执行上下文位于栈顶的函数。当该函数执行结束时，执行上下文从栈中弹出，控制流程到达当前栈中的下一个上下文。

let a = 'Hello World!';

function first() {
  console.log('Inside first function');
  second();
  console.log('Again inside first function');
}

function second() {
  console.log('Inside second function');
}

first();
console.log('Inside Global Execution Context');

上述代码在浏览器加载时，JavaScript 引擎创建了一个全局执行上下文并把它压入当前执行栈。当遇到 first() 函数调用时，JavaScript 引擎为该函数创建一个新的执行上下文并把它压入当前执行栈的顶部。
当从 first() 函数内部调用 second() 函数时，JavaScript 引擎为 second() 函数创建了一个新的执行上下文并把它压入当前执行栈的顶部。当 second() 函数执行完毕，它的执行上下文会从当前栈弹出，并且控制流程到达下一个执行上下文，即 first() 函数的执行上下文。
当 first() 执行完毕，它的执行上下文从栈弹出，控制流程到达全局执行上下文。一旦所有代码执行完毕，JavaScript 引擎从当前栈中移除全局执行上下文。

怎么创建执行上下文？

创建执行上下文有两个阶段：1) 创建阶段 和 2) 执行阶段。

创建阶段

1.this 值的决定，即我们所熟知的 This 绑定。
2.创建词法环境组件。
3.创建变量环境组件。

参考：https://juejin.im/post/5ba32171f265da0ab719a6d7