本文深入解析JavaScript中两种函数定义方式的核心差异。通过对比函数表达式（匿名函数）与函数声明，详细阐述“提升”机制对代码执行顺序的影响。结合多个代码示例，说明为何函数声明可先调用后定义，而变量赋值不会提升，帮助开发者规避潜在的执行错误。
JavaScript 函数声明机制概述
JavaScript 声明函数
在 JavaScript 中，定义函数主要存在两种语法模式：一种是通过函数表达式（通常表现为匿名函数形式）来定义，另一种则是通过标准的函数语句（Function Declaration）来定义。以下将结合具体代码进行说明。
/*方式一*/
var FUNCTION_NAME = function() { /* FUNCTION_BODY */};
/*方式二*/
function FUNCTION_NAME () { /* FUNCTION_BODY */}; 函数表达式与函数声明的执行顺序差异
区别一
采用函数表达式方式定义函数时，必须遵循“先声明、后使用”的原则。如果试图在赋值语句执行前调用该函数，程序将抛出错误。
相比之下，使用函数语句定义函数时，允许“先调用、后声明”。即使代码中函数定义的位置在调用语句之后，JavaScript 引擎也能正确执行。
/*方式一:
*先声明后使用
*/
//f1();这里调用就会出错
var f1 = function () {
alert("var方式");
}
f1();//这里使用才正确
/*方式二:
*可以先使用后声明
*/
f2(); //这里调用可以正常执行
function f2 () {
alert("function方式");
}
f2();//这里调用可以正常执行
函数声明提升机制深度解析
区别二
//方式一
var FUNCTION_NAME = function() { /* FUNCTION_BODY */};
/*
这种方式,编译后变量声明 FUNCTION_NAME 会“被提前”了，但是他的赋值（也就是FUNCTION_BODY）并不会被提前。匿名函数只有在被调用时才被初始化。
*/
//方式二
function FUNCTION_NAME () { /* FUNCTION_BODY */};
/*
这种方式， 编译后 函数声明 和 赋值 都会被提前。
即函数声明过程在整个程序执行之前的预处理就完成了，所以只要处于同一个作用域，就可以访问到，即使在定义之前调用它也可以。
*/
为了更直观地理解这两种方式在底层行为上的差异，我们来看一个具体的代码示例。
function f() {
alert('1');
}
f(); // 弹窗内容是：2
function f() {
alert ('2');
}
在上述代码中，运行 f() 时弹出的内容是 '2'。这主要归因于 JavaScript 函数声明的“提升”（Hoisting）机制。简而言之，JavaScript 允许在变量和函数正式声明之前使用它们。当存在同名函数时，后定义的声明会覆盖先前的定义。因此，从编译逻辑上看，上述代码等价于将两个函数声明都提前到了作用域的顶部，且第二个定义覆盖了第一个。
function f() {
alert('1');
}
function f() {
alert ('2');//申明前置了，但因为这里的申明和赋值在一起，所以一起前置
}
f(); // 弹窗内容是：2
接下来再看另一个例子，展示函数表达式与函数声明混合使用时的行为。
var f= function() {
alert('1');
}
f(); // 弹窗内容是：1
function f() {
alert ('2');
}
这里的执行结果符合预期逻辑。这段程序在编译后，其内部处理逻辑大致相当于先将变量 f 的声明提升，但赋值操作保留在原位，随后再处理函数声明的提升。
var f; //申明前置了
function f() {
alert('1');
}
f(); // 弹窗内容是：1
function f() {
alert ('2');
}
最后，我们分析第三个例子，进一步验证上述结论。
f(); //第一次调用函数 弹窗内容是：2
var f= function() {
alert('1');
}
f(); //第二次调用函数 弹窗内容是：1
function f() {
alert ('2');
}
f(); //第三次调用函数 弹窗内容是：1
通过观察上述示例的运行结果，读者应当能够清晰理解函数表达式与函数声明在提升机制上的本质区别。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！