原型与原型链，一个步骤一个张图，通俗易懂

myzbx 2025-08-31 06:15 51 浏览

相信很多的前端对这个概念都不陌生吧。

面试八股文，可以说是必问的一道题，也是很多前端包括之前的我，也是稀里糊涂的，不知所以然。经过我多日的研究，终于肝明白了，废话不多说，直接上图。

现在看到这张图是不是头大，因为网上很多这种图，我刚开始的时候也是走马观花，直接看麻了。主要是需要自己动手体验一下这种过程，你才能明白这图意义何在。

Constructor 构造函数

构造函数应该不陌生吧（构造函数一般为了区别普通函数要求首字母大写），我们先来下一个构造函数

function Person(){}

什么是原型？原型其实就是一个对象，实例“继承”那个对象的属性，通过“继承”的这种方式，new出来的实例也有了这个属性。（“继承”这个过程是在new内部实现的）

先来说一下原型和构造函数的关系，从下图可以看到构造函数内部有一个prototype的属性，通过这个属性就能访问到原型。

let obj = {}
obj.__proto__.haha = 'gogo'
console.log(obj.haha) // "gogo"

实例对象通过_proto_就能访问到原型的属性（等会会讲到实例访问原型）。

也就是Person是构造函数，Person.prototype就是原型，那么由此可见，就得到了下面的关系图。

有了构造函数，我们就可以直接在原型上创建可以“继承”的属性，并通过new来操作它。

由此，我们又得到了下图↓

上面也说了通过_proto_可以直接访问到原型，所以如果是实例，那么就可以直接通过这个属性访问到原型，由此，我们又可以得到下面的关系图。

既然构造函数通过 prototype 来访问到原型，那么原型也应该能够通过某种途径访问到构造函数，于是乎又得到了下图。

原型同样也可以通过 __proto__ 访问到原型的原型，比方说这里有个构造函数 Person 然后“继承”前者的有一个构造函数 People，然后 new People 得到实例 p

当访问 p 中的一个非自有属性的时候，就会通过 __proto__ 作为桥梁连接起来的一系列原型、原型的原型、原型的原型的原型直到 Object 构造函数为止。

这个搜索的过程形成的链状关系就是原型链

看到 null 了吗，原型链搜索搜到 null 为止，搜不到那访问的这个属性就是不存在的：

以上就是原型与原型链、构造函数、实例之间的联系，其实并不复杂。如果你理解了这一步，你就可以去了解prototype为何会出现？真正的构造函数属性藏在哪里？