JavaScript函数与箭头函数区别

在JavaScript的世界里，函数是构建逻辑的基石，而ES6引入的箭头函数则像一把更轻便的瑞士军刀，让代码书写变得高效且优雅。但这两者并非完全等同，理解它们的差异能帮助开发者在不同场景下做出更精准的选择。

1、语法：从冗长到简洁的进化

传统函数声明需要完整的function关键字、参数列表和函数体，例如：

function greet(name) {
  return `Hello, ${name}!`;
}

而箭头函数用=>符号大幅简化了这一过程，相同功能可写作：

const greet = name => `Hello, ${name}!`;

箭头函数在单参数时甚至能省略括号，单行表达式可隐式返回（无需return关键字），如同速记笔记般精简。

2、this绑定：谁在掌控上下文？

传统函数的this像变色龙，它的值取决于调用方式。例如在对象方法中：

const obj = {
  value: 10,
  getValue: function() {
    console.log(this.value); // 输出10
  }
};

但若将方法赋值给变量再调用，this会丢失原指向（如变为window或undefined）。箭头函数则像固定了指南针的this，始终继承定义时的上下文：

const obj = {
  value: 10,
  getValue: () => {
    console.log(this.value); // 输出undefined（继承自外层作用域）
  }
};

这种特性让箭头函数特别适合回调场景（如setTimeout或事件监听器），避免传统函数因this变化导致的额外bind操作。

3、构造函数与原型：能否成为蓝图？

传统函数可充当构造函数，通过new关键字实例化对象：

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

const john = new Person('John');

箭头函数则像没有模具的陶土，无法通过new调用，也不具备prototype属性。若强行尝试会抛出错误，这限制了它在面向对象编程中的使用。

4、arguments与参数处理：灵活性的取舍

传统函数内置了arguments对象，能动态访问所有传入参数，类似一个万能收纳盒：

function sum() {
  let total = 0;
  for (let arg of arguments) total += arg;
  return total;
}

箭头函数则需依赖剩余参数（...args）实现类似功能，更符合现代JavaScript的显式设计哲学。这种差异使得传统函数在参数数量不确定时稍占优势。

适用场景：工具没有好坏，只有合不合适

• 箭头函数的理想场景：

需要保持this稳定的回调函数（如数组方法map/filter）
简单的单行表达式（如条件判断或数学运算）
函数式编程中的纯函数（无副作用）

• 传统函数的用武之地：

需要动态this的方法（如对象方法）
构造函数或需要prototype扩展的场景
依赖arguments对象的复杂参数处理

理解这些差异后，开发者便能像选择画笔一样，根据线条粗细（功能需求）挑选传统函数（毛笔）或箭头函数（马克笔），让代码既高效又易于维护。