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

一、执行上下文（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>

当进入一个执行上下文（比如函数调用或全局脚本）时，通常有两步：

解析/创建阶段（Creation）：处理声明
1. 所有函数声明会被绑定（并指向函数对象）；
2. var 声明会在变量环境中创建并初始化为 undefined （这就是“提升”表现）；
3. let/const 则会在词法环境中记录但处于 TDZ（Temporal Dead Zone）直到初始化。
执行阶段（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, // 用于 TDZ
       deletable: 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 / uninitialized
  functionObject: 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 处理器，会报未处理拒绝。

posted @ 2025-11-19 21:44 秀秀不只会前端阅读(9) 评论(0) 收藏举报

刷新页面返回顶部

haoxiugong