JavaScript 函数声明与函数表达式的区别详解

JavaScript 函数定义方式的核心差异

在JavaScript开发中，尽管已经编写了大量函数，但直到近期才彻底厘清两种函数定义方式的本质区别。这一认知过程令人感慨，特此记录以时刻提醒自身需夯实基础。即便经验积累多年，也不应再对基础概念模糊不清。

在JavaScript代码中，通常可以观察到以下两种定义函数的常见形式：

// 函数声明方式
function fn(str)
{
console.log(str);
};
// 函数表达式方式
var fnx=function(str)
{
 console.log(str+ ' from fnx');
};

以往在编写代码时，往往凭直觉随意混用这两种方式。直到系统复习JavaScript基础后，才彻底解开了心中的疑惑：

这两种方式虽然都创建了新的函数对象，但存在关键差异。函数声明语句中的函数名被视为一个变量名，该变量指向函数对象。与通过var声明普通变量类似，函数声明语句中的函数定义会被提升到脚本或函数的顶部，因此在整个脚本或函数内部均可访问。然而，使用var定义的函数表达式不同，只有变量声明部分被提升，而变量初始化代码仍保留在原位置。这意味着，通过函数语句创建的函数，其名称和函数体均被提升，因此可以在声明之前直接调用；而函数表达式在声明前访问变量时，其值为undefined。

变量提升机制与执行顺序对比

具体的代码验证示例如下：

console.log(typeof(fn)); // 输出 function
fn('abc'); // 正常输出 abc
console.log(typeof(fnx)); // 输出 undefined
if(fnx)
 fnx('abc'); // 此分支不会执行
 else
 console.log('fnx is undefined'); // 输出 fnx is undefined
// 函数声明代码块
 function fn(str)
 {
 console.log(str);
 };
// 函数表达式代码块
 var fnx=function(str)
 {
 console.log(str+ ' from fnx');
 };

代码示例较为简单，旨在帮助那些此前对两者区别存在困惑的开发者获得清晰的认识。