箭头函数与普通函数的核心区别在于this指向、arguments对象和构造函数能力。1. 箭头函数没有自己的this，继承外层作用域的this，适合回调函数；2. 普通函数的this根据调用方式动态绑定；3. 箭头函数无arguments对象，但可用剩余参数替代；4. 箭头函数不能作为构造函数使用，因缺少[[Construct]]方法和prototype属性。
JavaScript中的箭头函数和普通函数，从表面看都是定义函数的方式，但它们在几个关键点上有着本质的区别，最核心的差异体现在它们如何处理
this上下文、是否拥有自己的
arguments对象以及能否被用作构造函数。简单来说，箭头函数设计得更简洁，尤其适合作为回调函数，但它也因此放弃了一些传统函数的“能力”。
箭头函数和普通函数在行为上的主要差异，我通常会从
this的绑定机制开始讲起，因为这是最容易让人“踩坑”的地方。普通函数在执行时，
this的指向是动态的，取决于它是如何被调用的——是作为对象的方法、独立函数、构造函数，还是通过
call/
apply/
bind。而箭头函数则完全不同，它没有自己的
this，而是捕获其定义时的外部作用域的
this值，并永久继承这个值。这就意味着，一旦箭头函数被定义，它的
this就固定了，不会因为调用方式的改变而改变。
举个例子，在一个对象的方法中使用
setTimeout，如果内部的回调函数是普通函数，
this就会指向
window（在非严格模式下），因为
setTimeout的回调是以普通函数形式调用的。但如果使用箭头函数，
this会保持指向外部对象，这极大简化了代码，避免了需要
var self = this或者
bind的麻烦。
// 普通函数中的this
const obj1 = {
name: '普通函数',
greet: function() {
console.log(`Hello, I'm ${this.name}`); // this指向obj1
setTimeout(function() {
console.log(`Still ${this.name}?`); // this指向window (或undefined在严格模式)
}, 100);
}
};
obj1.greet(); // 输出: Hello, I'm 普通函数; Still undefined? (或Still )
// 箭头函数中的this
const obj2 = {
name: '箭头函数',
greet: function() {
console.log(`Hello, I'm ${this.name}`); // this指向obj2
setTimeout(() => {
console.log(`Still ${this.name}?`); // this捕获外部greet函数的this，指向obj2
}, 100);
}
};
obj2.greet(); // 输出: Hello, I'm 箭头函数; Still 箭头函数?我能用箭头函数创建构造函数吗？
arguments对象又有什么不同？
立即学习“Java免费学习笔记（深入）”；
答案是，你不能用箭头函数作为构造函数。尝试用
new关键字调用一个箭头函数会抛出错误，因为箭头函数没有
[[Construct]]内部方法，也没有
prototype属性。这其实也很好理解，既然箭头函数连自己的
this都没有，又怎么能用来构造新的实例并绑定
this呢？它从设计之初就不是为了这个目的。
至于
arguments对象，这也是一个显著的区别。普通函数内部有一个类数组的
arguments对象，它包含了函数被调用时传入的所有参数。这在处理不定数量参数时非常有用，尽管ES6的剩余参数（rest parameters）现在是更推荐的做法。然而，箭头函数并没有自己的
arguments对象。如果你在箭头函数内部访问
arguments，它会向上查找，引用其最近的普通函数或全局作用域的
arguments对象。这在某些情况下可能会导致意想不到的行为。
为了弥补箭头函数没有
arguments的不足，并且提供更清晰的参数处理方式，ES6引入了剩余参数（
...rest）。这是一个更好的替代方案，因为它返回一个真正的数组，你可以直接使用数组方法。
// 普通函数的arguments
function regularFunc() {
console.log(arguments); // [1, 2, 3]
}
regularFunc(1, 2, 3);
// 箭头函数的arguments
const arrowFunc = (...args) => { // 使用剩余参数替代arguments
console.log(args); // [4, 5, 6]
// console.log(arguments); // ReferenceError: arguments is not defined (在全局作用域下)
// 如果在一个普通函数内部定义，则会引用外部普通函数的arguments
};
arrowFunc(4, 5, 6);什么时候应该选择箭头函数，什么时候又该坚持使用普通函数？
这没有绝对的答案，更多是基于场景和个人习惯的权衡。
我会倾向于在以下情况使用箭头函数：
-
回调函数： 这是箭头函数最常见的用例。例如，在
Array.prototype.map()
,filter()
,reduce()
,forEach()
等方法中，或者在setTimeout()
,Promise
链中，箭头函数能简洁地保持this
上下文，避免了bind
或that = this
的写法，代码会更干净。 -
短小的单行函数： 箭头函数简洁的语法，尤其是隐式返回（当函数体只有一条表达式时，可以省略
return
关键字和大括号），让它非常适合定义简单的操作。 -
不关心
this
或需要固定this
的场景： 比如模块顶层的辅助函数，或者需要确保this
指向外部上下文的事件处理器。
而以下情况，我通常会坚持使用普通函数：
-
对象方法： 当函数作为对象的方法时，如果需要访问对象的其他属性（即
this
应该指向该对象），使用普通函数更合适。如果使用箭头函数，this
会指向定义该对象的上下文（通常是window
或undefined
），这不是我们想要的。 -
构造函数： 显然，箭头函数不能作为构造函数。如果你需要创建可复用的对象实例，普通函数（或ES6的
class
语法糖）是唯一的选择。 -
需要
arguments
对象的函数： 尽管现在有更好的剩余参数，但在一些老旧代码或特定场景下，如果确实需要直接操作arguments
对象，普通函数是必需的。 -
事件处理器（有时）： 对于DOM事件监听器，如果事件处理函数需要
this
指向触发事件的元素，那么普通函数是首选。虽然可以通过event.currentTarget
来获取元素，但直接使用this
更直观。 -
动态
this
上下文的函数： 比如一些库或框架中，函数被设计成通过调用方式来动态决定this
的指向，这时普通函数是必须的。
最终，选择哪种函数形式，更多是基于对它们行为差异的理解。没有哪一种是“更好”的，只有“更适合”特定场景的。理解这些区别，能帮助你写出更健壮、更易读的JavaScript代码。
