在 JavaScript 中，函数是构建逻辑的核心单元。本文将通过 定义对比、核心特性 和 使用场景 三个维度，全面解析以下三种函数类型的区别：
- 函数声明（Function Declaration）
- 函数表达式（Function Expression）
- 箭头函数（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 不可重新赋值 |
| 箭头函数 | 简洁安全，适合回调函数 | 避免用于对象方法和构造函数 |
