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. 顺序永远是:先创建,后执行
相关推荐
极光技术熊1 小时前
从零构建在线Excel:一个Java全栈工程师的实战记录
前端·后端
漂流技术客1 小时前
超详细!Vue3 + ECharts 快速实现地图可视化(附最新GeoJson地址)
前端·vue.js
AI玫瑰助手1 小时前
Python函数:global与nonlocal关键字的使用
开发语言·python·信息可视化
不会C语言的男孩1 小时前
C++ Primer 第16章:模板与泛型编程
开发语言·c++
这个DBA有点耶1 小时前
死锁排查进阶:从日志到根因的完整分析链
java·开发语言·数据库·sql·运维开发·学习方法·dba
三无推导1 小时前
无需扩展的 PHP 加密方案有哪些优势:基于 php.x5.chat 的实践分析
开发语言·php·web开发·数据加密·php加密·php安全·无需扩展
山河木马1 小时前
无框架-原生webGL渲染-底层入门-1
前端·javascript·webgl
jingling5551 小时前
Flutter | 商城项目鸿蒙(OpenHarmony)适配实战
android·开发语言·前端·flutter·华为·harmonyos