JavaScript篇：普通函数与箭头函数的本质区别与使用场景

本文链接：https://blog.csdn.net/qq_48652579/article/details/147506575

🎓 作者简介：前端领域优质创作者

🚪 资源导航： 传送门=>

🎬 个人主页： 江城开朗的豌豆

🔥 个人专栏：《VUE》 📘《JavaScript》 📚

🌐 个人网站:   江城开朗的豌豆 🌍

📧 个人邮箱:   YANG_TAO_WEB@163.com 📩

💬 个人微信: y_t_t_t_ 📱

📌  座右铭:   生活就像心电图，一帆风顺就证明你挂了。💔

👥  QQ群: 906392632 (前端技术交流群) 💬

🌟 欢迎来到我的个人主页！这里是我分享技术心得和生活感悟的地方。希望你能在这里找到有价值的内容，也欢迎随时联系我交流讨论！🚀

作为前端开发者，我们每天都在和各种函数打交道。ES6引入的箭头函数让JavaScript的函数世界更加丰富多彩，但你真的了解它们之间的区别吗？今天，我就来为大家详细剖析普通函数与箭头函数的那些事儿。

从一段代码说起

先来看一个日常开发中常见的场景：

// 普通函数
function greet(name) {
  return `Hello, ${name}!`;
}

// 箭头函数
const greetArrow = name => `Hello, ${name}!`;

看起来箭头函数更简洁，但它们的区别远不止语法上的简化。让我们深入探究它们的本质差异。

核心区别一览

1. this绑定机制（最重要的区别！）

普通函数的this是动态绑定的，取决于函数被调用的方式：

const person = {
  name: '我',
  sayName: function() {
    console.log(this.name); // 正确指向person对象
  }
};

person.sayName(); // 输出"我"

箭头函数的this是词法作用域绑定，继承自外层作用域：

const person = {
  name: '我',
  sayName: () => {
    console.log(this.name); // 指向window/undefined(严格模式)
  }
};

person.sayName(); // 输出undefined

这个特性让箭头函数特别适合用在回调函数中：

// 使用普通函数需要额外绑定this
const obj = {
  values: [1, 2, 3],
  printValues: function() {
    this.values.forEach(function(item) {
      console.log(item, this); // 这里的this不是obj了！
    }.bind(this));
  }
};

// 使用箭头函数则自动绑定
const objArrow = {
  values: [1, 2, 3],
  printValues: function() {
    this.values.forEach(item => {
      console.log(item, this); // 正确指向objArrow
    });
  }
};

2. 构造函数能力

普通函数可以作为构造函数使用：

function Person(name) {
  this.name = name;
}
const me = new Person('我');
console.log(me.name); // "我"

箭头函数不能作为构造函数：

const PersonArrow = (name) => {
  this.name = name; // 报错！
};
// const me = new PersonArrow('我'); // TypeError

3. arguments对象

普通函数可以访问arguments对象：

function sum() {
  let total = 0;
  for(let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}
console.log(sum(1, 2, 3)); // 6

箭头函数没有自己的arguments对象：

const sumArrow = () => {
  console.log(arguments); // 报错！
};
// sumArrow(1, 2, 3); // ReferenceError

不过，箭头函数可以使用剩余参数语法：

const sumArrow = (...args) => {
  return args.reduce((a, b) => a + b, 0);
};
console.log(sumArrow(1, 2, 3)); // 6

4. 原型属性

普通函数有prototype属性：

function Foo() {}
console.log(Foo.prototype); // 存在

箭头函数没有prototype属性：

const Bar = () => {};
console.log(Bar.prototype); // undefined

语法差异

除了功能上的区别，语法上也有明显不同：

// 普通函数
function add(a, b) {
  return a + b;
}

// 箭头函数多种写法
const addArrow1 = (a, b) => {
  return a + b;
};

// 单行简写
const addArrow2 = (a, b) => a + b;

// 单个参数可省略括号
const square = x => x * x;

// 无参数需要括号
const sayHi = () => console.log('Hi!');

使用场景建议

根据我的开发经验，以下是一些最佳实践：

使用箭头函数的场景：
- 回调函数（尤其是需要保持this一致的场景）
- 简单的单行函数
- 函数式编程（map/filter/reduce等）
- 需要词法作用域绑定的情况
使用普通函数的场景：
- 需要作为构造函数
- 需要访问arguments对象
- 对象方法（除非明确需要词法作用域）
- 需要函数提升的场景
- 需要动态this的场景（如事件处理函数）

实际案例对比

让我们看一个更复杂的实际案例：

// 使用普通函数
function Timer() {
  this.seconds = 0;
  setInterval(function() {
    this.seconds++; // 这里的this指向window！
    console.log(this.seconds);
  }, 1000);
}
// const timer = new Timer(); // 不会按预期工作

// 修复方案1：保存this引用
function TimerFixed1() {
  this.seconds = 0;
  const self = this;
  setInterval(function() {
    self.seconds++;
    console.log(self.seconds);
  }, 1000);
}

// 修复方案2：使用bind
function TimerFixed2() {
  this.seconds = 0;
  setInterval(function() {
    this.seconds++;
    console.log(this.seconds);
  }.bind(this), 1000);
}

// 最佳方案：使用箭头函数
function TimerArrow() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++; // 正确绑定到TimerArrow实例
    console.log(this.seconds);
  }, 1000);
}

性能考量

虽然现代JavaScript引擎已经对两种函数都做了很好的优化，但在极端性能敏感的场景下：

普通函数在作为构造函数时性能更好
箭头函数在作为回调时可能更高效（因为不需要处理this绑定）

不过，在大多数应用中，这种性能差异可以忽略不计，应该以代码清晰度和维护性为首要考虑。

常见误区

在对象方法中使用箭头函数：

const counter = {
  count: 0,
  increment: () => {
    this.count++; // 错误！this指向外层作用域
  }
};

在原型方法中使用箭头函数：

function Person(name) {
  this.name = name;
}

// 错误用法
Person.prototype.sayName = () => {
  console.log(this.name); // 不会按预期工作
};

在需要动态this的事件处理中使用箭头函数：

button.addEventListener('click', () => {
  console.log(this); // 指向外层作用域，不是button元素
});

// 应该使用普通函数
button.addEventListener('click', function() {
  console.log(this); // 指向button元素
});