JavaScript箭头函数与普通函数的区别-js教程-PHP中文网

JavaScript箭头函数与普通函数的区别

幻影之瞳

发布： 2025-09-21 10:08:01

原创

841人浏览过

箭头函数与普通函数的核心区别在于this指向、arguments对象和构造函数能力。1. 箭头函数没有自己的this，继承外层作用域的this，适合回调函数；2. 普通函数的this根据调用方式动态绑定；3. 箭头函数无arguments对象，但可用剩余参数替代；4. 箭头函数不能作为构造函数使用，因缺少[[Construct]]方法和prototype属性。

javascript箭头函数与普通函数的区别

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

登录后复制

对象。这在某些情况下可能会导致意想不到的行为。

Tavus

Tavus是一个AI视频生成平台，可以自动将你的视频个性化给每个观众。

128

查看详情

为了弥补箭头函数没有

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
```
登录后复制
的指向，这时普通函数是必须的。