4.3 函数声明 vs 函数表达式

4.3 函数声明 vs 函数表达式

在 JavaScript 中，函数可以通过 函数声明 和 函数表达式 两种方式定义。虽然它们的功能相似，但在语法、作用域和提升行为上有显著区别。本节将详细对比这两种定义方式，帮助你理解它们的差异和适用场景。

4.3.1 函数声明

函数声明是通过 function 关键字直接定义函数的方式。

1. 语法

function functionName(parameters) {
  // 函数体
}

2. 特点

• 提升（Hoisting）：函数声明会被提升到作用域的顶部，因此可以在定义之前调用。

  greet(); // 输出 "Hello!"
  function greet() {
    console.log("Hello!");
  }
  

• 命名函数：函数声明必须有一个函数名。
• 块级作用域：在严格模式下，函数声明具有块级作用域。

3. 示例

function add(a, b) {
  return a + b;
}
console.log(add(2, 3)); // 输出 5

4.3.2 函数表达式

函数表达式是将函数赋值给一个变量或属性的方式。

1. 语法

const functionName = function (parameters) {
  // 函数体
};

2. 特点

• 不提升：函数表达式不会被提升，必须在定义之后调用。

  greet(); // 报错：TypeError
  const greet = function () {
    console.log("Hello!");
  };
  

• 匿名函数：函数表达式可以是匿名的，也可以有函数名。
• 灵活性强：函数表达式可以作为参数传递，也可以立即调用（IIFE）。

3. 示例

const multiply = function (a, b) {
  return a * b;
};
console.log(multiply(2, 3)); // 输出 6

4.3.3 函数声明与函数表达式的对比

4.3.4 应用场景

1. 函数声明的适用场景

• 定义通用的工具函数。
• 需要在定义之前调用函数。

2. 函数表达式的适用场景

• 作为回调函数传递给其他函数。
• 定义立即执行函数（IIFE）。
• 动态创建函数。

4.3.5 示例代码

示例 1：函数声明

function calculateArea(width, height) {
  return width * height;
}
console.log(calculateArea(5, 10)); // 输出 50

示例 2：函数表达式

const calculateVolume = function (width, height, depth) {
  return width * height * depth;
};
console.log(calculateVolume(5, 10, 2)); // 输出 100

示例 3：IIFE（立即执行函数表达式）

(function () {
  console.log("This is an IIFE!");
})();
// 输出 "This is an IIFE!"

4.3.6 总结

• 函数声明：适合定义通用的函数，会被提升，必须在定义之前调用。
• 函数表达式：适合作为回调函数或立即执行函数，不会被提升，灵活性更高。
• 选择依据：根据函数的用途和调用方式选择合适的定义方式。

通过理解函数声明和函数表达式的区别，你可以更好地组织代码，选择最适合的函数定义方式。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. 函数声明和函数表达式的提升行为有什么区别？
2. 在什么情况下应该使用函数表达式而不是函数声明？
3. IIFE 的主要用途是什么？如何定义 IIFE？