JavaScript 中 var 变量提升与脚本作用域的深度解析

本文详解为何跨 `<script>` 标签访问未声明变量会报 `referenceerror`，而同标签内却输出 `undefined`——核心在于变量提升（hoisting）仅发生在**同一<a style="color:#f60; text-decoration:underline;" title= "作用域" href="https://www.php.cn/zt/35787.html" target="_blank">作用域内**，而每个 `<script>` 标签默认拥有独立的全局执行上下文。</script>

在 JavaScript 中，var 声明确实会被“提升”（hoisted），但这并不意味着变量在任意位置都可安全访问——它只在当前作用域的顶部被声明（初始化为 undefined），而非“全局可见”。关键点在于：每个 <script> 标签构成一个独立的执行环境（execution context）</script>，彼此之间不共享变量声明阶段的提升效果。

✅ 同一 <script> 内：提升生效，输出 undefined</script>

<script>
  console.log(x); // 输出: undefined
  var x = 10;
</script>

等价于：

var x; // 提升：声明被移至作用域顶部，值为 undefined
console.log(x); // 此时 x 已声明但未赋值 → undefined
x = 10; // 赋值发生在原位置

由于 var x 的声明和 console.log(x) 处于同一脚本块、同一函数作用域（此处为全局），提升机制完整生效。

❌ 跨 <script> 标签：无跨作用域提升，直接报错</script>

<script>
  console.log(x); // Uncaught ReferenceError: x is not defined
</script>
<script>
  var x = 10;
</script>

第一个 <script> 执行时，其全局作用域中<strong>根本不存在 x 的声明——第二个 <script> 的 var x 对它完全不可见。JavaScript 引擎不会“预扫描整个 HTML 文档”来收集所有 var 声明；它按 <script> 顺序逐个解析、编译、执行。因此，首次访问 x 属于对<strong>未声明标识符的引用，触发 ReferenceError（而非 undefined）。</script>

立即学习“Java免费学习笔记（深入）”；

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

下载

? 类比理解：var 提升 ≠ 全局广播。它是“本地编译期行为”，仅影响当前脚本块的词法分析结果。

⚠️ 更安全的选择：let 和 const（避免隐式提升陷阱）

let/const 也存在“提升”，但处于暂时性死区（Temporal Dead Zone, TDZ）：从块顶部到实际声明语句之间，访问该变量会抛出 ReferenceError，而非返回 undefined。这反而提升了代码健壮性：

<script>
  console.log(y); // ReferenceError: Cannot access 'y' before initialization
  let y = 20;
</script>

✅ 推荐实践：

• 永远优先使用 const（默认不可变，语义清晰）；
• 仅当变量需重新赋值时用 let；
• 彻底避免 var —— 其函数作用域、变量提升与重复声明容忍等特性极易引发隐蔽 bug。

? 补充：能否让后定义的变量“提前可用”？

严格来说不能，但可通过模块化规避执行顺序依赖：

<script type="module">
  console.log(x); // ✅ 正常输出 10（模块脚本延迟执行，且共享模块作用域）
</script>
<script>
  var x = 10;
</script>

注意：type="module" 使脚本变为 ES 模块，具有顶层作用域共享性与自动 defer 行为，但这是模块系统的特性，并非 var 提升的延伸。

✅ 总结

牢记：作用域决定提升范围，脚本边界即作用域边界。 理解这一点，是写出可预测、易调试 JavaScript 代码的第一步。