JavaScript 原型和原型链：深入解析抽象概念

2023-10-03 13:03:18

JavaScript 原型简介

在 JavaScript 中，原型是对象的一个特殊属性，它指向该对象的构造函数。每个构造函数都有一个 prototype 属性，该属性指向一个对象，该对象称为该构造函数的原型对象。

JavaScript 原型链

原型链是 JavaScript 中的一个重要概念。它是一条从对象到其原型对象的链条。当我们访问对象的属性或方法时，JavaScript 会沿着原型链向上查找，直到找到该属性或方法。如果在该对象或其原型链上找不到该属性或方法，则会返回 undefined。

理解 JavaScript 中的原型和原型链

为了更好地理解 JavaScript 中的原型和原型链，我们可以考虑以下示例：

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

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const person1 = new Person('John', 30);
const person2 = new Person('Mary', 25);

person1.sayHello(); // Hello, my name is John and I am 30 years old.
person2.sayHello(); // Hello, my name is Mary and I am 25 years old.

在这个示例中，Person 是一个构造函数，它创建了 Person 对象。Person.prototype 是 Person 构造函数的原型对象。person1 和 person2 都是 Person 构造函数的实例。

当我们调用 person1.sayHello() 时，JavaScript 会在 person1 对象中查找 sayHello 方法。由于 person1 对象没有 sayHello 方法，JavaScript 会沿着原型链向上查找，直到找到 sayHello 方法。在 Person.prototype 对象中找到了 sayHello 方法，于是 JavaScript 调用该方法，并传递 person1 对象作为 this 参数。

同理，当我们调用 person2.sayHello() 时，JavaScript 也会沿着原型链向上查找，直到找到 sayHello 方法，然后调用该方法，并传递 person2 对象作为 this 参数。