本文深入剖析 javascript 中箭头函数（作为函数表达式）为何能在定义前被“引用”却不报错，关键在于执行时才求值、作用域链查找机制及 tdz 的边界条件，而非传统意义上的“提升可用”。
本文深入剖析 javascript 中箭头函数（作为函数表达式）为何能在定义前被“引用”却不报错，关键在于执行时才求值、作用域链查找机制及 tdz 的边界条件，而非传统意义上的“提升可用”。
在 JavaScript 中，函数表达式（包括箭头函数）本身不会被“提升”为可调用状态——这与函数声明（function foo() { }）有本质区别。但你的代码能正常运行，并非因为 y 被提前初始化了，而是因为：y() 的调用发生在 x() 执行时，而此时 y 已在词法作用域中完成声明与初始化。
我们来逐行分析原始示例：
const x = () => {
console.log('hello x');
y(); // ✅ 此处不报错 —— 因为 x 尚未执行！
};
const y = () => {
console.log('hello y');
};
x(); // ? 关键：执行 x 时，y 已定义完毕，且位于同一作用域（模块/脚本顶层）这段代码的执行流程如下：
编译阶段（Hoisting）：
x和y作为const声明，均被提升至作用域顶部，但处于暂时性死区（TDZ） —— 此时访问x或y会抛出ReferenceError。
⚠️ 注意：提升的是声明，不是赋值；x和y在初始化前不可读取。-
执行阶段（从上到下）：
立即学习“Java免费学习笔记（深入）”；
- 首先执行
const x = ...→ 初始化x（绑定箭头函数）； - 接着执行
const y = ...→ 初始化y； - 最后执行
x()→ 进入函数体，console.log输出，然后调用y()； - 此时
y已完成初始化，且在当前词法环境（全局模块作用域）中可访问 → 调用成功。
- 首先执行
✅ 所以 y() 能被调用，根本原因不是“y 提前可用”，而是 x() 的执行时机晚于 y 的初始化时机，且二者共享同一块级作用域（ES6 模块顶层即块级作用域）。
反例验证（如答案所示）：
const x = () => {
y(); // ReferenceError: Cannot access 'y' before initialization
};
x(); // ❌ 立即执行 → 此时 y 仍处于 TDZ！
const y = () => console.log('hello y'); // 这行还没执行到此时控制台将明确报错：ReferenceError: Cannot access 'y' before initialization —— 这正是 TDZ 的典型表现。
? 进阶理解：为什么不是“作用域链延迟查找”导致的“侥幸通过”？
因为 y 是 const 声明，其绑定存在于当前词法环境记录（Lexical Environment Record） 中，且在 x 函数体内无同名遮蔽，因此 y() 查找直接命中顶层环境。若 y 未初始化（即尚未执行 const y = ...），该绑定虽存在但处于 TDZ 状态，引擎拒绝访问 —— 这是语言规范强制保障的安全机制。
? 总结与最佳实践：
- ✅ 函数表达式（含箭头函数）不提升可调用性，仅
const/let声明被提升并进入 TDZ； - ✅ 调用能否成功，取决于执行时刻该变量是否已退出 TDZ，而非声明顺序的表象；
- ⚠️ 切勿依赖“先定义后调用”的隐式时序，尤其在复杂模块或动态导入场景中；
- ✅ 推荐显式组织依赖：将被调用方（如
y）置于调用方（如x）之前，增强可读性与可维护性； - ✅ 在 TypeScript 或 ESLint（启用
no-use-before-define）中，此类跨声明调用会被标记为潜在风险，建议主动规避。
真正的工程直觉，不来自背诵“能用/不能用”，而来自在 Chrome DevTools 的 Sources 面板中单步执行，亲眼观察执行上下文栈（Call Stack）、作用域（Scope）面板中变量的 Uninitialized → Initialized 状态切换 —— 那一刻，TDZ 不再是概念，而是你调试器里跳动的现实。
