[!info] related notes

• 所属 MOC: ecmascript-moc, ES6 新特性 MOC
• 上位概念: JavaScript 函数总览
• 相关概念: this-keyword, call-apply-bind, arguments-object
• 面试相关: 箭头函数面试题

箭头函数

一句话定义

箭头函数是 ES6 引入的简洁函数写法，它没有自己的 this、arguments、prototype，适合回调和数组操作，但不适合对象方法、构造函数。

---

基本语法

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

// 箭头函数
const add = (a, b) => a + b;

场景	语法
单参数	x => x * 2 或 (x) => x * 2
多参数	(a, b) => a + b
无参数	() => "hi"
多行函数体	(a, b) => { return a + b; }
返回对象	() => ({ name: "Tom" })

---

箭头函数 vs 普通函数

特性	普通函数	箭头函数
this	运行时决定（谁调用）	定义时从外层继承
arguments	✅ 有	❌ 无（用剩余参数替代）
constructor	✅ 可 new	❌ 不能 new
prototype	✅ 有	❌ 无

---

this 的核心区别

普通函数：谁调用，this 就指向谁

const obj = {
  name: "Alice",
  normal() {
    console.log(this.name);
  }
};

obj.normal(); // Alice（this === obj）

箭头函数：继承外层作用域的 this

const obj = {
  name: "Alice",
  arrow: () => console.log(this.name)
};

obj.arrow(); // 通常不是 Alice（指向外层 this）

---

this 场景对比

场景一：定时器回调

function Timer() {
  this.count = 0;
  
  // 箭头函数：继承 Timer 的 this
  setInterval(() => {
    this.count++;
    console.log(this.count);
  }, 1000);
  
  // 普通函数：this 会丢失
  setInterval(function() {
    this.count++; // 报错或指向 window
  }, 1000);
}

场景二：数组方法

const nums = [1, 2, 3, 4];

const doubled = nums.map(x => x * 2); // [2, 4, 6, 8]
const evens = nums.filter(x => x % 2 === 0); // [2, 4]
const total = nums.reduce((sum, x) => sum + x, 0); // 10

场景三：对象方法（不适合）

const user = {
  name: "Tom",
  // 不推荐：this 不会指向 user
  sayHi: () => console.log(this.name)
};

// 推荐：普通方法
const user2 = {
  name: "Tom",
  sayHi() { console.log(this.name); }
};

---

返回对象的坑

// ❌ 错误：{} 被当成函数体
const getUser = () => { name: "Tom" };
getUser(); // undefined

// ✅ 正确：用括号包起来
const getUser = () => ({ name: "Tom" });
getUser(); // { name: "Tom" }

---

不能用箭头函数的场景

1. 对象方法 — this 不会指向对象
2. 构造函数 — 不能用 new
3. 需要 arguments 的场景 — 用剩余参数替代
4. 需要动态 this 的回调 — 某些库会改写 this

---

面试常考题

题 1

const obj = {
  name: "Tom",
  fn: () => console.log(this.name)
};

obj.fn();

答案：不是 "Tom"，因为箭头函数没有自己的 this。

---

题 2

const fn = () => ({ a: 1 });
console.log(fn());

答案：{ a: 1 }

---

题 3

const fn = () => { a: 1 };
console.log(fn());

答案：undefined（因为 {} 是函数体，不是对象）

---

实战建议

场景	推荐
数组 map/filter/reduce	箭头函数 ✅
短小回调	箭头函数 ✅
保持外层 this	箭头函数 ✅
对象方法	普通函数 ✅
构造函数	普通函数/class ✅
需要 arguments	普通函数 ✅

Related notes

• 前端工程化MOC
• 前端基础MOC
• CSS MOC
• ECMAScript MOC