4.1 箭头函数与 `this` 绑定

箭头函数（Arrow Functions）是 ES6 引入的一种简洁的函数语法，它不仅简化了函数的书写方式，还改变了 this 的绑定规则。本节将详细介绍箭头函数的语法特性及其对 this 绑定的影响。

4.1.1 箭头函数的基本语法

箭头函数使用 => 定义，语法比普通函数更简洁。

1. 基本形式

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

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

2. 单参数函数
如果只有一个参数，可以省略括号：

const square = x => x * x;

3. 无参数函数
如果没有参数，必须保留空括号：

const greet = () => console.log("Hello!");

4. 多行函数体
如果函数体有多行，需要用 {} 包裹，并显式返回结果：

const sum = (a, b) => {
  let result = a + b;
  return result;
};

4.1.2 箭头函数的特点

1. 没有自己的 this
箭头函数没有自己的 this，它会捕获定义时所在上下文的 this 值。

2. 不能作为构造函数
箭头函数不能使用 new 调用，否则会抛出错误：

const Person = () => {};
let p = new Person(); // 报错：TypeError

3. 没有 arguments 对象
箭头函数没有自己的 arguments 对象，但可以通过剩余参数（...args）获取参数列表：

const showArgs = (...args) => console.log(args);
showArgs(1, 2, 3); // 输出 [1, 2, 3]

4.1.3 箭头函数与 `this` 绑定

this 是 JavaScript 中的一个关键字，表示当前执行上下文。普通函数和箭头函数对 this 的处理方式不同。

1. 普通函数的 this
普通函数的 this 取决于调用方式：

直接调用时，this 指向全局对象（浏览器中为 window，Node.js 中为 global）。
作为对象方法调用时，this 指向调用该方法的对象。
使用 new 调用时，this 指向新创建的对象。

示例

const obj = {
  name: "Alice",
  greet: function () {
    console.log(`Hello, ${this.name}!`);
  },
};
obj.greet(); // 输出 "Hello, Alice!"

2. 箭头函数的 this
箭头函数的 this 是词法作用域的 this，即定义时所在上下文的 this，不会随调用方式改变。

示例

const obj = {
  name: "Alice",
  greet: function () {
    setTimeout(() => {
      console.log(`Hello, ${this.name}!`);
    }, 1000);
  },
};
obj.greet(); // 输出 "Hello, Alice!"

在上面的例子中，setTimeout 中的箭头函数捕获了 greet 方法的 this，因此 this.name 正确指向 obj.name。

4.1.4 箭头函数的应用场景

1. 回调函数
箭头函数适合用于回调函数，尤其是需要保留 this 的场景：

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // 输出 [2, 4, 6]

2. 简化代码
箭头函数可以简化代码，尤其是在函数体较短时：

const isEven = num => num % 2 === 0;
console.log(isEven(4)); // 输出 true

3. 避免 this 绑定问题
在需要保留 this 的场景中，箭头函数可以避免使用 bind、call 或 apply：

class Counter {
  constructor() {
    this.count = 0;
  }
  start() {
    setInterval(() => {
      this.count++;
      console.log(this.count);
    }, 1000);
  }
}
const counter = new Counter();
counter.start(); // 每秒输出递增的数字

4.1.5 总结

箭头函数：语法简洁，适合用于回调函数和简化代码。
this 绑定：箭头函数没有自己的 this，会捕获定义时所在上下文的 this。
适用场景：回调函数、简化代码、避免 this 绑定问题。

通过掌握箭头函数及其 this 绑定规则，你可以编写更简洁、更易维护的代码。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

箭头函数和普通函数的主要区别是什么？
为什么箭头函数不能作为构造函数？
在什么情况下应该使用箭头函数而不是普通函数？

#前端开发分享于 2025-03-14

上一篇：3.4 模板字符串与标签模下一篇：4.2 默认参数、剩余参数（`...args`）

4.1 箭头函数与 `this` 绑定