JavaScript中this的指向：深入理解

2024-02-22 19:02:01

对于任何前端开发人员来说，JavaScript 中的 this 都是一个令人费解的话题。我们经常会遇到这样一种情况：在 JavaScript 中，函数的执行环境改变了 this 指向的对象，导致程序的行为与预期不符。本文将深入探讨 JavaScript 中 this 关键字的四种指向情况，帮助你彻底掌握 this 的指向规则。

全局对象

在 JavaScript 中，全局对象是 this 指向的默认值。它代表着当前脚本所运行的环境，通常是 window 对象。你可以通过在浏览器控制台中输入 this 来查看全局对象的属性和方法。

console.log(this); // Window {window: Window, self: Window, document: HTMLDocument, name: "", location: Location, ...}

调用对象

当函数被调用时，this 指向调用该函数的对象。这意味着，如果一个函数被一个对象的方法调用，那么 this 指向该对象。如果一个函数不是作为对象的方法被调用，那么 this 指向全局对象。

const person = {
  name: "John Doe",
  greet: function () {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // Hello, my name is John Doe.

构造函数

当一个构造函数被调用时，this 指向新创建的对象。这是因为构造函数的目的是创建一个新对象，并且 this 关键字用于引用该对象。

function Person(name) {
  this.name = name;

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

const john = new Person("John Doe");
john.greet(); // Hello, my name is John Doe.

箭头函数

箭头函数没有自己的 this 指向，而是继承外层函数的 this 指向。这意味着，箭头函数中的 this 指向与包含它的函数中的 this 指向相同。

const person = {
  name: "John Doe",
  greet: function () {
    const arrowGreet = () => {
      console.log(`Hello, my name is ${this.name}.`);
    };

    arrowGreet(); // Hello, my name is John Doe.
  }
};

person.greet();