理解 JS 原型链和 `this` 指向

前言

在 JavaScript 中，对象不仅仅是简单的值存储单元，它们还拥有复杂的内部结构和交互机制。原型链和 this 指向是理解对象行为的关键概念。

对象的本质

在 JavaScript 中，所有对象都是通过构造函数创建的。每个构造函数都有一个关联的原型对象，该对象充当其创建的所有实例的模板。这个原型对象包含一组共享属性和方法，这些属性和方法可被所有实例访问。

例如：

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

const person1 = new Person("John", 30);
const person2 = new Person("Jane", 25);

在这个例子中，Person 是构造函数，它创建了 person1 和 person2 两个实例。Person 的原型对象包含属性 name 和 age，以及其他可能的方法。

原型链

当 JavaScript 无法在实例中找到某个属性或方法时，它会沿着原型链向上搜索。原型链是由实例的原型对象、原型对象的原型对象，依此类推，一直到 Object.prototype 为止。Object.prototype 是所有 JavaScript 对象的根原型。

person1.name; // "John" (在实例中找到)
person1.hasOwnProperty("name"); // true

person1.toString(); // "[object Object]" (在原型链中找到)
person1.hasOwnProperty("toString"); // false

在这个例子中，person1 实例没有 toString 方法，所以 JavaScript 会在原型链中查找该方法，并最终在 Object.prototype 中找到它。

this 指向

this 在 JavaScript 中扮演着至关重要的角色，它指向当前正在执行代码的对象。在构造函数中，this 指向新创建的实例。在方法中，this 指向调用该方法的对象。

const person1 = new Person("John", 30);
person1.getName = function() {
  return this.name;
};

person1.getName(); // "John"

在这个例子中，getName 方法中的 this 指向 person1 实例，因此它可以访问实例的 name 属性。

总结

原型链和 this 指向是 JavaScript 对象模型的重要组成部分。理解这些概念对于构建健壮且可维护的应用程序至关重要。