JavaScript 中 var foo = function() 与 function foo() 的区别及变量提升机制
本文深入解析JavaScript中函数声明与变量声明的“提升”（hoisting）行为差异。通过对比 `var foo = function() {}` 与 `function foo() {}` 两种定义方式，阐明前者仅提升变量声明而赋值在调用时执行，后者则声明与赋值均被提前。文章结合具体代码示例，说明为何在定义前调用函数声明式函数有效，而匿名函数赋值会报错，帮助开发者避免常见陷阱。
引言：函数定义方式的差异
在编写代码时遇到相关疑问，借此机会进行梳理和总结。
JavaScript 的变量提升机制
JavaScript 中函数与变量声明存在“提升”（hoisting）机制。
匿名函数表达式的提升行为
简单来说，若采用匿名函数表达式的方式定义函数，
var a = {}
编译过程中变量声明部分会被提升至作用域顶部，但其赋值操作（即函数体的绑定）并不会被提升。
这意味着，匿名函数仅在真正被调用时才完成初始化过程。
函数声明语句的提升行为
若采用函数声明语句的方式定义函数，
function a () {};
编译后函数的声明及其赋值操作均会被提升至作用域顶部。
这表明函数声明过程在程序执行前的预处理阶段即已完成，因此只要处于同一作用域内，即便在定义语句之前调用该函数也能正常访问。
代码示例与编译结果分析
参考以下示例：
function hereOrThere() { //function statement
return 'here';
}
console.log(hereOrThere()); // alerts 'there'
function hereOrThere() {
return 'there';
}执行 alert(hereOrThere) 语句时，控制台会输出 alert('there')。这一结果看似反直觉，实则源于 JavaScript 函数声明的提升机制。简言之，JavaScript 允许在变量和函数声明之前使用它们，且后续定义会覆盖之前的定义。换言之，上述代码在编译后的等效逻辑为：
function hereOrThere() { //function statement
return 'here';
}
function hereOrThere() {//申明前置了，但因为这里的申明和赋值在一起，所以一起前置
return 'there';
}
console.log(hereOrThere()); // alerts 'there'我们预期的行为逻辑如下：
var hereOrThere = function () { // function expression
return 'here';
};
console.log(hereOrThere()); // alerts 'here'
hereOrThere = function () {
return 'there';
};该段程序在编译后的等效逻辑为：
var hereOrThere；//申明前置了
hereOrThere = function() { // function expression
return 'here';
};
console.log(hereOrThere()); // alerts 'here'
hereOrThere = function() {
return 'there';
};总结
总结
以上内容介绍了 JavaScript 中定义函数时使用 `var foo = function () {}` 与 `function foo()` 的区别，希望能对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！
怎么用 Promise 封装 JavaScript sleep 函数实现异步延时
2026-11-05 17:49:14
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02