本文深入解析 `var` 提升（hoisting）机制为何在同页面不同 `<script>` 标签中失效，阐明作用域边界如何导致 `referenceerror` 而非 `undefined`，并对比 `let`/`const` 的时序死区特性，帮助开发者规避常见陷阱。</script>
在 JavaScript 中，var 声明确实会被“提升”（hoisting）——即变量声明会被移动到其所在作用域的顶部，但仅限于当前作用域内。关键点在于：每个 <script> 标签都构成一个独立的全局执行上下文（即独立的作用域），它们之间不共享变量声明，即使位于同一 HTML 页面中。
为什么跨 <script> 标签访问会报错？
看这个例子：
<body>
<script>
console.log(x); // ❌ Uncaught ReferenceError: x is not defined
</script>
<script>
var x = 10;
</script>
</body>虽然 var x 在第二段脚本中声明，但第一段脚本完全不知道它的存在——因为 var x 的提升只发生在它所在的 <script> 内部作用域中。第一段脚本中既无声明也无定义，x 是彻底未声明（undeclared），因此触发 ReferenceError，而非 undefined。
✅ undefined 出现在“已声明但未初始化”的情况； ❌ ReferenceError 出现在“根本未声明”的情况。
为什么同个 <script> 内却输出 undefined？
<body>
<script>
console.log(x); // ✅ 输出 undefined
var x = 10;
</script>
</body>这是因为 var x 的声明被提升到了该 <script> 作用域顶部（等价于 var x; 被自动前置），但赋值 x = 10 仍保留在原位置。执行时流程如下：
立即学习“Java免费学习笔记（深入）”；
var x; // 提升：声明存在，值为 undefined console.log(x); // → undefined x = 10; // 初始化：此时才赋值
这就是典型的 var 提升行为：声明提升 + 初始化不提升。
let 和 const 的行为更严格（推荐使用）
现代 JavaScript 推荐用 let 和 const 替代 var，它们也存在“提升”，但处于暂时性死区（Temporal Dead Zone, TDZ）：在声明语句执行前访问变量，会直接抛出 ReferenceError，而非返回 undefined。
<body>
<script>
console.log(y); // ❌ ReferenceError: Cannot access 'y' before initialization
let y = 20;
</script>
</body>TDZ 的设计初衷正是为了暴露潜在错误，避免 var 那种静默返回 undefined 导致的隐蔽逻辑 bug。
补充说明：能否让后定义的变量被前置脚本访问？
常规 <script> 按顺序同步执行，无法跨标签共享声明。但若使用模块化方式，可借助 type="module" 实现延迟执行 + 顶层作用域共享（需注意模块默认是严格模式且有作用域隔离）：
<body>
<script type="module">
console.log(x); // ✅ 正常输出 10（前提是 x 已在同模块或导入中声明）
</script>
<script>
var x = 10; // ⚠️ 注意：此 x 不在模块作用域内！模块无法访问此全局 var
</script>
</body>⚠️ 实际上，上述模块脚本依然无法访问第二个 <script> 中的 var x，因为模块拥有自己的顶级作用域，不继承传统 <script> 的全局属性（除非显式挂载到 window）。真正可行的方式是统一使用模块语法并导出/导入：
<script type="module">
import { x } from './vars.js';
console.log(x); // ✅
</script>
<script type="module" src="./vars.js"></script>总结与最佳实践
- ✅ var 提升仅限单个 <script>（或函数）作用域内；跨 <script> 标签不共享声明；
- ✅ console.log(x) 报 ReferenceError → x 未声明；输出 undefined → x 已声明但未初始化；
- ✅ 优先使用 const / let：更安全、语义清晰、避免 TDZ 外的意外行为；
- ✅ 避免依赖提升编写逻辑；始终遵循“先声明，后使用”原则；
- ✅ 大型项目建议采用 ES 模块（type="module"）+ 显式导入导出，实现可控的变量共享与作用域管理。
理解作用域边界与提升机制，是写出健壮、可维护 JavaScript 代码的基础。
