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 运行机制
相关推荐
Amumu121384 小时前
Js:正则表达式(一)
开发语言·javascript·正则表达式
月光宝盒造梦师6 小时前
Ant Design Ellipsis 中的判断逻辑 isEleEllipsis 方法非常消耗性能
javascript·react·优化
酉鬼女又兒7 小时前
零基础快速入门前端ES6 核心特性详解:Set 数据结构与对象增强写法(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯·es6
阿珊和她的猫7 小时前
以用户为中心的前端性能指标解析
前端·javascript·css
叫我一声阿雷吧8 小时前
JS 入门通关手册(36):变量提升、暂时性死区与块级作用域
javascript·变量提升·暂时性死区·tdz·块级作用域· 前端面试
成都渲染101云渲染66668 小时前
跳出“硬件堆砌”陷阱|渲染101如何用技术重构云渲染的专业价值?
java·前端·javascript
SuperEugene8 小时前
Vue3 性能优化规范:日常必做优化(不玄学、可落地)|可维护性与兜底规范篇
开发语言·前端·javascript·vue.js·性能优化·前端框架
cypking8 小时前
二次封装ElementUI日期范围组件:打造带限制规则的Vue2 v-model响应式通用组件
前端·javascript·elementui
酉鬼女又兒9 小时前
零基础快速入门前端蓝桥杯Web考点深度解析:var、let、const与事件绑定实战(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯·es6·html5