JavaScript 函数类型详解：函数声明、函数表达式、箭头函数

在 JavaScript 中，函数是构建逻辑的核心单元。本文将通过 定义对比、核心特性 和 使用场景 三个维度，全面解析以下三种函数类型的区别：

1. 函数声明（Function Declaration）
2. 函数表达式（Function Expression）
3. 箭头函数（Arrow Function）

---

一、定义与语法对比

1. 函数声明

定义：直接通过 function 关键字声明函数。
特点：函数名会被提升到作用域顶部，允许“先调用后定义”。

// 函数声明
function add(a, b) {
  return a + b;
}

2. 函数表达式

定义：将函数赋值给变量（通常为匿名函数）。
特点：不会提升函数体，需先定义后使用。

// 函数表达式
const add = function(a, b) {
  return a + b;
};

3. 箭头函数

定义：ES6 引入的简洁函数语法，用 => 定义。
特点：无独立 this，适合简化回调函数。

// 箭头函数
const add = (a, b) => a + b;

---

二、核心特性对比

特性	函数声明	函数表达式	箭头函数
变量提升	✔️ 整个函数被提升	❌ 仅变量声明提升（值为 undefined）	❌ 无提升
作用域	函数作用域或全局作用域	块级作用域（若用 const/let）	块级作用域（若用 const/let）
this 绑定	动态绑定（由调用方式决定）	动态绑定	继承外层 this（词法作用域）
构造函数能力	✔️ 可用 new 创建实例	✔️ 可用 new 创建实例	❌ 不可用（无 prototype）
arguments 对象	✔️ 存在	✔️ 存在	❌ 不存在（需用剩余参数 ...args）
匿名性	❌ 必须命名	✔️ 通常匿名（可命名）	✔️ 匿名
语法简洁性	标准语法	标准语法	可省略 return 和 {}

---

三、典型使用场景

1. 函数声明

• 场景：定义全局工具函数、模块级功能。
• 示例：可提前调用的工具函数。

console.log(sum(1, 2)); // 3（函数提升生效）
function sum(a, b) {
  return a + b;
}

2. 函数表达式

• 场景：需要动态控制函数行为的场景、闭包封装。
• 示例：条件式定义函数。

let calculate;
if (useAdd) {
  calculate = function(a, b) { return a + b; };
} else {
  calculate = function(a, b) { return a - b; };
}

3. 箭头函数

• 场景：简短回调、需要继承外层 this 的场景（如 React/Vue 组件）。
• 示例：数组方法中的回调。

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]

---

四、关键细节详解

1. this 绑定差异

• 函数声明/表达式：this 由调用方式决定。

const obj = {
  value: 10,
  getValue: function() {
    console.log(this.value); // 10（指向 obj）
  }
};

• 箭头函数：继承定义时的外层 this。

const obj = {
  value: 10,
  getValue: () => {
    console.log(this.value); // undefined（指向全局）
  }
};

2. 构造函数能力

• 函数声明/表达式：可创建实例。

function Person(name) {
  this.name = name;
}
const alice = new Person('Alice');

• 箭头函数：不可作为构造函数。

const Person = (name) => { this.name = name };
const alice = new Person('Alice'); // TypeError

3. 语法简化技巧

• 箭头函数：单行返回可省略 {} 和 return。

// 等效写法
const greet = name => `Hello, ${name}`;
const greet = (name) => { return `Hello, ${name}`; };

---

五、如何选择？

• 需要 this 动态绑定 → 函数声明/表达式
（如对象方法、事件处理器）
• 需要继承外层 this → 箭头函数
（如 React 类组件中的回调）
• 需要构造函数 → 函数声明/表达式
（如定义类）
• 需要简洁语法 → 箭头函数
（如数组方法、Promise 链）

---

六、总结

函数类型	核心优势	注意事项
函数声明	提升特性，适合工具函数	避免在块级作用域内使用（如 if）
函数表达式	灵活赋值，适合动态逻辑	注意 const 不可重新赋值
箭头函数	简洁安全，适合回调函数	避免用于对象方法和构造函数