js原型和原型链图解

JavaScript中的原型和原型链是理解JavaScript面向对象编程的重要概念之一。

在JavaScript中，每个对象都有一个原型（prototype），原型是一个对象，它包含了共享的属性和方法。当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript会去它的原型中查找。

原型链是由一系列对象组成的链表结构，每个对象都有一个指向其原型的引用。当我们访问一个对象的属性或方法时，如果该对象本身没有，JavaScript会沿着原型链向上查找，直到找到对应的属性或方法或者到达原型链的末尾（null）。

下面是一个简单的图解：

+--+
|      Object       |
+--+
|   __proto__       |
|                   |
|   constructor     |
|   toString()      |
|   ...             |
+--+
        ^
        |
+--+
|     Prototype     |
+--+
|   __proto__       |
|                   |
|   constructor     |
|   hasOwnProperty()|
|   ...             |
+--+
        ^
        |
+--+
|     Prototype     |
+--+
|   __proto__       |
|                   |
|   constructor     |
|   ...             |
+--+
        ^
        |
        .
        .
        .

在这个图中，每个对象都有一个`__proto__`属性，指向它的原型对象。原型对象也是一个对象，同样有一个`__proto__`属性，指向它的原型对象，以此类推，形成了原型链。

当我们访问一个对象的属性或方法时，JavaScript会先在该对象本身查找，如果找不到，就会沿着原型链向上查找，直到找到对应的属性或方法或者到达原型链的末尾（null）。