揭秘JS中的原型和原型链

2023-12-22 18:22:06

JavaScript中的原型和原型链是理解对象行为和继承机制的关键概念，掌握它们将有助于您编写更健壮、更灵活的代码。本文将为您揭示原型和原型链的奥秘，并提供清晰的示例以加深您的理解。

原型与原型链：从实例到原型

在JavaScript中，每个构造函数都有一个prototype属性，它指向一个对象。这个对象的所有属性和方法都会被这个构造函数的实例化对象所继承。

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

//为Person构造函数添加prototype属性
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

//实例化Person构造函数
const person1 = new Person('John Doe', 30);

//调用greet方法
person1.greet(); //输出：Hello, my name is John Doe and I am 30 years old.

在这个例子中，Person构造函数的prototype属性指向一个对象，其中包含一个greet方法。当我们实例化Person构造函数时，person1对象被创建，它会从Person.prototype对象继承greet方法。这使得我们可以使用person1.greet()来调用greet方法。

原型链：沿着继承的足迹

原型链是对象的一个重要概念，它允许对象访问其原型对象中的属性和方法。每个对象都有一个内部属性[[Prototype]]，它指向其原型对象。当对象访问一个不存在的属性或方法时，[[Prototype]]属性会沿着原型链向上查找，直到找到该属性或方法为止。

//获取person1的原型对象
const person1Prototype = Object.getPrototypeOf(person1);

//输出person1的原型对象
console.log(person1Prototype); //输出：{ greet: [Function: greet] }

在这个例子中，我们使用Object.getPrototypeOf()方法获取person1的原型对象，然后将其输出到控制台。我们可以看到，person1的原型对象包含一个greet方法。这说明了原型链是如何工作的：当person1访问greet方法时，它会首先在自身查找，如果没有找到，它会沿着原型链向上查找，直到找到greet方法为止。