看懂 JavaScript 中的 this，这一篇文章就够了

前端

2023-11-11 23:30:03

JavaScript 中的 this 是一个非常重要的概念，也是最容易让人困惑的概念之一。这篇文章将从最基本的概念开始，一步步带领你理解 this 的含义和用法。

什么是 this？

this 关键字代表当前执行代码的对象。在 JavaScript 中，this 的值取决于函数的调用方式。

this 的值是如何确定的？

全局作用域中的 this

在全局作用域中，this 的值是 window 对象。
函数调用中的 this

在函数调用中，this 的值取决于函数的调用方式。
- 如果函数以普通函数的方式调用，this 的值是全局对象 window。
- 如果函数以方法的方式调用，this 的值是该方法所属的对象。
- 如果函数以箭头函数的方式调用，this 的值是箭头函数定义时所在的作用域中的 this 值。

this 的常见用法

访问对象属性和方法

this 可以用于访问对象属性和方法。例如，以下代码使用 this 来访问对象 person 的 name 属性和 sayHello 方法：

const person = {
  name: "John",
  sayHello: function () {
    console.log("Hello, my name is " + this.name);
  }
};

person.sayHello(); // 输出：Hello, my name is John

事件处理程序中的 this

this 可以用于事件处理程序中来访问事件源对象。例如，以下代码使用 this 来访问 click 事件的事件源对象：
```
const button = document.querySelector("button");

button.addEventListener("click", function () {
  console.log(this); // 输出：<button>...</button>
});
```
构造函数中的 this

this 可以用于构造函数中来访问新创建的对象。例如，以下代码使用 this 来访问新创建的 Person 对象：
```
function Person(name) {
  this.name = name;
}

const person = new Person("John");

console.log(person); // 输出：{ name: "John" }
```