本文深入解析 `var` 提升（hoisting）机制为何在同页面不同 `<script>` 标签中失效，阐明<a style="color:#f60; text-decoration:underline;" title= "作用域" href="https://www.php.cn/zt/35787.html" target="_blank">作用域边界如何导致 `referenceerror` 而非 `undefined`，并对比 `let`/`const` 的时序死区特性，帮助开发者规避常见陷阱。</script>
在 JavaScript 中，var 声明确实会被“提升”（hoisting）——即变量声明会被移动到其所在作用域的顶部，但仅限于当前作用域内。关键点在于：每个 <script> 标签都构成一个独立的全局执行上下文（即独立的作用域）</script>，它们之间不共享变量声明，即使位于同一 HTML 页面中。
为什么跨 <script> 标签访问会报错？</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 是彻底未声明（undecla<a style="color:#f60; text-decoration:underline;" title= "red" href="https://www.php.cn/zt/122037.html" target="_blank">red），因此触发 ReferenceError，而非 undefined。</script>
✅ undefined 出现在“已声明但未初始化”的情况； ❌ ReferenceError 出现在“根本未声明”的情况。
为什么同个 <script> 内却输出 undefined？</script>
<body>
<script>
console.log(x); // ✅ 输出 undefined
var x = 10;
</script>
</body>这是因为 var x 的声明被提升到了该 <script> 作用域顶部（等价于 var x; 被自动前置），但赋值 x = 10 仍保留在原位置。执行时流程如下：</script>
立即学习“Java免费学习笔记（深入）”；
var x; // 提升：声明存在，值为 undefined console.log(x); // → undefined x = 10; // 初始化：此时才赋值
这就是典型的 var 提升行为：声明提升 + 初始化不提升。
升级说明：1.头像上传部分浏览器没法选择bug2.后台增加会员登录次数，后台修改会员密码功能3.b2c广告后台可以控制4.商品详情页面显示b2c返利价格和淘宝返积分bug5.修复360安全检测检测出的 注册页面有跨站脚本攻击漏洞bug6.邀请好友链接地址bug7.后台自定义采集bug， 采集后商品分类的数量不变bug8.后台30天推广量 单位错误bug9.修复用户中心修改emali不起作用的b
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" 实现<strong>延迟执行 + 顶层作用域共享（需注意模块默认是严格模式且有作用域隔离）：</script>
<body>
<script type="module">
console.log(x); // ✅ 正常输出 10（前提是 x 已在同模块或导入中声明）
</script>
<script>
var x = 10; // ⚠️ 注意：此 x 不在模块作用域内！模块无法访问此全局 var
</script>
</body>⚠️ 实际上，上述模块脚本依然无法访问第二个 <script> 中的 var x</script>，因为模块拥有自己的顶级作用域，不继承传统 <script> 的全局属性（除非显式挂载到 <a style="color:#f60; text-decoration:underline;" title= "win" href="https://www.php.cn/zt/19041.html" target="_blank">window）。真正可行的方式是统一使用模块语法并导出/导入：</script>
<script type="module">
import { x } from './vars.js';
console.log(x); // ✅
</script>
<script type="module" src="./vars.js"></script>总结与最佳实践
- ✅ var 提升仅限单个 <script>（或函数）作用域内；跨 <script> 标签不共享声明；</script>
- ✅ console.log(x) 报 ReferenceError → x 未声明；输出 undefined → x 已声明但未初始化；
- ✅ 优先使用 const / let：更安全、语义清晰、避免 TDZ 外的意外行为；
- ✅ 避免依赖提升编写逻辑；始终遵循“先声明，后使用”原则；
- ✅ 大型项目建议采用 ES 模块（type="module"）+ 显式导入导出，实现可控的变量共享与作用域管理。
理解作用域边界与提升机制，是写出健壮、可维护 JavaScript 代码的基础。
