深入JavaScript之理解this指向

前言

写下这篇文章之前，先聊聊本人接触编程的顺序吧：Javascript->python->c->rust,是的，你没看错，js是我学习的第一门语言，至于原因不再多述，也不是本文重点，由于学习js之前，编程基础几乎为0的我，对于语法相较于后来学习的语言如此随意杂乱的JavaScript，学习路线可是不咋顺啊，尤为深刻的回忆里有关this指向的问题必然占有一席之地。让我们来聊聊如何理解这一块，前两年前端行业非常火爆，一些非计算机出身的人都来学习，学生体量是很大的。我相信很多纯前端方向的小伙伴跟我之前一样，都是纯小白，希望可以给你们带来学习过程当中的一些帮助。

正文

如果是之前有过C或者其他语言编程基础的人，这一块其实理解起来问题不大，至少以我现在回头看的感受是这样的。因此我建议如果是计算机方向的小伙伴最好去先修一下C，C的体系结构是专业基础，几乎所有的语言语法都借鉴于C，js也不例外，设计之初是一种客户端的脚本语言，主要应用于浏览器，就是C的衍生。如果说我只想走前端，也是不影响的，毕竟只是为了方便大家的学习，前端终究是以应用为主。开始正题：

1.this指向对象：

this是js中的一个关键字，你在常见的面向对象的语言中，几乎都会看到类似this的关键字，例如python当中的self。但是this与其相比略有不同，以前者举例，我们来看两组代码：

class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age

    def say_hello(self):
        print(f"你好,我是{self.name}, 我今年{self.age}岁.")

person1 = Person("苗小姐", 20)
person1.say_hello()

在python当中，我们定义了一个Person类，其中包含一个__init__方法和一个say_hello方法。我们使用self关键字来访问对象的属性，并在say_hello方法中使用self关键字来访问对象的属性。

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

Person.prototype.sayHello = function() {
    console.log("你好，我是 " + this.name + " 我今年 " + this.age + " 岁了.");
}

var person1 = new Person("苗小姐", 20);
person1.sayHello();

在JavaScript中，我们定义了一个Person构造函数，并在其原型上定义了一个sayHello方法。在sayHello方法中，我们使用this关键字来访问对象的属性。随后使用new关键字来调用构造函数创建对象实例，并将对象的属性和方法传递给构造函数。 不难发现，在Python中，self是作为第一个参数传递给方法的，表明指代当前这个对象所以必写而在js中，this是隐式的，可以通过上下文来访问。在JavaScript中，this的指向可以根据函数的调用环境而改变，取决于函数调用的位置。见上，在对象的方法中，this指向该对象，而在函数中，this指向全局对象。这种灵活的性质在很多开发场景当中发挥了显著作用，以后会经常见到它，因此，你最好把它理解清楚。

2.this事件绑定

先来看段代码：

<button id="Button">Click me</button>

<script>
var button = document.getElementById("Button");

button.addEventListener("click", function() {
    console.log(this.id); // 输出 
});
</script>

我们首先创建了一个按钮并为它附上一个id属性Button。然后，我们使用addEventListener()方法来绑定一个click事件处理程序。在这个事件处理程序中，使用this关键字来访问事件源元素的id属性，输出到控制台中。可以发现，当按钮被点击时，事件处理程序中的this指向按钮元素，因此输出的结果是"Button"。 在js中，事件绑定中的this通常指的是事件源元素的上下文。当事件发生时，js会自动将事件源元素作为this传递给事件处理程序。因此，在事件处理程序中，this指向事件源元素。

3.this固定方法

你可能会问，没有什么办法能让this指向一个我指定的对象吗？答案是肯定的，在js内置方法中有一个call方法，可以来帮助我们强制指定函数调用时this的指向，举个例子：

function greet() {
    console.log("你好，我是 " + this.name);
}"
var person = {
    name: "苗小姐"
};
greet.call(person); // 输出 

后话

学海无涯，学无止境，各位掘友，鼎力前行！