前言

对于初学者来说，JavaScript 中的 this 指向问题可能会让人感到困惑。最近，我遇到了 this 指向的问题，通过这篇文章记录下我的思考和感悟，希望能够对其他刚入门的前端开发者有所帮助。

this 关键字是 JavaScript 中最复杂的机制之一。它是一个很特别的关键字，被自动定义在 所有函数的作用域中。但是即使是非常有经验的 JavaScript 开发者也很难说清它到底指向什么。 任何足够先进的技术都和魔法无异。 ——Arthur C. Clarke

为什么要用this

JavaScript 中使用 this 关键字的一个重要原因是它允许我们引用当前执行上下文中的对象使得对象具有访问自己属性的能力。可以显著的提升代码质量，减少上下文传递。

如何确定this的指向

相信很多初学者对于this的指向问题总是很迷惑。😥为什么有时this指向自身对象？有时this又指向全局对象？以下内容将带大家彻底掌握this的指向问题。

在JavaScript中this的绑定规则共有以下几条 ： 默认绑定，隐式绑定，显式绑定，new 绑定。 看到这大家是不是开始有些疑惑了，没关系，我们先不用管以上这几种绑定规则是什么。直接背以下七步口诀 ：

1. 箭头函数
2. new
3. call
4. apply
5. bind
6. 对象.
7. 默认绑定

每看到一个this我们就从上往下按照口诀的顺序，依次对照，满足哪个场景，this的指向就对应这个场景。话不多说直接看例子。

1. 箭头函数

箭头函数没有this这个机制，写在箭头函数中的this由它外层非箭头函数的this指向决定。一看到箭头函数中有this时立刻查找外层非箭头函数this的指向 所以在此时就不用管箭头函数内部了，直接找到外层非箭头函数，对照以上口诀找到满足的哪一项。

2. new 绑定

new 绑定: this指向创建的实例对象。

function Person(name) {
    this.name = name;
    this.greet = function () {
        console.log('Hello, my name is ' + this.name);
    };
}

const alice = new Person('Alice');
alice.greet();  // 输出: Hello, my name is Alice

3. 显式绑定: call apply bind 强行绑定this

在 JavaScript 中，显式绑定是通过 call()、apply() 或者 bind() 方法来手动指定函数执行时的 this 上下文。这种绑定方式允许我们明确地指定函数执行时想要使用的对象，而不依赖于函数的调用方式。

说人话就是 call、apply、bind方法可以强行将this指向为我们想要绑定的对象

1. call() 方法：call() 方法允许我们调用一个函数并指定函数执行时的 this 上下文，传入函数的参数为零散接收即传入的参数用"," 隔开。 ，例如:

function greet() {
    console.log('Hello, ' + this.name);
}

const person = { name: 'John' };

// 使用 call() 显式绑定函数执行上下文为 person 对象
greet.call(person); // 输出: Hello, John

1. apply() 方法：  apply() 方法与 call() 类似，但是传入的参数为数组而不是一系列的零散参数。

function greet(greeting) {
    console.log(greeting + ', ' + this.name);
}

const person = { name: 'John' };
const args = ['Hello']; // 参数数组

// 使用 apply() 显式绑定函数执行上下文为 person 对象，并传入参数数组
greet.apply(person, args); // 输出: Hello, John

1. bind() 方法： bind() 方法创建一个新函数，将原始函数绑定到指定的对象，并可选地预先设定部分参数。（参数匹配遵从就近原则）

function greet() {
    console.log('Hello, ' + this.name);
}

const person = { name: 'John' };

// 使用 bind() 创建一个新函数，将 greet 函数绑定到 person 对象
const greetPerson = greet.bind(person);

// 调用新函数
greetPerson(); // 输出: Hello, John

4. 对象.

当函数作为对象的方法调用时，this 通常指向该对象。

const person = {
    name: 'Alice',
    greet() {
        console.log('Hello, ' + this.name);
    }
};

// 调用，`this` 指向 `person`
person.greet();  // 输出: Hello, Alice

5.默认绑定

默认绑定: 当一个函数直接独立调用，不带任何修饰符的时候 （没有任何人左右他，也就是只有形如这样的函数 foo() ）

函数在哪个词法作用域下生效，函数中的this就指向哪里 --- (只要是默认绑定，this一定指向window)

function greet() {
    console.log('Hello, ' + this.name);
}

const name = 'Global'; // 在全局环境中定义一个全局变量

// 调用函数，此时函数被独立调用 this指向全局
greet(); // 输出: Hello, Global

通过以上口诀法判断this指向是不是很简单，你学废了吗？

本篇文章就到此为止啦，希望通过这篇文章能对你理解this的指向有所帮助，本人水平有限难免会有纰漏，欢迎大家指正。如觉得这篇文章对你有帮助的话，欢迎点赞收藏加关注，感谢支持🌹🌹。