一图在手，原型与原型链，一目了然！

在JavaScript的世界中，原型和原型链的概念对于理解对象的行为至关重要。它们是JavaScript面向对象编程的基础。这篇文章将使用图文并茂的方式，循序渐进地讲解原型与原型链，帮助你轻松掌握这些核心知识。

1. 原型

每个JavaScript对象都有一个原型对象，这个原型对象可以被看作是该对象的基础，它包含了一些默认属性和方法。对象的原型对象可以通过Object.getPrototypeOf()方法获取。

const person = {
  name: 'John Doe',
};

const personPrototype = Object.getPrototypeOf(person);
console.log(personPrototype); // { constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, … }

2. 原型链

原型链是指从一个对象到其原型对象的链条。可以通过Object.getPrototypeOf()方法不断地获取一个对象的原型对象，直到原型对象为null。

const person = {
  name: 'John Doe',
};

const personPrototype = Object.getPrototypeOf(person);
const objectPrototype = Object.getPrototypeOf(personPrototype);
console.log(objectPrototype); // { constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, … }

在上面的例子中，person对象的原型对象是personPrototype，personPrototype的原型对象是objectPrototype，objectPrototype的原型对象是null。因此，person对象的原型链是person -> personPrototype -> objectPrototype -> null。

3. 原型和原型链的应用

原型和原型链在JavaScript中有很多应用，比如：

• 继承： 原型链可以实现对象之间的继承。子对象的原型对象可以设置为父对象的原型对象，这样子对象就可以继承父对象的属性和方法。
• 扩展： 原型链可以用来扩展对象的功能。可以通过向原型对象中添加新的属性和方法，来扩展所有基于该原型对象的对象的功能。
• 查找属性： 当一个对象试图访问一个不存在的属性时，JavaScript引擎会沿着原型链向上查找，直到找到该属性或者原型链的末端。

4. 一图汇总

以下是一张汇总图，可以帮助你理解原型和原型链：

[Image of Prototype and Prototype Chain]

5. 总结

原型和原型链是JavaScript中面向对象编程的基础。理解这些概念对于理解JavaScript对象的行为至关重要。希望这篇文章能够帮助你轻松掌握原型和原型链。