HTML文档中Script标签顺序对全局变量初始化的干预

轻墨酱_7721

轻墨酱_7721

2026-06-28

644人浏览

原创

javascript脚本按html顺序严格执行:var声明提升但赋值不提升,let/const存在暂时性死区,function声明完整提升但内部逻辑仍依赖执行时机,defer脚本严格保序,动态插入脚本不继承前序变量,dom就绪不等于脚本就绪。

html文档中script标签顺序对全局变量初始化的干预

脚本顺序直接决定全局变量能否被后续脚本读取到有效值,不是“可能出问题”,而是“必然按顺序执行赋值”——var声明会提升但赋值不提升,let/const连声明都不提升,function声明虽可跨块调用但内部依赖仍受执行时机约束。

为什么<script>顺序错一位,<code>a就变成&lt;code&gt;undefined&lt;/script&gt; &lt;/h3&gt; &lt;p&gt;因为每个&lt;script&gt;块都有独立的创建阶段和执行阶段:浏览器先扫一遍当前块里的&lt;code&gt;var和&lt;code&gt;function声明(提升),再逐行执行语句(赋值)。块与块之间不共享执行流,前一个块没执行完,后一个块哪怕写了&lt;code&gt;console.log(a)也拿不到值。&lt;/script&gt;&lt;/p&gt; &lt;ul&gt; &lt;li&gt; &lt;code&gt;&lt;script&gt;var a = 1;&lt;/script&gt;</code> → <code>&lt;script&gt;console.log(a);&lt;/script&gt;</code>:输出 <code>1</code> </li> <li>顺序颠倒:第二个脚本执行时,<code>a</code>尚未声明,报 <code>ReferenceError: a is not defined</code> </li> <li>若第一个脚本用 <code>let a = 1</code>,哪怕位置在前,第二个脚本仍报错——<code>let</code>存在暂时性死区(TDZ),<code>a</code>在声明语句执行前不可访问</li> </ul> <h3> <code>function</code>声明能跨<script>调用,但别急着信</script>

function fn() {}会被完整提升到全局上下文的创建阶段,所以只要它所在的

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
GDB 17.2 官方文档集合
GDB 17.2 官方文档集合

共0课时 | 0人学习

Bootstrap 入门安装配置
Bootstrap 入门安装配置

共0课时 | 0人学习

38+ PhpStorm 提示和技巧
38+ PhpStorm 提示和技巧

共1课时 | 224人学习