JavaScript 中的 this 指向问题：深刻理解与应用

2023-09-28 21:11:24

this 是什么？

在 JavaScript 中，this 是一个特殊的，它指向当前正在执行的函数或方法所属的对象。可以说，this 是 JavaScript 中最难理解的概念之一。但只要掌握了 this 的指向规则，就能轻松驾驭 JavaScript 的各种复杂用法。

this 的指向规则

this 的指向取决于函数的调用方式和上下文环境。在 JavaScript 中，函数的调用方式主要有四种：

作为对象的方法调用：

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

person.greet(); // 输出: Hello, my name is John Doe.
```
在这个例子中，greet() 方法作为 person 对象的方法被调用，因此 this 指向 person 对象。
作为函数表达式调用：

当函数作为函数表达式被调用时，this 指向 window 对象（在严格模式下为 undefined）。例如：
```
const greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

greet(); // 输出: Hello, my name is undefined.
```
在这个例子中，greet() 函数作为函数表达式被调用，因此 this 指向 window 对象。由于 window 对象没有 name 属性，因此输出结果为 undefined。
作为构造函数调用：

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

const person = new Person('John Doe');

console.log(person.name); // 输出: John Doe
```
在这个例子中，Person() 函数作为构造函数被调用，因此 this 指向新创建的 person 对象。
作为普通函数调用：

当函数作为普通函数被调用时，this 指向 window 对象（在严格模式下为 undefined）。例如：
```
function greet() {
  console.log(`Hello, my name is ${this.name}.`);
}

greet(); // 输出: Hello, my name is undefined.
```
在这个例子中，greet() 函数作为普通函数被调用，因此 this 指向 window 对象。由于 window 对象没有 name 属性，因此输出结果为 undefined。