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. 顺序永远是:先创建,后执行
相关推荐
weixin_4407841110 分钟前
【HandlerThread实现原理】
android·java·开发语言
天空'之城11 分钟前
C 语言工业级通用组件手写 24:互补滤波
c语言·开发语言·互补滤波·嵌入式算法·工业级组件
XR12345678822 分钟前
工厂车间无线网络方案对比:AGV漫游哪家强?
开发语言·php
傻啦嘿哟1 小时前
某短视频平台视频爬虫实战:抓取推荐流视频信息,绕过反爬的3种技巧
开发语言·爬虫·python
烬羽1 小时前
React Router v7 完全指南:一个 Demo 吃透前端路由
javascript·react.js·前端框架
現実君2 小时前
【硬件进阶】AD22上位替换JLEDA教程
开发语言·php
烬羽2 小时前
从"整个页面刷新"到"丝滑切换":手写一个 HashRouter 彻底搞懂前端路由
javascript·前端框架·全栈
mubei-1232 小时前
SpringDAO的用法
java·开发语言·数据库
用户938515635072 小时前
从零理解 React Router v6:每一个 API 都是怎么工作的
前端·javascript·全栈
用户059540174464 小时前
Redis缓存回滚踩坑实录:一个配置失误,让我在凌晨3点丢了3000条数据
前端·css