JavaScript 'this' 关键字

通过简单示例了解 JavaScript 中“this”关键字的用法。本入门指南讲解了全局、函数、对象、箭头函数和类上下文。

介绍

如果你刚开始学习 JavaScript，你很可能遇到过关键字this。对于许多初学者来说，它是这门语言中最令人困惑的部分之一。原因是    的值this会根据其使用方式和位置而变化。

但别担心，一旦你了解了规则，this操作起来就会变得容易得多。

您将学到什么

读完本指南后，您将：

• 了解this关键字在 JavaScript 中的含义。

• 了解this在不同情况下的行为方式。

• 了解this函数、对象和类的工作原理。

• 发现初学者在使用时常犯的错误this。

• this通过现实世界的例子来增强使用信心。

什么是 this关键词？

在 JavaScript 中，this表示正在调用或执行函数的对象。

可以将其视为一种参考，根据其出现的上下文，它指向不同的东西。

在不同情况下如何运作

1. 全局背景

在全局范围内（任何函数之外），this指的是全局对象。

• 在浏览器中，全局对象是window。

console.log(this); // window (in browsers)

2. 函数内部

在常规函数中，this取决于函数的调用方式。

function showThis() {
  console.log(this);
}
showThis(); // window (in non-strict mode)

在严格模式下，函数内部的 this 变为未定义。

3. 对象方法内部

当函数是对象的方法时，this指的是该对象。

const user = {
  name: "Wisdom",
  greet: function() {
    console.log(this.name);
  }
};
user.greet(); // Wisdom

4. 箭头函数

箭头函数没有自己的this。相反，它们使用this来自其周围上下文的值。

const user = {name: "Udo",greet: () => {console.log(this.name);}};user.greet(); // undefined, because arrow functions don’t bind their own this

5. 在课堂上

在类内部，this通常指该类的实例。

class Person {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}
const person1 = new Person("Wisdom");
person1.sayName(); // Wisdom

常见错误this

• 忘记上下文：初学者通常期望this总是指同一件事，但它会根据使用地点而变化。

• 对象中的箭头函数：对对象方法使用箭头函数可能会导致意外的结果，因为它们没有绑定自己的上下文this。

• 严格模式差异：在严格模式下，this函数内部undefined代替了全局对象。

结论

JavaScript    中的关键字this乍一看可能令人困惑，但它始终遵循清晰的规则。在全局作用域中，它通常指向全局对象；而在函数内部，它的值取决于函数的调用方式。在对象方法中，它this指向对象本身；在类中，它指向已创建的特定实例。箭头函数的行为有所不同，它会借用this其周围的上下文。

通过练习这些场景，你会逐渐发现它this并不像乍一看那么神秘。理解this行为如何让你的 JavaScript    代码更可预测、更可靠、更易于调试，是成为自信开发者的关键一步。