快速理解箭头函数

箭头函数看似复杂，只要抓住它和传统函数的核心区别，就能快速掌握。

第一步：先记住箭头函数的「简化写法」

场景	传统函数	箭头函数	关键简化点
无参数	function() { return 100 }	() => 100	省掉 function、return、大括号
单个参数	function(n) { return n * 2 }	n => n * 2	省掉参数括号、function等
多个参数	function(a, b) { return a + b }	(a, b) => a + b	多参数必须保留括号
函数体有多行代码	function(n) { let m = n * 2; return m }	(n) => { let m = n * 2; return m }	多行代码必须保留大括号和 return

第二步：重点理解「this 指向」（最核心的区别）

箭头函数最难的部分是 this，但记住一句话就行：箭头函数没有自己的 this，它的 this 等于外层代码块的 this（也就是定义时所在环境的 this）

// 传统函数：this 指向调用者
const obj1 = {
  name: "传统函数",
  say: function() {
    // 这里的 this 指向 obj1（因为是 obj1 调用 say）
    setTimeout(function() {
      // 传统函数的 this 指向 window（浏览器环境），所以拿不到 name
      console.log(this.name); // 输出：undefined
    }, 100);
  }
};

// 箭头函数：this 继承外层的 this
const obj2 = {
  name: "箭头函数",
  say: function() {
    // 这里的 this 指向 obj2
    setTimeout(() => {
      // 箭头函数的 this 继承自外层的 this（即 obj2），所以能拿到 name
      console.log(this.name); // 输出：箭头函数
    }, 100);
  }
};

第三步：记住箭头函数的「不能做什么」（避坑）

1. 不能当构造函数：不能用 new 调用（比如 new () => {} 会报错），因为它没有 this 和 prototype。
2. 没有 arguments 对象：如果需要获取所有参数，用「剩余参数」代替：(...args) => args[0]。
3. 不能用 yield：不能作为生成器函数。

总结：什么时候用箭头函数？

• 写简单的回调函数（如 map、filter、setTimeout）：简化代码 + 解决 this 问题。
• 写简短的工具函数（如 (a, b) => a * b）：代码更简洁。

什么时候不用？

• 对象的方法（比如 obj.say = () => {} 会导致 this 不对）。
• 需要 this 动态变化的场景（比如事件监听函数）。