JS 底层探究--执行上下文

先明确:什么是执行上下文?

可以把它理解成函数运行的专属 "工作空间"。 每次调用函数,JS 引擎都会给这个函数单独开一个 "房间":

  • 房间里有:变量对象、作用域链、this
  • 函数在这个房间里运行
  • 运行结束,房间销毁

一、创建阶段(最核心!调用函数立刻执行)

时机 :函数被调用 → 代码一行一行执行之前 核心任务:三件事,只定义、不赋值

1. 生成变量对象(Variable Object)

变量对象是存放当前上下文所有变量 / 函数的容器

分三步:

  1. 收集函数的形参 → 赋值为 undefined
  2. 扫描函数声明直接把函数体赋值进去(函数提升)
  3. 扫描变量声明 → 只声明,赋值为 undefined(变量提升)

重点:函数声明优先级 > 变量声明

2. 确定作用域链(Scope Chain)

作用域链 = 当前变量对象 + 所有父级执行上下文的变量对象

作用:保证变量、函数的有序访问(先找自己,找不到往上找)

3. 绑定 this

根据调用方式确定 this 指向:

  • 普通函数调用 → window/global
  • 对象方法调用 → 该对象
  • 构造函数 → 实例对象
  • 箭头函数 → 继承外层 this

二、执行阶段(代码逐行运行)

时机 :创建阶段完成后 核心任务

  1. 把变量对象变成活动对象
  2. 逐行执行代码:赋值、运算、调用函数
  3. 执行完毕 → 上下文销毁

三、总结

  1. 创建阶段 :搭架子 → 变量undefined、函数就绪、作用域链 + this 确定
  2. 执行阶段:跑代码 → 变量赋值、函数执行
  3. 顺序永远是:先创建,后执行
相关推荐
雪芽蓝域zzs4 小时前
第四十七节:驾驶舱大屏 ECharts 图表集成
前端·javascript·vue.js
Software攻城狮4 小时前
【React 学习方向(项目上手注意点)】
前端
Sylvia33.4 小时前
火星数据体育API|一站式接入足球篮球电竞等18+项目实时数据
java·开发语言·python·websocket·游戏
Data_Journal5 小时前
使用 AutoScraper 进行网页抓取:分步教程
大数据·开发语言·数据库·python·scrapy
林太白5 小时前
js-var和let以及const区别
前端·面试
yume_sibai5 小时前
12-Rust 性能优化指南(性能分析 + 内存优化 + SIMD + 并发优化 + 编译器优化 + 基准测试)
开发语言·性能优化·rust
看谷秀5 小时前
arkts-10 实战
前端·arkts
范小兵5 小时前
# DevEco CLI实战:鸿蒙App「至客」从0开发到正式上架
前端·harmonyos
萧瑟余晖5 小时前
Hibernate 核心原理与架构详解
开发语言·架构·hibernate
爱喝水的鱼丶5 小时前
SAP-ABAP:SAP MM 模块物料主数据批量导入与增强开发:字段扩展、校验逻辑与批量导入工具开发
开发语言·性能优化·sap·abap·增强·经验交流·mm