js 核心系列（七）—— 理解 this 指向，不再头疼

this 指向的本质

this 指向是一个特殊变量，它在函数内部被定义，指向当前函数的执行上下文。执行上下文决定了 this 指向谁，它可以是全局对象、对象实例或函数本身，具体取决于函数的调用方式和上下文。

常见的 this 指向场景

1. 全局作用域

在全局作用域中，this 指向全局对象。在浏览器中，全局对象是 window 对象，在 Node.js 中，全局对象是 global 对象。

2. 对象方法

当一个函数作为对象的方法被调用时，this 指向该对象。例如：

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

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

在上面的例子中，greet() 函数作为 person 对象的方法被调用，因此 this 指向 person 对象。

3. 独立函数

当一个函数作为独立函数被调用时，this 指向全局对象。例如：

function sayHello() {
  console.log('Hello, world!');
}

sayHello(); // Hello, world!

在上面的例子中，sayHello() 函数作为独立函数被调用，因此 this 指向全局对象。

控制 this 指向

在某些情况下，我们可能需要控制 this 指向谁。JavaScript 提供了多种方法来实现这一点，包括：

1. 隐式绑定

隐式绑定是 this 指向最常见的方式。在以下情况下，this 会自动指向正确的对象：

• 当一个函数作为对象的方法被调用时。
• 当一个函数使用箭头函数语法定义时。

2. 显式绑定

显式绑定允许我们手动指定 this 指向谁。可以使用 call()、apply() 或 bind() 方法来实现。例如：

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

const anotherPerson = {
  name: 'Jane',
};

person.greet.call(anotherPerson); // Hello, my name is Jane!

在上面的例子中，我们使用 call() 方法将 this 指向 anotherPerson 对象。

3. new 操作符

当使用 new 操作符调用一个函数时，this 会指向一个新创建的对象。例如：

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

const person = new Person('John');

console.log(person.name); // John

在上面的例子中，new Person('John') 语句创建了一个新的 Person 对象，并将 this 指向该对象。

理解 this 指向的技巧

以下是一些理解 this 指向的技巧：

• 记住，this 指向是在函数执行的时候确定的。
• 在对象方法中，this 指向该对象。
• 在独立函数中，this 指向全局对象。
• 可以使用 call()、apply() 或 bind() 方法来显式绑定 this。
• 使用箭头函数语法定义函数时，this 指向与父作用域的 this 相同。

结论

this 指向是一个复杂的概念，但只要掌握基本原理并加以练习，您就可以轻松理解和使用它。希望本文能帮助您更好地理解 this 指向，并消除您对它的困惑。