函数声明与函数表达式的关键区别

在JavaScript中，函数是构建程序的基础模块，而函数声明(Function Declaration)和函数表达式(Function Expression)是创建函数的两种主要方式。虽然它们都能实现相似的功能，但两者在语法、作用域、提升行为等方面存在重要差异。理解这些区别对于编写可预测、可维护的JavaScript代码至关重要。

1. 基本语法差异

函数声明使用function关键字开头，后跟函数名：

function greet(name) {
  return `Hello, ${name}!`;
}

函数表达式则将函数赋值给一个变量或属性：

const greet = function(name) {
  return `Hello, ${name}!`;
};

或者使用箭头函数表达式：

const greet = (name) => `Hello, ${name}!`;

2. 提升(Hoisting)行为

这是两者最显著的区别之一：

• 函数声明会被完全提升(hoisted)到当前作用域的顶部，这意味着你可以在声明之前调用函数：

sayHello(); // 正常工作
function sayHello() {
  console.log("Hello!");
}

• 函数表达式不会被提升。只有变量声明会被提升，而函数赋值保持在原位：

sayHi(); // 报错: sayHi is not a function
var sayHi = function() {
  console.log("Hi!");
};

3. 作用域差异

• 函数声明在它所在的作用域内始终可用
• 函数表达式遵循常规的变量作用域规则

值得注意的是，函数声明在块级作用域(如if语句或循环)中的行为可能不一致，这是函数表达式更可靠的地方。

4. 命名函数与匿名函数

• 函数声明必须有名称
• 函数表达式可以是匿名的：

const anonymous = function() { ... }; // 匿名函数表达式

或者有名称(命名函数表达式)：

const named = function myFunc() { ... }; // 命名函数表达式

命名函数表达式在调试时更有优势，因为堆栈跟踪会显示函数名。

5. 立即调用函数(IIFE)

函数表达式常用于立即调用函数模式(IIFE)：

(function() {
  console.log("立即执行!");
})();

而函数声明不能直接这样使用：

function() { // 语法错误
  console.log("这会报错");
}();

6. 作为参数传递

函数表达式可以更简洁地作为参数传递：

setTimeout(function() {
  console.log("1秒后执行");
}, 1000);

或者使用箭头函数：

setTimeout(() => console.log("1秒后执行"), 1000);

7. 何时使用哪种方式

使用函数声明：

• 当你需要提升特性时
• 当函数是代码的主要组成部分时
• 当函数需要被多次调用时

使用函数表达式：

• 当你需要控制函数的可见性时
• 当函数作为参数传递或赋值给变量时
• 在条件语句中定义函数时
• 使用箭头函数的简洁语法时

结论

理解函数声明和函数表达式的区别有助于开发者做出更合适的选择。函数声明提供了提升的便利性，而函数表达式则提供了更大的灵活性，特别是在现代JavaScript中与箭头函数结合使用时。根据具体场景选择适当的形式，可以使代码更加清晰、可维护。