Js如何存储执行上下文

JavaScript通过执行上下文栈管理代码执行,首先创建全局上下文并压入栈底;每当调用函数时,会创建新的函数执行上下文并压入栈顶,执行完毕后出栈,控制权交还上层上下文。每个执行上下文包含词法环境、变量环境和this绑定三部分,其中词法环境处理let/const声明及作用域链,变量环境处理var声明,this绑定确定this指向。例如调用foo()时foo上下文入栈,其内调用bar()时bar上下文入栈,执行完依次出栈。该机制支撑了作用域、闭包与this的正确解析,是理解JS运行原理的核心。

JavaScript 通过执行上下文(Execution Context)来管理代码的运行环境。每当 JavaScript 引擎开始执行一段代码时,都会创建相应的执行上下文,并将其存储在执行上下文栈(也叫调用栈)中。

执行上下文的类型

JavaScript 中有三种主要的执行上下文:

  • 全局执行上下文:默认的、最外层的上下文,对应全局对象(浏览器中是 window)。
  • 函数执行上下文:每次调用函数时创建一个新的上下文。
  • eval 执行上下文:在 eval 函数内部执行代码时创建(通常不推荐使用)。

执行上下文的结构

每个执行上下文在逻辑上可以分为两个阶段和三个组成部分:

  • 词法环境(Lexical Environment):用于处理变量和函数声明,包含一个环境记录(记录变量绑定)和对外部词法环境的引用。
  • 变量环境(Variable Environment):也是一个词法环境,在进入上下文时用于存储 var 声明的变量。
  • this 环境绑定(This Binding):确定 this 指向的对象。

在 ES6 规范中,执行上下文可以用伪代码表示为:

ExecutionContext = {
  LexicalEnvironment: ,
  VariableEnvironment: ,
  ThisBinding:
}

执行上下文栈如何工作

JavaScript 是单线程语言,同一时间只能执行一个上下文,其他上下文会被挂起。引擎使用执行上下文栈来管理这些上下文的生命周期。

  • 全局上下文最先被压入栈底,且只有在程序结束时才出栈。
  • 每调用一个函数,就会创建新的函数执行上下文并压入栈顶。
  • 当前执行的上下文总是在栈顶。
  • 函数执行完毕后,其上下文从栈中弹出,控制权交还给之前的上下文。

例如:

function foo() {
  function bar() {
    console.log('bar');
  }
  bar();
}
foo();

执行过程中的上下文栈变化如下:

  • 全局上下文入栈
  • 调用 foo → foo 上下文入栈
  • 调用 bar → bar 上下文入栈
  • bar 执行完 → bar 上下文出栈
  • foo 执行完 → foo 上下文出栈
  • 回到全局上下文

总结

JavaScript 通过执行上下文栈来存储和管理执行上下文。每个上下文包含词法环境、变量环境和 this 绑定。函数调用会创建新上下文并推入栈顶,执行完毕后出栈。这种机制支持了作用域链、闭包和 this 的正确解析。

基本上就这些。理解上下文的存储方式有助于掌握 JS 的运行原理。