this 是什么？一次说清楚！

前言

在 JavaScript 中，this 是一个非常重要的，但它也是一个很容易混淆的概念。本文将详细解释 this 的概念和用法，帮助你彻底理解它。

函数的调用

首先，我们要从函数的调用开始讲起。一般来说，初学者都知道以下三种形式：

// 1. 方法调用
person.sayHi();

// 2. 函数调用
sayHi(person);

// 3. 构造函数调用
new Person();

请记下来。（我们称此代码为「转换代码」，方便下文引用）

很多人认为前两种形式「优于」第三种形式。但实际上，这三种形式是等价的，它们都会调用 Person 函数，并把 person 对象作为第一个参数传递给 sayHi 函数。

方法调用

在第一种形式中，person 对象是通过点号.运算符访问的。这种调用方式称为方法调用。

函数调用

在第二种形式中，sayHi 函数是作为一个普通的函数调用的。这种调用方式称为函数调用。

构造函数调用

在第三种形式中，Person 函数是作为一个构造函数调用的。这种调用方式称为构造函数调用。

this 的行为

现在，我们已经了解了函数的调用方式，那么 this 到底是什么呢？

this 是一个指向当前执行上下文的指针。在方法调用中，this 指向调用该方法的对象。在函数调用中，this 指向全局对象。在构造函数调用中，this 指向新创建的对象。

方法调用中的 this

在方法调用中，this 指向调用该方法的对象。例如，以下代码中，this 指向 person 对象：

const person = {
  name: '张三',
  sayHi() {
    console.log(`大家好，我叫${this.name}。`);
  },
};

person.sayHi(); // 输出：大家好，我叫张三。

函数调用中的 this

在函数调用中，this 指向全局对象。例如，以下代码中，this 指向 window 对象：

function sayHi(person) {
  console.log(`大家好，我叫${this.name}。`);
}

sayHi('李四'); // 输出：大家好，我叫 undefined。

因为 sayHi 函数不是作为 person 对象的方法调用的，所以 this 指向全局对象，而全局对象没有 name 属性，因此输出 undefined。

构造函数调用中的 this

在构造函数调用中，this 指向新创建的对象。例如，以下代码中，this 指向新创建的 Person 对象：

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

const person = new Person('王五');

console.log(person.name); // 输出：王五

this 的最佳实践

在使用 this 时，有以下几点最佳实践：

• 尽量使用箭头函数。箭头函数没有自己的 this，它会继承外层函数的 this，这可以避免很多 this 相关的问题。
• 如果必须使用普通函数，请显式地绑定 this。可以使用 bind()、call() 或 apply() 方法来绑定 this。
• 避免在全局作用域中使用 this。全局作用域中的 this 指向全局对象，这可能会导致意外的问题。

总结

this 是一个非常重要的 JavaScript 关键字，但它也是一个很容易混淆的概念。希望本文能帮助你彻底理解 this 的概念和用法。