【箭头函数与普通函数的区别】在 JavaScript 中，函数是编程中非常基础的组成部分。随着 ES6 的推出，箭头函数（Arrow Function）作为一种新的函数定义方式，逐渐被广泛使用。虽然箭头函数和普通函数在某些方面相似，但在实际使用中有很多关键区别。以下是对两者主要区别的总结。
一、语法差异
| 特性 | 普通函数 | 箭头函数 |
| 定义方式 | `function` 关键字 | `=>` 运算符 |
| 参数列表 | 可以省略括号（单参数时） | 必须用括号包裹参数（除非只有一个参数且不需要括号） |
| 函数体 | 可以使用大括号 `{}` 包裹多行语句 | 如果只有一行表达式，可以省略大括号和 `return` |
示例：
```javascript
// 普通函数
function add(a, b) {
return a + b;
}
// 箭头函数
const add = (a, b) => a + b;
```
二、`this` 的绑定方式不同
| 特性 | 普通函数 | 箭头函数 |
| `this` 绑定 | 动态绑定，取决于调用方式 | 静态绑定，继承自外层作用域的 `this` |
| 使用场景 | 适用于需要动态绑定 `this` 的情况 | 适用于不需要改变 `this` 上下文的场景 |
示例：
```javascript
const obj = {
name: "Alice",
greet: function() {
setTimeout(function() {
console.log("Hello, " + this.name); // this 指向 window 或 undefined（严格模式）
}, 1000);
}
};
obj.greet(); // 输出可能是 "Hello, undefined"
// 箭头函数版本
const obj = {
name: "Alice",
greet: function() {
setTimeout(() => {
console.log("Hello, " + this.name); // this 指向 obj
}, 1000);
}
};
obj.greet(); // 输出 "Hello, Alice"
```
三、不能作为构造函数
| 特性 | 普通函数 | 箭头函数 |
| 是否能用 `new` 调用 | 可以 | 不可以 |
示例：
```javascript
function Person(name) {
this.name = name;
}
const p = new Person("Bob"); // 正确
const Person = (name) => {
this.name = name;
};
const p = new Person("Bob"); // 报错：Person is not a constructor
```
四、没有 `arguments` 对象
| 特性 | 普通函数 | 箭头函数 |
| 是否有 `arguments` 对象 | 有 | 没有，但可以通过 `...args` 获取参数 |
示例：
```javascript
function sum() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
const sum = (...args) => {
return args.reduce((acc, num) => acc + num, 0);
};
```
五、不支持 `yield` 关键字
| 特性 | 普通函数 | 箭头函数 |
| 是否支持 `yield` | 支持（用于生成器函数） | 不支持 |
六、函数名属性
| 特性 | 普通函数 | 箭头函数 |
| 是否有 `name` 属性 | 有，显示函数名 | 通常为 `anonymous`，除非显式命名 |
示例：
```javascript
function foo() {}
console.log(foo.name); // 输出 "foo"
const bar = () => {};
console.log(bar.name); // 输出 "bar"（如果显式命名）
const baz = function bar() {};
console.log(baz.name); // 输出 "bar"
```
总结
| 特性 | 普通函数 | 箭头函数 |
| 语法 | 使用 `function` | 使用 `=>` |
| `this` 绑定 | 动态绑定 | 静态绑定 |
| 构造函数 | 可以 | 不可以 |
| `arguments` 对象 | 有 | 没有（可用 `...args` 替代） |
| `yield` 支持 | 支持 | 不支持 |
| 函数名 | 有明确名称 | 通常为 `anonymous` |
在实际开发中，选择使用哪种函数形式应根据具体需求而定。箭头函数适合在不需要动态绑定 `this` 或希望代码更简洁的场景中使用；而普通函数则更适合需要构造对象或使用 `arguments` 的情况。合理使用这两种函数形式，能够提升代码的可读性和可维护性。
