箭头函数中的 this 指向哪里？

推荐答案

在箭头函数中，this 指向的是定义时所在的作用域的 this 值，而不是调用时的上下文。换句话说，箭头函数没有自己的 this，它会继承外层函数或全局作用域的 this。

本题详细解读

1. 箭头函数的 this 行为

箭头函数的 this 是在定义时确定的，而不是在调用时确定的。这意味着箭头函数中的 this 会继承自它所在的词法作用域（即定义时的作用域）。

2. 与普通函数的区别

普通函数（非箭头函数）的 this 是在调用时确定的，具体取决于函数的调用方式（如作为方法调用、直接调用、通过 call/apply 调用等）。而箭头函数的 this 是固定的，不会因为调用方式的不同而改变。

3. 示例代码

// www.javascriptcn.com code example
const obj = {
  name: 'Alice',
  regularFunction: function() {
    console.log(this.name); // this 指向 obj
  },
  arrowFunction: () => {
    console.log(this.name); // this 指向全局对象（在浏览器中是 window）
  }
};

obj.regularFunction(); // 输出: Alice
obj.arrowFunction();   // 输出: undefined（假设在严格模式下，全局对象的 this 是 undefined）

在这个例子中，regularFunction 是一个普通函数，它的 this 指向调用它的对象 obj。而 arrowFunction 是一个箭头函数，它的 this 继承自定义时的作用域，即全局作用域，因此在浏览器中 this 指向 window 对象。

4. 适用场景

箭头函数的 this 行为使得它特别适合用于回调函数或需要保持 this 一致性的场景。例如，在事件处理函数或定时器中，使用箭头函数可以避免 this 指向错误的问题。

// www.javascriptcn.com code example
class Timer {
  constructor() {
    this.seconds = 0;
  }

  start() {
    setInterval(() => {
      this.seconds++;
      console.log(this.seconds);
    }, 1000);
  }
}

const timer = new Timer();
timer.start(); // 每秒输出递增的数字

在这个例子中，箭头函数确保了 this 始终指向 Timer 实例，而不是 setInterval 的上下文。