深入浅出，解析原型和原型链的奥秘

2023-09-15 21:16:21

引言

在JavaScript中，原型和原型链是两个重要概念，理解它们对于掌握JavaScript语言至关重要。本文将深入浅出地解析原型和原型链，并通过实例代码演示它们是如何工作的。

原型

原型是JavaScript对象的一个特殊属性，它指向该对象的构造函数。构造函数是用来创建对象的函数，原型对象包含了该构造函数的所有属性和方法。当我们创建一个新对象时，该对象就会继承其构造函数的原型对象的所有属性和方法。

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

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

const person = new Person('John Doe', 30);

person.greet(); // Hello, my name is John Doe and I am 30 years old.

在上面的例子中，Person是构造函数，Person.prototype是原型对象，person是新创建的对象。当我们调用person.greet()方法时，JavaScript会沿着原型链向上查找，直到找到greet方法，然后执行该方法。

原型链

原型链是JavaScript对象的一个重要概念，它了对象之间继承关系的链条。原型链从对象本身开始，然后依次向上追溯到对象的构造函数的原型对象，再追溯到构造函数的原型对象的原型对象，以此类推，直到遇到null为止。

const person = new Person('John Doe', 30);

console.log(person.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__ === null); // true

在上面的例子中，person对象的原型对象是Person.prototype，Person.prototype的原型对象是Object.prototype，Object.prototype的原型对象是null。因此，person对象的原型链是：person -> Person.prototype -> Object.prototype -> null。