从入门到精通：彻底理解 JavaScript 中的 this 指向

2024-01-09 10:40:50

作为 JavaScript 中至关重要的概念，this 一直是初学者和经验丰富的开发人员争论的焦点。深入理解 its 指向对于掌握 JavaScript 的奥秘至关重要。本文将以一种独一无二的方式阐述 this 指向的本质，为您提供深入的见解。

this 指向的本质

this 指向是一个动态值 ，它的值根据函数的调用上下文 而改变。调用上下文是指函数被调用的环境和作用域。this 指向以下列对象：

当函数作为对象方法调用时：指向该对象
当函数作为构造函数调用时：指向新创建的对象
当函数作为全局函数调用时：指向 window 对象（在浏览器中）或 global 对象（在 Node.js 中）

影响 this 指向的因素

1. 调用方式

this 指向取决于函数的调用方式。例如：

function person() {
  this.name = "John Doe";
}

const john = new person(); // this 指向 john 对象

2. 箭头函数

箭头函数没有自己的 this 指向，而是继承其外围作用域的 this 指向。

const person = {
  name: "John Doe",
  greet() {
    // this 指向 person 对象
    console.log(`Hello, my name is ${this.name}`);
  },
  greetArrow: () => {
    // this 指向 window 对象
    console.log(`Hello, my name is ${this.name}`);
  },
};

3. bind() 和 apply() 方法

这些方法可以手动设置函数的 this 指向。bind() 返回一个新函数，而 apply() 立即执行函数。

const person = {
  name: "John Doe",
};

const greetPerson = function() {
  console.log(`Hello, my name is ${this.name}`);
}.bind(person); // this 指向 person 对象