本文详解为何跨 `<script>` 标签访问 `var` 变量会报 `referenceerror`，而同标签内却输出 `undefined`，并对比 `var`/`let`/`const` 的提升行为与<a style="color:#f60; text-decoration:underline;" title= "作用域" href="https://www.php.cn/zt/35787.html" target="_blank">作用域差异，帮助开发者规避常见陷阱。</script>
在 JavaScript 中，变量提升（Hoisting） 是一个常被误解的核心机制。它并非将代码“移动”到顶部，而是指声明（declaration）在编译阶段被提升至其作用域顶部，而初始化（assignment）仍保留在原位置。但关键前提是：提升仅发生在同一作用域内。
为什么同 <script> 内 console.log(x) 输出 undefined？
<body>
<script>
console.log(x); // undefined
var x = 10;
</script>
</body>这段代码实际等效于：
<script> var x; // 声明被提升（值为 undefined） console.log(x); // 此时 x 已声明但未赋值 → undefined x = 10; // 初始化发生在原位置 </script>
由于 var x 的声明属于当前 <script> 全局作用域，提升生效，因此访问 x 不会报错，而是返回 undefined。
为什么跨 <script> 标签会抛出 ReferenceError？
<body>
<script>
console.log(x); // Uncaught ReferenceError: x is not defined
</script>
<script>
var x = 10;
</script>
</body>⚠️ 重要事实：每个 <script> 标签（无论内联或外部）都拥有独立的执行上下文和作用域。
第一个 <script> 中，x 从未被声明过——var x = 10 属于第二个 <script> 的作用域，对第一个完全不可见。此时访问未声明的标识符，JavaScript 引擎直接抛出 ReferenceError，而非 undefined。这与“未声明（not declared）”和“已声明但未初始化（declared but uninitialized）”有本质区别。
let 和 const 的不同：时间死区（Temporal Dead Zone, TDZ）
虽然 let/const 也存在“提升”，但它们不被初始化为 undefined。在声明语句执行前访问，会触发 TDZ 错误：
立即学习“Java免费学习笔记（深入）”；
<script> console.log(y); // ReferenceError: Cannot access 'y' before initialization let y = 20; </script>
✅ 这是 let/const 相比 var 更安全的设计：它强制开发者按顺序声明再使用，避免因隐式 undefined 导致的逻辑错误。
如何让跨 <script> 访问生效？（不推荐，仅作技术说明）
理论上可通过模块化打破隔离（利用 ES 模块的顶层作用域共享特性）：
<body>
<script type="module">
console.log(x); // ReferenceError —— 仍会报错！因为 x 在非模块脚本中声明
</script>
<script>
var x = 10;
</script>
</body>⚠️ 注意：即使使用 type="module"，普通 <script> 与模块 <script> 仍属不同作用域，无法直接共享变量。真正共享需统一为模块，并显式导出/导入：
<script type="module">
import { x } from './data.js';
console.log(x); // ✅ 正确方式
</script>最佳实践总结
- ❌ 避免使用 var：其函数作用域、变量提升+静默 undefined 行为极易引发隐蔽 bug；
- ✅ 优先使用 const（默认）和 let（需重新赋值时）：块级作用域 + TDZ 提供更可预测的行为；
- ? 所有变量应在使用前声明，杜绝跨脚本依赖；
- ? 复杂逻辑应封装为模块，通过 export/import 显式管理依赖，而非依赖全局污染。
理解作用域边界与提升机制的本质，是写出健壮、可维护 JavaScript 的基石。
