JavaScript 中 this 关键字的妙趣横生：全面透析 this 指向的内涵

2023-11-24 05:07:42

this 指向的本质：上下文语境与作用域

要理解 this 指向，首先需要认识到 JavaScript 是一门基于原型的语言。JavaScript 中的一切都是对象，包括函数也是对象。在 JavaScript 中，函数调用时，会形成一个执行上下文（execution context），这个执行上下文包含了函数的参数、局部变量、以及指向当前执行函数的对象引用（即 this）。

this 指向的默认规则：谁调用就指向谁

在 JavaScript 中，this 的指向遵循默认规则，即在函数调用时，this 指向谁，就执行谁的方法或访问谁的属性。这是一种非常直观且易于理解的规则，有助于我们快速掌握 this 的指向行为。

以下代码段展示了 this 指向的默认规则：

const person = {
  name: '张三',
  age: 20,
  showName() {
    console.log(this.name);
  },
  showAge() {
    console.log(this.age);
  }
};

person.showName(); // 输出：张三
person.showAge(); // 输出：20

在这个代码段中，this 指向 person 对象，因为 showName() 和 showAge() 方法都是在 person 对象上调用的。因此，this.name 和 this.age 都指向 person 对象的 name 和 age 属性，输出结果分别为 "张三" 和 "20"。

this 指向的特殊规则：绑定与继承

除了默认规则之外，this 指向还存在一些特殊规则，这些规则主要与函数绑定和对象继承相关。

函数绑定：改变 this 的指向

JavaScript 中的函数绑定允许我们改变 this 的指向，使其指向特定的对象。这可以通过 call()、apply() 和 bind() 方法实现。

以下代码段展示了函数绑定的用法：

const person = {
  name: '张三',
  age: 20
};

function showInfo(city) {
  console.log(`姓名：${this.name}, 年龄：${this.age}, 城市：${city}`);
}

showInfo.call(person, '北京'); // 输出：姓名：张三，年龄：20，城市：北京
showInfo.apply(person, ['上海']); // 输出：姓名：张三，年龄：20，城市：上海
const showInfoPerson = showInfo.bind(person);
showInfoPerson('广州'); // 输出：姓名：张三，年龄：20，城市：广州

在这个代码段中，showInfo 函数原本没有 this 指向，但是通过 call()、apply() 和 bind() 方法，我们可以改变 this 的指向，使其指向 person 对象。因此，showInfo 函数可以访问 person 对象的 name 和 age 属性，并输出指定城市的名称。

对象继承：this 的延续

在 JavaScript 中，对象可以继承其他对象的属性和方法。当子对象调用父对象的方法时，this 指向子对象本身。

以下代码段展示了对象继承的用法：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  showInfo() {
    console.log(`姓名：${this.name}, 年龄：${this.age}`);
  }
}

class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }

  showSchool() {
    console.log(`学校：${this.school}`);
  }
}

const student = new Student('李四', 18, '清华大学');

student.showInfo(); // 输出：姓名：李四，年龄：18
student.showSchool(); // 输出：学校：清华大学