箭头函数和普通函数的区别

箭头函数和普通函数（function 声明的函数）在 JavaScript 中有几个关键区别，这些区别会直接影响它们的使用场景：

1. 语法不同

普通函数用 function 关键字声明：

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

箭头函数是 => 语法（像个箭头），更简洁：

// 箭头函数（简化版）
const add = (a, b) => a + b;

如果函数体有多行，需要用 {} 包裹并显式写 return：

const add = (a, b) => {console.log("计算中...");return a + b;
};

2. this 指向不同（最核心区别）

这是两者最大的不同，直接影响函数的行为：

• 普通函数：this 指向调用它的对象（谁调用，this 就是谁），没有调用者时指向全局对象（浏览器中是 window，Node 中是 global）。

  const obj = {name: "张三",sayHi: function() {console.log(this.name); // this指向obj，输出"张三"}
  };
  obj.sayHi();
  

• 箭头函数：没有自己的 this，它的 this 是继承自外层作用域的 this（定义时就固定了，不会变）。

  const obj = {name: "张三",sayHi: () => {console.log(this.name); // this继承自外层（这里是window），输出undefined}
  };
  obj.sayHi();
  

3. 不能用作构造函数

• 普通函数：可以用 new 关键字创建实例（构造函数）。

  function Person(name) {this.name = name;
  }
  const person = new Person("张三"); // 合法
  

• 箭头函数：不能用 new 调用，会报错。

  const Person = (name) => { this.name = name; };
  const person = new Person("张三"); // 报错：Person is not a constructor
  

4. 没有 arguments 对象

• 普通函数：内部有 arguments 对象，保存了传入的所有参数。

  function sum() {console.log(arguments); // 输出所有传入的参数，如[1,2,3]return Array.from(arguments).reduce((a,b) => a+b);
  }
  sum(1,2,3); // 6
  

• 箭头函数：没有 arguments，但可以用剩余参数 ...args 代替。

  const sum = (...args) => {console.log(args); // 输出所有传入的参数，如[1,2,3]return args.reduce((a,b) => a+b);
  };
  sum(1,2,3); // 6
  

5. 没有 prototype 属性

箭头函数没有原型对象，而普通函数有：

function fn() {}
console.log(fn.prototype); // 有原型对象（Object）const fn = () => {};
console.log(fn.prototype); // undefined

总结：什么时候用哪种函数？

• 箭头函数：适合简单逻辑、不需要自己的 this（比如回调函数、数组方法中的函数），语法更简洁。

  // 数组遍历（常用箭头函数）
  const arr = [1,2,3];
  arr.map(item => item * 2); // [2,4,6]
  

• 普通函数：需要 this 指向调用者（比如对象方法、构造函数）、需要 arguments 或 prototype 时。

  // 对象方法（用普通函数，确保this指向对象）
  const calculator = {num: 10,add: function(n) {return this.num + n; // this指向calculator}
  };
  

记住：箭头函数的 this 是 “静态” 的（定义时确定），普通函数的 this 是 “动态” 的（调用时确定），这是最核心的区别。