这 or 这：JavaScript 里的 this 大揭秘

作为一名前端工程师，JavaScript 是我们离不开的编程语言。然而，对于初学者来说，JavaScript 中的 this 往往会让人困惑不已。

this 是一个特殊的 JavaScript 关键字，它代表着当前正在执行代码的对象。this 的值会根据代码所在的上下文而发生变化。

在 JavaScript 中，this 可以出现在以下几种场景：

• 方法内部
• 函数内部
• 构造函数内部
• 事件处理函数内部
• 全局作用域

在方法内部，this 指向当前方法所属的对象。例如：

const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // 输出: "Hello, my name is John."

在这个例子中，this 指向 person 对象，因此我们可以通过 this.name 访问 person 对象的 name 属性。

在函数内部，this 指向全局对象（在严格模式下为 undefined）。例如：

function greet() {
  console.log(`Hello, my name is ${this.name}.`);
}

greet(); // 输出: "Hello, my name is undefined."

在这个例子中，greet() 函数没有被任何对象调用，因此 this 指向全局对象。由于全局对象没有 name 属性，因此 this.name 的值为 undefined。

在构造函数内部，this 指向新创建的对象。例如：

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

const john = new Person('John');

console.log(john.name); // 输出: "John"

在这个例子中，new Person('John') 创建了一个新的 Person 对象，并将 this 指向该对象。因此，我们可以通过 this.name 访问该对象的 name 属性。

在事件处理函数内部，this 指向触发该事件的元素。例如：

const button = document.getElementById('myButton');

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

在这个例子中，当用户点击按钮时，this 指向 button 元素。因此，我们可以通过 this 来访问按钮的属性和方法。

在全局作用域，this 指向全局对象（在严格模式下为 undefined）。例如：

console.log(this); // 输出: <Window> {}

在这个例子中，this 指向全局对象 window。因此，我们可以通过 this 来访问全局对象中的属性和方法。

掌握了 this 关键字的用法，你就可以写出更优雅、更易维护的 JavaScript 代码。