JS中的this指东指西，到底指向哪里？

2024-02-09 03:19:37

对于初学者而言，JavaScript 中的this可能会让人感到困惑。它有时指向调用它的对象，有时又指向其他对象。这可能是由于this关键字的动态特性造成的。这篇文章将深入探讨this关键字，解释它的工作原理，并提供一些有用的技巧，帮助您更好地理解和使用它。

首先，我们需要了解this关键字的本质。this关键字是JavaScript中一个特殊的变量，它指向当前执行代码的对象。也就是说，当您调用一个函数时，this关键字将指向该函数所属的对象。

通常情况下，this关键字指向调用它的对象。例如，如果您有一个名为Person的类，其中包含一个名为getName()的方法，那么当您调用Person.getName()时，this关键字将指向Person对象。

但是，在某些情况下，this关键字可能指向其他对象。例如，当您使用箭头函数时，this关键字将指向该箭头函数所属的对象，而不是调用它的对象。

最后，this关键字的指向行为也可以通过绑定来改变。绑定允许您将this关键字强制指向特定的对象。这可以通过使用bind()方法来实现。

总之，this关键字是一个非常重要的概念，理解它的工作原理对于理解JavaScript代码至关重要。通过对this关键字的深入了解，您可以更好地编写和调试JavaScript代码。

让我们来看几个例子，以更好地理解this关键字的指向行为：

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

  this.getName = function() {
    return this.name;
  };
}

const person = new Person();
console.log(person.getName()); // "John"

const getName = person.getName;
console.log(getName()); // undefined

在第一个例子中，this关键字指向Person对象，因为getName()方法被Person对象调用。在第二个例子中，this关键字指向window对象，因为getName()方法被window对象调用。

const person = {
  name: "John",

  getName: function() {
    return this.name;
  },

  arrowGetName: () => {
    return this.name;
  }
};

console.log(person.getName()); // "John"
console.log(person.arrowGetName()); // undefined

在第一个例子中，this关键字指向person对象，因为getName()方法被person对象调用。在第二个例子中，this关键字指向window对象，因为arrowGetName()方法是一个箭头函数。

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

  this.getName = function() {
    return this.name;
  };
}

const person = new Person();
const getName = person.getName.bind(person);

console.log(getName()); // "John"