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 运行机制
相关推荐
qq_3813385024 分钟前
前端虚拟列表与无限滚动性能优化实战:从万级数据到丝滑体验
前端·javascript·html·优化
hexu_blog28 分钟前
前端vue后端springboot如何实现图片格式转换
前端·javascript·vue.js
代码煮茶28 分钟前
Vue3 项目规范实战 | ESLint+Prettier+Git Hooks 搭建前端代码规范体系
前端·javascript·vue.js
hexu_blog1 小时前
前端vue 后端springboot如何实现图片去水印
前端·javascript·vue.js
whuhewei1 小时前
React搜索框组件
前端·javascript·react.js
ZC跨境爬虫1 小时前
跟着 MDN 学 HTML day_50:(深入理解 DOM 中的 Text 节点)
前端·javascript·microsoft·ui·html·媒体
ZC跨境爬虫1 小时前
跟着 MDN 学 HTML day_51:(深入理解 XPathEvaluator 接口)
前端·javascript·ui·html·音视频
wjykp2 小时前
5.cypher语句组合与复杂操作
linux·前端·javascript
吃好睡好便好3 小时前
在Matlab中用sphere( )函数绘制球面图
开发语言·前端·javascript·学习·算法·matlab·信息可视化
黑贝是条狗3 小时前
注册表破解chrome,edge阻止浏览器连接本地websocket
前端·javascript·数据库