JS 入门通关手册(35):执行上下文、调用栈与作用域链深度解析

一、什么是执行上下文?

执行上下文(Execution Context)是 JS 代码运行时的环境,JS 引擎会为每一段可执行代码创建一个上下文,用来管理变量、作用域、this 指向等。

简单理解:一段代码在哪里跑、能访问什么、this 是谁,都由执行上下文决定。

JS 中有三种执行上下文:

  1. 全局执行上下文
  2. 函数执行上下文
  3. eval 执行上下文(极少使用,可忽略)

二、执行上下文的生命周期

一个执行上下文从创建到销毁分为两个阶段:

1. 创建阶段

  • 生成 变量对象(VO)
  • 建立 作用域链(Scope Chain)
  • 确定 this 指向

2. 执行阶段

  • 变量赋值
  • 函数执行
  • 代码逐行运行

三、变量对象与活动对象

1. 变量对象 VO(Variable Object)

存储当前上下文中的:

  • 变量声明
  • 函数声明
  • 函数形参

2. 活动对象 AO(Activation Object)

函数上下文被执行时,变量对象会变成活动对象,可以被访问。

全局上下文没有 AO,只有 VO。


四、作用域链(Scope Chain)

当代码访问一个变量时:

  1. 先在当前执行上下文的变量对象查找
  2. 找不到 → 去父级执行上下文查找
  3. 一直向上,直到全局上下文
  4. 都找不到 → 报 ReferenceError

这条查找路径就是作用域链

作用域链本质是:当前上下文 AO + 所有父级 VO 的链表


五、调用栈(Call Stack)

JS 是单线程,代码执行顺序由调用栈管理。

规则:

  • 全局上下文先入栈,永远在栈底
  • 调用函数时,函数上下文入栈
  • 函数执行完毕,上下文出栈
  • 最后全局上下文出栈,程序结束

示例:

js

javascript 复制代码
function a() {
  function b() {
    console.log('b')
  }
  b()
}
a()

调用栈顺序:

  1. 全局上下文入栈
  2. a 入栈
  3. b 入栈
  4. b 执行完出栈
  5. a 执行完出栈
  6. 全局出栈

六、作用域链与闭包的关系

闭包之所以能访问外部函数变量,就是因为:内部函数的作用域链保留了外部函数的活动对象,即使外部函数执行完毕出栈,其 AO 依然被引用,不会被销毁。

这就是闭包的底层原理。


七、执行上下文与 this 指向

this 的绑定是在执行上下文创建阶段确定的:

  • 全局上下文:this → window
  • 普通函数调用:this → window /undefined
  • 对象方法调用:this → 调用对象
  • new 调用:this → 新实例
  • call/apply/bind:this → 绑定对象
  • 箭头函数:this 继承外层上下文

八、高频面试题

  1. **什么是执行上下文?**答:JS 代码运行时的环境,管理变量、作用域链、this。

  2. **作用域链的作用是什么?**答:按层级查找变量,保证变量访问的有序性。

  3. **调用栈溢出是什么原因?**答:递归无出口,函数无限入栈,超过栈最大长度。

  4. **闭包和作用域链的关系?**答:闭包依靠作用域链保留外部函数 AO,实现变量持久化。

  5. 变量提升发生在哪个阶段? 答:执行上下文创建阶段


九、总结

  1. 执行上下文是 JS 代码运行的基础环境
  2. 分为创建阶段(VO、作用域链、this)和执行阶段
  3. 作用域链是变量查找的层级链路
  4. 调用栈控制函数执行顺序
  5. 闭包、this、变量提升都依赖执行上下文机制
  6. 理解执行上下文,才算真正懂 JS 运行机制
相关推荐
英俊潇洒美少年1 小时前
Vue2/Vue3 vue-i18n完整改造流程(异步懒加载+后端接口请求)
前端·javascript·vue.js
空中海7 小时前
第七章:vue工程化与构建工具
前端·javascript·vue.js
zhensherlock8 小时前
Protocol Launcher 系列:Trello 看板管理的协议自动化
前端·javascript·typescript·node.js·自动化·github·js
渔舟小调8 小时前
P19 | 前端加密通信层 pikachuNetwork.js 完整实现
开发语言·前端·javascript
qq_12084093718 小时前
Three.js 工程向:Draw Call 预算治理与渲染批处理实践
前端·javascript
不会聊天真君64711 小时前
JavaScript基础语法(Web前端开发笔记第三期)
前端·javascript·笔记
齐鲁大虾11 小时前
新人编程语言选择指南
javascript·c++·python·c#
码路飞12 小时前
玩了一圈 AI 编程工具,Background Agent 才是让我真正震撼的东西
前端·javascript
林恒smileZAZ12 小时前
Three.js实现更真实的3D地球[特殊字符]动态昼夜交替
开发语言·javascript·3d