JavaScript 函数声明与函数表达式的区别及提升机制解析

两种函数定义方式的语法对比

通常我们遇到的两种写法如下：

1. 函数声明：以 function 关键字开头，直接命名函数。
2. 函数表达式：将匿名函数赋值给一个变量，本质上是一个表达式运算的结果。

// 函数声明 (Function Declaration)
function fn(str) {
  console.log(str);
}

// 函数表达式 (Function Expression)
var fnx = function(str) {
  console.log(str + ' from fnx');
};

核心差异：提升机制 (Hoisting)

要真正理解两者的区别，必须深入 JavaScript 的执行上下文环境。在执行任何代码之前，引擎会进行预编译，此时发生了“提升”现象。

1. 函数声明：完整提升

函数声明语句中的函数名和函数体均被提前到了脚本或当前作用域的顶部。这意味着，你可以在声明它之前就使用它，且不会报错。

// 在声明前调用函数声明定义的函数
console.log(typeof(fn)); // "function"
fn('abc'); // 输出: abc

2. 函数表达式：部分提升

在使用 var 定义函数表达式时，只有变量声明（即 var fnx）会被提升到顶部，并初始化为 undefined；而赋值操作（即将函数体赋予该变量）仍然停留在原来的代码位置执行。

如果在赋值发生前尝试调用该变量，由于它目前只是一个值为 undefined 的普通变量而非函数，调用将会失败。

// 在赋值前调用函数表达式定义的变量
console.log(typeof(fnx)); // "undefined" (注意这里是 undefined，不是 function)

if (fnx) {
  fnx('abc'); // 不会执行
} else {
  console.log('fnx is undefined'); // 输出: fnx is undefined
}

原理总结与最佳实践

• 执行顺序要求：函数声明无需遵循书写顺序，全局可用；函数表达式必须严格按照从上到下的顺序书写，确保先定义后使用。
• 现代规范建议：虽然现代 JavaScript 推荐使用 const 或 let 替代 var，但其提升特性有所不同（不初始化导致暂时性死区）。对于函数定义，保持清晰的声明习惯或统一采用箭头函数等表达式形式，有助于减少因提升机制带来的隐蔽 Bug。

以上就是 JavaScript 用函数语句和表达式定义函数的区别详解，更多关于 JavaScript 基础与进阶的资料请关注本站其它相关文章！