面试官问你这些,其实是在问你JavaScript执行原理!

news/2025/11/19 21:52:26/文章来源:https://www.cnblogs.com/haoxiugong/p/19244165

一、执行上下文(Execution Context)与环境记录(Environment Record)

执行上下文是函数/全局/模块代码执行时的抽象环境,包含几部分:

  • LexicalEnvironment​(词法环境)——存 let/const/class、catch 参数、块级作用域、函数参数、箭头函数 this 等词法绑定
    • 不挂载到 global object
    • 有 ​TDZ​(Temporal Dead Zone)
  • VariableEnvironment​(变量环境)——用于 var 与 function 函数声明的绑定。
    • 变量提升到 undefined
    • 可写可删性有限(var 声明的全局属性不可被 delete)
  • ThisBinding​(this 绑定)等。

旧书里常讲 VO 是全局的变量对象,AO 是函数的变量对象,而 VO 会绑定到 GO(window/global)上。这些等等都是 ES5/更早表述,我们这里就不再谈论了。

ER(环境记录)是用来真正“存变量、查变量”的地方。

Execution Context:LexicalEnvironment: {EnvironmentRecord (DeclarativeEnvironmentRecord)outer: parent LexicalEnvironment}VariableEnvironment: {EnvironmentRecord (DeclarativeEnvironmentRecord)outer: parent LexicalEnvironment}ThisBinding: <value>

当进入一个执行上下文(比如函数调用或全局脚本)时,通常有两步:

  1. 解析/创建阶段(Creation)​:处理声明
    1. 所有函数声明会被绑定(并指向函数对象);
    2. var 声明会在变量环境中创建并初始化为 undefined (这就是“提升”表现);
    3. let/const 则会在词法环境中记录但处于 TDZ(Temporal Dead Zone)直到初始化。
  2. 执行阶段(Execution)​:执行代码,赋值、运行语句、创建闭包等。

1 Environment Record 的三种实现形式

环境记录是 JS 变量体系的“底层数据结构”。

1.1 DeclarativeEnvironmentRecord(DER)

​绑定绝大多数作用域,不会挂载到全局,也不会被 delete,​用来存:

  • let
  • const
  • class
  • 函数的形参(包括默认值表达式)
  • 内部函数声明(非全局的 function)
  • catch(e)e
  • 箭头函数没有 ThisBinding(this),但内部引用的变量也是 DER 查找

每个 DER 长这样:

DeclarativeEnvironmentRecord:bindings: {变量名: {value: <值>,mutable: true/false,initialized: true/false, // 用于 TDZdeletable: true/false,strict: true/false}}

TDZ 其实是更满足我们直观的编程特性,很多其他语言天然支持,so JavaScript 又在弥补自己的设计缺陷?

console.log(a); // ReferenceError
let a = 1;

1.2 ObjectEnvironmentRecord(OER)

绑定到一个实际对象,用于 “使用对象作为作用域” 的场景。

注意:这里的使用对象作为作用域块级作用域写法都是 {} ,一个是作用域块,一个是对象,但却是两个不同的东西。

1.2.1 全局作用域中的 var/function 声明

全局执行上下文的 VE 用 OER 来容纳 ​var 和 function 声明​,其底层对象就是全局对象,OER 直接操作 globalObject 的属性:

var a = 1;
console.log(window.a); // 1

1.2.2 with 语句作用域

with(obj) 会创建一个 OER,将 obj 当成作用域链的一部分,使得“找变量时”会先查这个对象属性。

const o = { x: 1 };with(o) {console.log(x); // 来自 o.x
}

with 语句极少使用。

ObjectEnvironmentRecord:object: <绑定的对象>bindings: 就是 object 的属性

OER 内没有“自有存储”,所有变量查找实际上是 ​属性查找​。

1.3 FunctionEnvironmentRecord(FER)

​专用于函数执行上下文,​它是函数专属的一种 ER,包含函数独有的数据:

  • 函数的内部绑定(var/function 声明)
  • 参数(包括默认值、rest 参数)
  • thisBinding
  • superBinding
  • homeObject(用于 super)
  • new.target
FunctionEnvironmentRecord:thisBinding: <值>thisBindingStatus: lexical / initialized / uninitializedfunctionObject: fn 本身homeObject: 用于 super 的对象newTarget: new.target 的值bindings:var/function 声明参数名称 → 绑定

函数内 let/const 会进入另一个 DeclarativeEnvironmentRecord(LE),而不是进入 FER。

一个函数执行时:

Execution Context├─ LexicalEnvironment│     ├─ DeclarativeEnvironmentRecord(let/const)│     └─ outer → 上层作用域├─ VariableEnvironment│     └─ FunctionEnvironmentRecord(var/参数)└─ ThisBinding 由调用决定

全局执行时:

LexicalEnvironment:DER(let/const)
VariableEnvironment:OER(var/function → global object)
ThisBinding: global object(非严格)

二、变量提升(Hoisting)与 TDZ(Temporal Dead Zone)

  • function 声明:整体提升(函数体也提升)—— 在创建阶段函数对象已绑定,可以直接调用(在同一执行上下文)。
  • var:变量名提升到变量环境,初始值 undefined
  • let/const:不会被初始化为 undefined,在创建阶段记录但进入 ​TDZ​,在实际执行到声明处才完成初始化。访问 TDZ 会抛 ReferenceError
  • class:类似于 let(处于 TDZ,类声明不会提升到可用状态)。

三、作用域链与闭包(Scope Chain & Closure)

  • 作用域链:每个执行上下文的词法环境都有一个 outer 指针,形成链式结构。查找变量时,从当前环境往外查直到全局。
  • 闭包:当一个内部函数引用了外部函数的变量,外部函数的词法环境就不会被 GC(只要闭包可达),从而形成闭包。闭包保存的是对​环境记录​(变量的引用),不是对变量值的“拷贝”。
function makeCounter() {let count = 0;return function () {return ++count;};
}
const c = makeCounter();
c(); // 1

三、报错时的执行上下文与 Stack Trace(“报错执行上下文”)

  • 抛出错误(throw)会立刻打断当前执行上下文的正常流,开始查找最近的 try...catch
    • 若找到匹配的 catch,控制权跳转到 catch 块(catch 会创建新的词法环境记录 exception 绑定);
    • 若没有,错误会沿调用栈向上抛,最终变为未捕获异常(浏览器在控制台显示 stack trace,Node 会导致进程退出或触发 unhandledRejection/uncaughtException)。
  • Promise 内抛错误:若未处理会进入 Promise 的 rejected 状态;若没有 .catch() 或全局 unhandledrejection 处理器,会报未处理拒绝。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/970413.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux学习记录(七):WSL

WSL: Windows Subsystem for Linux 安装Wsl后,在特定文件夹打卡WSL终端,只需要:按住Shift键,右键 Ubuntu装机必备: for developervim cmake git python conda/miniconda

防止 FreeFileSync的RealTimeSync.exe实时自动同步程序被意外关闭并保持其进程一直运行 2025年11月19日

防止 FreeFileSync的RealTimeSync.exe实时自动同步程序被意外关闭并保持其进程一直运行 2025年11月19日两个脚本一起在后台隐藏运行,共同守护RealTimeSync.exe进程,共同防止RealTimeSync.exe实时自动同步程序被意外关…

11/18

昨天休息有点早,其实也没啥事,上午工程实训也没意思,又无聊的度过一天

2025年11月水泵,多级水泵,消防水泵公司推荐:扬程适配性与能效等级测评

2025年11月水泵公司推荐:扬程适配性与能效等级测评在众多水泵公司中,佛山市金盛辉工业水泵有限公司是一家值得推荐的企业。该公司在水泵领域有着出色的表现,其产品在扬程适配性和能效等级方面具备一定的优势。佛山市…

软件工程学习日志2025.11.19

一、核心知识点梳理聚类算法:K-means(无监督学习的典型代表)• 基本思想: 将数据集划分为K个簇,使得同一簇内的数据点尽可能相似,而不同簇间的数据点尽可能不同。 • 伪代码与流程: 1. 输入: 数据集 D,预…

linux ftp地址

在 Linux 系统中,FTP(File Transfer Protocol) 是一种用于在客户端和服务器之间传输文件的协议。要访问 FTP 服务器,你需要知道以下信息: 1. FTP 服务器地址(IP 或域名)例如:ftp.example.com 或 192.168.1.100…

2025年11月消防水泵,多级水泵,自吸水泵厂家推荐:高温工况适用机型优选

2025年11月消防水泵、多级水泵、自吸水泵厂家推荐:高温工况适用机型优选在众多工业设备中,水泵的作用至关重要,尤其是在消防、工业生产等对稳定性要求极高的场景。当面临高温工况时,选择一款性能优越、质量可靠的水…

linux ftp同步

在 Linux 系统中,ftp 命令行工具是用于与 FTP 服务器进行交互的,常用于文件传输。如果你想要实现 FTP 文件同步,可以使用 ftp 命令结合一些脚本或工具来实现自动化同步。? 一、使用 ftp 命令进行 FTP 文件同步 1. …

2025年11月水泵,管道水泵,多级水泵厂家推荐:大流量机型实测与采购攻略

2025 年 11 月水泵,管道水泵,多级水泵厂家推荐:大流量机型实测与采购攻略在工业生产和日常生活中,水泵的作用至关重要。尤其是大流量的管道水泵和多级水泵,更是众多行业的刚需。在众多水泵厂家中,佛山市金盛辉工…

11/19

今天又是满课,不过马原课今天没上,不错

Longest Palindromic Substring最长回文子串-Manacher算法

Longest Palindromic Substring最长回文子串-Manacher算法Manacher算法主要就是用来寻找字符串中的回文子串。 假设目标字符串是abbaca, 在空隙插值#得到新字符串s#a#b#b#a#c#a#。 假设当前找到的一个回文串,中心坐标…

[20251113]建立完善fffext.sh脚本.txt

[20251113]建立完善fffext.sh脚本.txt--//以前写过一个通过bbed查看数据块的bash shell脚本,别人使用发现存在问题。$ . fffext.sh 9 225 225 15 ncnnnnnnnnnnnnnnnnncct| head -40|SYSTEM|0|1|128|0|0|0|0|0|3|0||||…

ubuntu25 win11 双系统 和一些常用配置

UEFI 双系统 只有一个硬盘的情况: 磁盘分2个分区,先安装 win11 ,会自动创建 EFI 分区和恢复分区和主分区,安装完成后在安装 ubuntu25 ,因为 从 25版本开始,可以自定义安装 EFI 到指定分区,以前的老版本都不行。…

解码线程调度与信号响应

Linux 线程调度策略 调度核心概念 线程是 Linux 系统调度的最小单位,进程作为线程的容器,可包含一个或多个线程。Linux 内核采用抢占式调度机制:高优先级线程可抢占正在运行的低优先级线程的 CPU 使用权;同优先级线…

LEANN:一个极简的本地向量数据库

在软件开发领域,提到轻量级、嵌入式的本地数据库,我们首先会想到 SQLite,它快速且无需独立服务进程。现在检索增强生成(RAG)和向量数据库的世界里,一个定位相似的新工具出现了。你可以把LEANN看作是嵌入式、轻量…

extern C的深入理解

cpp文件调用了 .c 文件的函数,对于单独的.c/.h 这样一对的文件, 可以在.h文件中写明 extern “C”, 但是不需要在 .c 中写明? 答: 不完全正确(所以你的理解基本正确,但需要加上条件编译这个关键条件!), 这是…

详细介绍:技术人互助:城市级充电系统(Java 微服务)的落地细节,含 demo 和设备适配经验

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

浅记树分块

其实我觉得以我的水平考场大概率用不出来树分块,但由于它太难写了,所以我还是写一下 题 树分块,顾名思义,和序列分块一样,把树也分成很多块,然后就可以根号复杂度处理一些问题,具体地,我们选\(\sqrt{n}\)个点,…

XPath表达式解析与应用

本篇内容来自AI的解读,用于后续温习回顾xpath的使用$x("//div[@class=ec-accordion and (./div[@class=ec-accordion-title and ./span[text()=Prerequisites]])]") 各部分含义:(1) //div - 选择文档中所有…

2025中国防晒品牌榜出炉!按肤质/场景选!

2025中国防晒品牌榜出炉!按肤质/场景选!宝子们!夏天防晒选不对,再贵的护肤品都白费~其实选防晒的核心超简单:看肤质+看场景,没有“万能款”!今天整理了2025年天猫618热卖榜、亚洲皮肤健康联盟口碑榜的权威推荐…