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. 顺序永远是:先创建,后执行
相关推荐
米米商聊14 分钟前
同名附件为什么被 Map 覆盖?重复键与一对多索引
前端·javascript
bkspiderx34 分钟前
基于Socket的广播通信及C语言实现详解
c语言·开发语言·socket·广播·socket的广播通信
小王C语言38 分钟前
Qt常用控件:输入类控件,单行/多行输入框、下拉框、(日期)微调框、旋钮、滑动条
开发语言·qt
ESDWAN42 分钟前
SD-WAN 主备切换为什么仍然会断网?从检测机制到会话恢复分析
开发语言·php
1001101_QIA1 小时前
.exe does not seem to be a Qt executable.
开发语言·qt
echome8881 小时前
Python 异常处理:try、else、finally 的正确搭配
开发语言·前端·python·异常处理·编程技巧
云和数据.ChenGuang1 小时前
Python 单继承与多继承深度剖析:从 MRO 到实战取舍
开发语言·人工智能·python·langchain
时间的情敌1 小时前
OpenLayers 实战|Vue3 + OpenLayers 完整工程案例(加载天地图、要素、弹窗、绘制、WFS)
前端·openlayers
陈随易1 小时前
下载神器!Motrix 停更三年后重写回归
前端·后端·程序员
前端的日常2 小时前
一个人+AI做情侣食谱小程序,0 费用的服务器
前端·后端