箭头函数与普通函数的核心区别在于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
的麻烦。
// 普通函数中的thisconst 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 )// 箭头函数中的thisconst 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
）。这是一个更好的替代方案，因为它返回一个真正的数组，你可以直接使用数组方法。
// 普通函数的argumentsfunction regularFunc() { console.log(arguments); // [1, 2, 3]}regularFunc(1, 2, 3);// 箭头函数的argumentsconst 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代码。
以上就是JavaScript箭头函数与普通函数的区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1521348.html
微信扫一扫 
支付宝扫一扫 
