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

预解析的执行逻辑

JavaScript引擎在运行脚本时分为两个阶段：预解析阶段和代码执行阶段。

• 预解析阶段：在当前作用域内扫描所有的 var 声明和函数声明，并将它们“提升”到作用域的最顶端。
• 代码执行阶段：按照代码从上到下的书写顺序实际执行逻辑。

预解析进一步细分为变量预解析和函数预解析，两者的处理方式存在关键区别。

变量预解析（变量提升）

变量提升是指所有使用 var 关键字声明的变量，其声明部分会被提升到当前作用域的顶部，但赋值操作保留在原地。这意味着变量在声明之前访问是合法的，但其值为 undefined。

第1步：观察变量提升现象

目的：验证变量声明的提升效果。
入口：控制台执行以下代码：

console.log(num);
var num = 10;

重要参数：num 为局部变量。
可观察状态：输出结果为 undefined。这是因为预解析后执行顺序等效于：var num;（此时 num 值为 undefined），接着打印，最后执行 num = 10;。

函数预解析（函数提升）与表达式的差异

函数提升是将整个函数的声明提升到当前作用域顶部，因此可以在声明之前调用该函数。然而，如果通过变量赋值的方式来定义函数（即函数表达式），则遵循变量提升规则，仅提升变量名而不提升函数体。

第2步：对比函数声明与函数表达式

目的：识别函数表达式调用的报错原因。
入口：尝试调用通过变量赋值的函数：

fun();
var fun = function() {
    console.log(22);
};

重要参数：fun 被声明为普通变量而非函数声明。
可观察状态：控制台抛出 TypeError（cannot call ... of undefined）。因为预解析时 fun 被视为变量且值为 undefined，随后尝试调用 fun() 即试图调用一个未定义的值，导致错误。

完成判断

确认理解了“声明提升”与“赋值保留”的规则，能够预判代码执行时的作用域行为。在进行函数调用前，确保函数已通过完整声明方式（Function Declaration）或提前完成的函数表达式（Function Expression）初始化。

排错指南

若遇到类似 fun is not a function 的错误，请检查是否混淆了 function fun(){}（函数声明）与 var fun = function(){}（函数表达式）。前者支持提前调用，后者必须在赋值完成后才能调用。

以上就是JavaScript变量提升与函数声明的详细解析，更多关于JavaScript高级特性的资料请关注本站其它相关文章！