JS 中的 this 值：理解基础概念，掌握运用技巧

2024-01-14 21:28:39

一、初识 this

在 JavaScript 中，this 是一个，而不是变量或属性名。它代表当前函数的执行上下文，或者说，它指向当前函数所隶属的对象。this 的值在函数执行时确定，并且在函数执行期间保持不变。

二、this 的常见用法

作为对象的方法

当一个函数作为对象的方法被调用时，this 会指向该对象。例如：
```
const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // 输出: Hello, my name is John.
```
在上面的例子中，当 person.greet() 被调用时，this 指向 person 对象，因此我们可以通过 this.name 访问 person 对象的 name 属性。
作为事件处理函数

当一个函数作为事件处理函数被调用时，this 会指向触发该事件的元素。例如：
```
const button = document.querySelector('button');

button.addEventListener('click', function() {
  console.log(this); // 输出: <button>...</button>
});
```
在上面的例子中，当 button 被点击时，this 指向 button 元素，因此我们可以通过 this 来访问 button 元素的属性和方法。
作为构造函数

当一个函数作为构造函数被调用时，this 会指向新创建的对象。例如：
```
function Person(name) {
  this.name = name;
}

const person1 = new Person('John');

console.log(person1.name); // 输出: John
```
在上面的例子中，当 new Person('John') 被调用时，this 指向新创建的 person1 对象，因此我们可以通过 this.name 来给 person1 对象的 name 属性赋值。

三、影响 this 值的因素

函数的调用方式

函数的调用方式会影响 this 的值。如果一个函数作为对象的方法被调用，this 会指向该对象；如果一个函数作为事件处理函数被调用，this 会指向触发该事件的元素；如果一个函数作为构造函数被调用，this 会指向新创建的对象。
箭头函数

箭头函数没有自己的 this 值，它会继承其外层函数的 this 值。例如：
```
const person = {
  name: 'John',
  greet: () => {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // 输出: undefined
```
在上面的例子中，greet 函数是一个箭头函数，它没有自己的 this 值，因此它会继承其外层函数 person.greet() 的 this 值。然而，person.greet() 是一个普通函数，它的 this 值是 undefined，因此 greet 函数的 this 值也是 undefined。