JavaScript箭头函数与普通函数深度对比：5个核心区别与实战应用场景

JavaScript的箭头函数和普通函数有什么区别？

在ES6中，箭头函数（Arrow Function）的引入极大地简化了JavaScript的代码书写。虽然箭头函数在语法上更加简洁，但它与传统的普通函数在底层机制和运行行为上存在着本质的区别。理解这些区别对于编写高质量、无Bug的JavaScript代码至关重要。

以下是箭头函数与普通函数的核心区别：

1. this的绑定机制（最核心区别）

普通函数的this是动态绑定的，其值取决于调用的方式（作为对象方法调用、直接调用、call/apply/bind调用等）。而箭头函数没有自己的this，它在定义时会捕获其所在上下文（词法作用域）的this值作为自己的this，并且这个this在箭头函数的整个生命周期内都不会改变，即使使用call、apply或bind也无法改变它的指向。

const obj = {
  name: 'JavaScript',
  regularFunc: function() {
    console.log(this.name); // 输出 'JavaScript'，this指向调用者obj
  },
  arrowFunc: () => {
    console.log(this.name); // 输出 undefined，this继承自外层作用域（通常是window/global）
  }
};

obj.regularFunc();
obj.arrowFunc();

2. arguments对象

普通函数内部有一个类数组对象arguments，包含了传递给函数的所有参数。但箭头函数没有自己的arguments对象。如果在箭头函数中访问arguments，它只会获取外层普通函数的arguments，如果外层也没有，则会抛出引用错误。在箭头函数中，通常使用剩余参数（Rest Parameters）来代替。

function regularFunc() {
  console.log(arguments); // 输出类数组对象 Arguments(2) ['a', 'b']
}

const arrowFunc = () => {
  console.log(arguments); // 报错：ReferenceError 或 继承外层作用域的arguments
};

const arrowFuncWithRest = (...args) => {
  console.log(args); // 输出真实数组 ['a', 'b']
};

regularFunc('a', 'b');
arrowFuncWithRest('a', 'b');

3. 构造函数与new操作符

普通函数可以作为构造函数使用，通过new关键字来实例化对象。而箭头函数没有[[Construct]]内部方法，因此不能使用new关键字调用，否则会抛出类型错误。

function RegularFunc() {
  this.count = 1;
}

const ArrowFunc = () => {
  this.count = 1;
};

const r = new RegularFunc(); // 正常执行，创建一个实例对象
const a = new ArrowFunc();   // 报错：TypeError: ArrowFunc is not a constructor

4. prototype属性

由于普通函数可以作为构造函数，因此每个普通函数都有一个prototype原型属性。而箭头函数不能作为构造函数，所以它没有prototype属性。

function regularFunc() {}
console.log(regularFunc.prototype); // 输出 { constructor: f }

const arrowFunc = () => {};
console.log(arrowFunc.prototype); // 输出 undefined

5. yield关键字与Generator函数

普通函数可以通过function*声明为Generator函数，在函数体内使用yield关键字来暂停和恢复执行。箭头函数不能用作Generator函数，在其函数体内使用yield关键字会抛出语法错误。

6. 重复的命名参数

在非严格模式下，普通函数允许参数名重复（例如function f(a, a) {}是合法的）。但在严格模式下，普通函数不允许参数名重复。而箭头函数无论是否处于严格模式下，都不允许出现重复的命名参数。

总结与最佳实践

• 适用箭头函数的场景： 需要词法this的场景（如回调函数、数组遍历方法map/filter/reduce中的回调、Promise链式调用、React函数组件中的事件处理等），箭头函数能完美避免this指向丢失的问题。

• 适用普通函数的场景： 需要作为构造函数使用、需要动态改变this指向（使用call/apply/bind）、需要使用arguments对象、需要定义Generator函数，或者对象字面量中的方法定义（避免方法内的回调导致外层this被错误绑定）。

掌握这两者的区别，能够让你在开发中游刃有余地选择合适的函数形式。如果你想了解更多关于JavaScript高级语法的在线交互示例，可以访问 www.ipipp.com 获取更多实践Demo。

JavaScript箭头函数普通函数this绑定构造函数ES6语法