this的真面目是搞清楚其本质及背后原理

2023-10-08 21:05:24

this ，看似简单，但背后却蕴藏着JavaScript编程逻辑的精髓和奥秘。只有真正理解this关键字，我们才能深刻把握JavaScript的运作机制和应用技巧。

我们知道，在 JavaScript 中，函数是对象，可以作为值传递给其他函数或作为对象属性。当函数被调用时，this 关键字便会指向调用它的对象。因此，理解 this 关键字，就等于理解函数是如何被调用的。

this 关键字的指向原则

1. 默认指向：Window 对象

当一个函数不是作为对象的方法被调用时，this 关键字的默认指向是 Window 对象。Window 对象是 JavaScript 中的全局对象，它表示浏览器窗口。因此，当我们在浏览器控制台中直接调用一个函数时，this 关键字就指向 Window 对象。

2. 方法调用：指向所属对象

当一个函数作为对象的方法被调用时，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 对象，因此我们可以在方法内部访问 person 对象的属性和方法。

3. 构造函数调用：指向新创建的对象

当一个函数作为构造函数被调用时，this 关键字指向新创建的对象。例如：

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

const john = new Person("John"); // 创建一个新的 Person 对象

console.log(john.name); // "John"

在上面的示例中，当我们调用 Person() 函数时，this 关键字指向新创建的 john 对象，因此我们可以通过 this 关键字访问 john 对象的属性和方法。

this 关键字的特殊情况

在某些情况下，this 关键字的指向会发生变化。例如：

1.箭头函数：指向词法作用域

箭头函数（又称匿名函数）是 ES6 中引入的新语法。箭头函数没有自己的 this 关键字，它会继承其父级作用域的 this 关键字。例如：

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

person.greet(); // "Hello, my name is undefined"

在上面的示例中，由于箭头函数没有自己的 this 关键字，因此它会继承其父级作用域（person 对象）的 this 关键字。然而，person 对象的 this 关键字指向 Window 对象，因此箭头函数内部的 this 关键字指向 Window 对象，而不是 person 对象。