JS 中的 this 指向：轻松理解和掌握

2023-09-25 22:13:06

Javascript 是一门基于对象的动态语言，这意味着所有内容都被视为对象，包括函数。this 是 Javascript 中实现面向对象的一个关键特性，但它也可能是最容易混淆的概念之一，尤其是对于习惯于静态语言的人来说。

在本文中，我们将详细探讨 Javascript 中的 this 指向，从基本用法到作用域和绑定技巧，并提供示例代码进行演示。通过本文，你将能够自信地运用 this 来编写出色的 Javascript 代码。

this 的基本用法

在 Javascript 中，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 关键字指向 person 对象，因为 greet() 方法是在 person 对象上调用的。因此，this.name 等同于 person.name，输出的结果是 "Hello, my name is John Doe"。

this 的作用域

this 的作用域取决于函数的调用方式。有三种主要的方式可以调用函数：

方法调用： 当函数作为对象的方法调用时，this 指向该对象。
函数调用： 当函数作为普通函数调用时，this 指向全局对象 (window 对象)。
构造函数调用： 当函数作为构造函数调用时，this 指向新创建的对象。

以下示例演示了这三种调用方式：

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

person.greet(); // 方法调用，this 指向 person 对象

greet(); // 函数调用，this 指向全局对象

const newPerson = new person(); // 构造函数调用，this 指向新创建的对象
newPerson.greet(); // 方法调用，this 指向新创建的对象

this 的绑定技巧

有时，你可能需要改变 this 的默认行为。有几种方法可以做到这一点，最常见的方法是使用 bind()、call() 和 apply() 方法。

bind() 方法： bind() 方法返回一个新的函数，该函数的 this 值被绑定到指定的上下文对象。
call() 方法： call() 方法立即调用函数，并指定 this 的值。
apply() 方法： apply() 方法与 call() 方法类似，但它接受一个数组作为第二个参数，该数组包含要作为函数参数传递的参数。

以下示例演示了 bind()、call() 和 apply() 方法：

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

const boundGreet = person.greet.bind({ name: 'Jane Doe' }); // this 被绑定到 { name: 'Jane Doe' }
boundGreet(); // 输出：Hello, my name is Jane Doe

person.greet.call({ name: 'Jane Doe' }); // this 被绑定到 { name: 'Jane Doe' }
person.greet.apply({ name: 'Jane Doe' }, []); // this 被绑定到 { name: 'Jane Doe' }