ES6 箭头函数的 this 指向问题详解

当使用箭头函数时，'this' 指向是词法作用域，而不是函数被调用时的作用域。这意味着箭头函数内部的 'this' 指向是在声明函数时就确定的，而不是在函数被调用时确定的。

具体来说，箭头函数的 'this' 指向是它定义时所在的作用域中的 'this'，而不是它被调用时所在的作用域中的 'this'。因此，箭头函数内部的 'this' 指向通常是外部函数的 'this'，或者是全局对象（在浏览器环境中为 'window' 对象）。

举个例子，假设有一个对象 'person'，其中有一个方法 'sayHello'：

const person = {
  name: 'John',

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

如果我们使用普通函数来调用 'sayHello' 方法，那么在该方法内部，'this' 会指向 'person' 对象：

person.sayHello(); // 输出：Hello, my name is John

但是如果我们使用箭头函数来定义 'sayHello' 方法，那么在该方法内部，'this' 会指向 'person' 对象所在的作用域中的 'this'，也就是全局对象：

const person = {
  name: 'John',

  sayHello: () => {
    console.log(`Hello, my name is ${this.name}`);
  }
}

person.sayHello(); // 输出：Hello, my name is undefined

在上面的例子中，箭头函数内部的 'this' 指向全局对象，因此无法访问 'person' 对象的 'name' 属性，导致输出 'undefined'。