JavaScript 中函数重声明与变量提升的执行时序解析-html教程-PHP中文网

JavaScript 中函数重声明与变量提升的执行时序解析

本文深入剖析 javascript 中函数重声明与变量提升（hoisting）的底层机制，重点解释为何使用 const 声明重复变量会触发 syntaxerror（阻止整个脚本执行），而赋值给已声明常量则抛出 typeerror（允许函数提升完成后再失败）。

本文深入剖析 javascript 中函数重声明与变量提升（hoisting）的底层机制，重点解释为何使用 const 声明重复变量会触发 syntaxerror（阻止整个脚本执行），而赋值给已声明常量则抛出 typeerror（允许函数提升完成后再失败）。

在 JavaScript 中，函数声明（function greeting() { ... }）具有提升（hoisting）特性：其声明会被“移动”到当前作用域顶部，因此可在定义前调用。但需特别注意——提升 ≠ 执行，且不同错误类型发生在完全不同的生命周期阶段。

关键区分：SyntaxError（解析时） vs TypeError（运行时）

✅ SyntaxError 是解析阶段错误
当引擎读取 .js 文件进行词法分析和语法分析时（即“解析”阶段），若遇到非法语法（如重复 const name），会立即报错并终止该文件的整个解析过程。后续代码（包括函数声明）根本不会进入执行上下文，更谈不上提升或执行。
```
// second.js —— 解析失败，greeting 函数声明从未被识别
const name = "Zaptec"; // ❌ SyntaxError: Identifier 'name' has already been declared
function greeting() { ... } // ← 这行永远不会被处理
```
✅ TypeError 是执行阶段错误
若语法合法（如 name = "Zaptec"），文件可成功解析，所有函数声明完成提升，变量声明（含 const）也完成初始化绑定。随后进入执行阶段：函数体被求值并覆盖同名函数，直到执行到非法赋值语句时才抛出 TypeError。此时 greeting 已被第二个定义覆盖。
```
// second.js —— 解析成功 → 提升完成 → 执行函数声明 → 覆盖 greeting → 执行赋值 → 报错
name = "Zaptec"; // ❌ TypeError: Assignment to constant variable.
function greeting() { ... } // ✅ 已提升并执行，覆盖 first.js 中的 greeting
```

验证实验：观察实际行为

<!-- index.html -->
<script src="first.js"></script><script src="second.js"></script><script>greeting();</script>

Case 1（双 const）：页面直接白屏或控制台报 SyntaxError，greeting() 调用不执行（因 second.js 解析失败，greeting 仍为 first.js 定义，但实际因错误中断，浏览器可能不执行后续 <script></script>）。
Case 2（仅 first.js 有 const）：greeting() 弹出 "Our company is called Chris." —— 即使用了 second.js 的函数体，却访问了 first.js 的 name！因为 second.js 中 name = "Zaptec" 失败，name 保持原值（"Chris"），而 greeting 已被替换。

⚠️ 注意：此行为依赖于非严格模式。在严格模式下，对全局 name 的隐式赋值会直接报错（ReferenceError），且 window.name 是只读属性，实际开发中应避免依赖全局污染。

Java Api Extractor
从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载