执行上下文与作用域

问题：JS 引擎如何知道一个变量在哪里、值是什么？

代码执行前，引擎需要先"准备环境"——绑定 this、注册变量、划分作用域。
如果不做这一步，变量提升、闭包捕获、块级作用域隔离全部无法工作。

解决：创建阶段扫描代码，建立执行上下文

执行上下文 = this 绑定 + 词法环境（let/const）+ 变量环境（var）

┌───────────────────────────────────────┐
│         执行上下文（EC）                │
├───────────────────────────────────────┤
│  1. this 绑定                         │
│  2. 词法环境（let/const/函数声明）       │  ← 块级作用域
│  3. 变量环境（var 声明）                │  ← 函数作用域
└───────────────────────────────────────┘

// 代码推演 1：同名函数与变量的世纪大战
console.log(foo); // [Function: foo]（函数声明优先级最高）
var foo = 1;
function foo() {}
console.log(foo); // 1（var 赋值覆盖了函数）

// 代码推演 2：隐蔽的块级作用域 TDZ
let x = 1;
function test() {
  console.log(x); // ReferenceError（不是 1！）
  let x = 2; // let 提升到顶部，锁入 TDZ
}
test();

// V8 内部的 TDZ 实现原理
function test() {
  // 进入块级作用域时，x 被初始化为 the_hole
  console.log(x); // 检测到 the_hole → 抛出 ReferenceError
  let x = 2; // 遇到声明语句，x 被赋值为 2
}

console.log(foo); // [Function: foo]
var foo = 1;
function foo() {}
console.log(foo); // 1

// 等价于：
function foo() {} // 函数声明先提升
var foo; // 变量声明后提升（但不覆盖已有的函数）
console.log(foo); // [Function: foo]
foo = 1; // 赋值发生在执行阶段
console.log(foo); // 1

┌───────────────────────────────────────┐
│         执行上下文（ES6+）              │
├───────────────────────────────────────┤
│  词法环境（Lexical Environment）        │  ← 存放 let/const/块级函数
│    └── 栈结构：进入 {} 压栈，离开弹栈    │
│  变量环境（Variable Environment）       │  ← 存放 var
│    └── 只绑定在函数级别上下文中          │
└───────────────────────────────────────┘

let x = 1;
{
  // 进入块级作用域，压栈
  let y = 2;
  {
    // 再次压栈
    let z = 3;
    console.log(x + y + z); // 6
  } // 弹栈，z 被销毁
  console.log(y); // 2
} // 弹栈，y 被销毁
console.log(x); // 1

let global = "global";
function outer() {
  let outerVar = "outer";
  function inner() {
    let innerVar = "inner";
    // 查找变量的路径：
    // 1. 当前词法环境（inner）→ 找到 innerVar
    // 2. outer 指针 → 找到 outerVar
    // 3. outer 指针 → 找到 global
    console.log(innerVar + outerVar + global);
  }
  inner();
}
outer();

/**
 * ❌ 普通递归：每次调用都保留当前栈帧，栈深度随递归层数线性增长
 * 问题在于 return n * factorial(n-1) 中，乘法操作在递归调用之后
 * 引擎必须保留当前栈帧等待递归返回后才能执行乘法，无法复用栈帧
 * @param {number} n - 阶乘数
 * @returns {number} n 的阶乘
 */
function factorial(n) {
  if (n <= 1) return 1; // 递归终止条件
  return n * factorial(n - 1); // 乘法在递归之后→无法尾调用优化→栈帧不断累积
}
factorial(100000); // RangeError: Maximum call stack size exceeded

/**
 * ✅ 尾递归形式：递归调用是函数的最后一步操作
 * 通过累加器 acc 将中间结果传递下去，不需要保留当前栈帧
 * 在支持 TCO（尾调用优化）的引擎中，可以复用栈帧，不会溢栈
 * 但 V8 默认不启用 TCO，所以实际项目中仍然会溢栈
 * @param {number} n - 阶乘数
 * @param {number} acc - 累加器，存储中间计算结果
 * @returns {number} n 的阶乘
 */
function factorialTail(n, acc = 1) {
  if (n <= 1) return acc; // 递归终止，返回累加结果
  return factorialTail(n - 1, n * acc); // 递归调用是最后一步→理论上可尾调用优化
}
// 在支持 TCO 的引擎中：factorialTail(100000) 不会溢栈
// 在 V8 中：仍然会溢栈（V8 默认不启用 TCO）

普通递归的调用栈：
┌─────────────────┐
│ factorial(1)    │  ← 最后返回
├─────────────────┤
│ factorial(2)    │
├─────────────────┤
│ factorial(3)    │
├─────────────────┤
│ ...             │
├─────────────────┤
│ factorial(100000)│  ← 最先调用，栈帧一直保留
└─────────────────┘
栈深度 = n → 必然溢栈

尾递归优化后的调用栈（理论上）：
┌─────────────────┐
│ factorialTail(n) │  ← 只有一个栈帧，不断被复用
└─────────────────┘
栈深度 = 1 → 不会溢栈

// TCO 支持情况：Safari/JavaScriptCore 支持，Chrome/V8 和 Firefox 默认不支持

/**
 * 手动 trampoline（蹦床函数）：V8 不支持 TCO 时的替代方案
 * 核心思想：把递归调用转为返回一个 thunk 函数，用 while 循环驱动执行
 * 这样栈深度始终为 1，不会溢栈
 * @param {Function} fn - 返回 thunk 函数的递归函数
 * @returns {Function} 用循环驱动的版本
 */
function trampoline(fn) {
  return function (...args) {
    let result = fn(...args); // 执行一次，返回的可能是函数或值
    while (typeof result === "function") {
      result = result(); // 返回函数则继续执行（模拟递归，但栈深度不变）
    }
    return result; // 返回最终结果
  };
}

/**
 * 用 trampoline 改造阶乘函数
 * 关键变化：return () => f(n-1, n*acc) 而非直接递归调用
 * 返回 thunk 函数让 trampoline 的 while 循环来驱动，避免栈帧累积
 */
const factorialTrampoline = trampoline(function f(n, acc = 1) {
  if (n <= 1) return acc; // 终止条件：返回累加结果（非函数）
  return () => f(n - 1, n * acc); // 返回 thunk，延迟执行，不占用新栈帧
});

factorialTrampoline(100000); // 不会溢栈——栈深度始终为 1