箭头函数的this值继承于哪里

箭头函数没有自己的 this 绑定。它们从词法上继承 this 值，这意味着它们从周围的（封闭的）函数或全局作用域继承 this。

换句话说，箭头函数中的 this 指的是定义箭头函数时，在其外部函数中 this 的值。如果箭头函数不在任何函数内部，那么 this 将引用全局对象（在浏览器中是 window，在 Node.js 中是 global）。

让我们用几个例子来说明：

function outerFunction() {
  this.name = "Outer";

  const arrowFunction = () => {
    console.log(this.name); // 输出 "Outer"
  };

  arrowFunction();
}

const outer = new outerFunction();


const globalThis = this; // 全局 this

const anotherArrowFunction = () => {
  console.log(this === globalThis); // 输出 true
};

anotherArrowFunction();


function regularFunction() {
  this.name = "Regular";

  const arrowFunctionInsideRegular = () => {
    console.log(this.name); // 输出 "Regular"
  };

  arrowFunctionInsideRegular();
}

regularFunction();


const obj = {
  name: "Object",
  method: function() {
    const arrowFunctionInsideMethod = () => {
      console.log(this.name); // 输出 "Object"
    };

    arrowFunctionInsideMethod();
  }
};

obj.method();

在这些例子中，箭头函数内部的 this 总是指向定义箭头函数时，外部作用域中的 this。这与普通函数不同，普通函数的 this 值取决于函数的调用方式（例如，使用 new 关键字、call、apply 或直接调用）。

因此，记住关键点：箭头函数不绑定自己的 this，而是从其词法作用域继承 this。 这使得箭头函数在处理回调函数、事件处理程序和其他需要访问外部作用域 this 的场景中非常有用，避免了 this 指向错误的问题。