大白话讲 – 原型和原型链

啊~~~ 前端面试三座山，闭包、原型和线程😂😂😂

面试八股文必背的就是这些个东西，不就是这几个嘛，今天咱们来说说我对原型的理解

看到上面这图，多少你就能有点意思出来，但是感觉还是很稀里糊涂的。

你看豆丁兽是蓝色的，V仔兽也是，后面的正常进化、装甲进化、合体进化、合体的究极进化 他都保留的蓝色的部分。还有什么尾巴、俩耳朵、等等特征都是一致。

我们把豆丁兽作为起始点的话，后面一系列就是在他的基础上进行了进化、装甲、合体等操作。除去异常进化( Object.create(null) )以外，你总归保留豆丁兽的一些特征，就好像你创建的js对象，都会有 toString 属性一样。

重点来了！！！

你怎么知道你爹是你爹？

比如知名小品人陈佩斯和他儿子，都不用去基因检测我就敢笃定他们是父子俩，但是对其他一些看起来不明显的人，我们可能需要进行基因检测。

那么，原型(prototype)就是一段基因，原型链就是一个完整的基因，可以向上溯源。

概念

js的世界里，万物皆对象。这句话已经都听烂了，但是呢还是得说。而对象的话又会有很多的内置属性，其中就有一个比较特殊的属性 [[prototype]] ，它就是原型，不过是隐式原型，我们可以通过 __proto__ 去获取。有隐式那就有显式的，也就是 prototype 。对于这些东西，我们只要记住这几点。

1. 创建的对象没有显式原型 prototype ，只有隐式原型 __proto__

let obj = {}
obj.prototype === undefined  // true

2. 可构造函数函数被定义时，自带显式原型prototype

function Father() {}
Father.prototype  // {constructor: ƒ}

3. Object.prototype 没有 __proto__ ，很容易理解，因为它是根源。
4. 对象的显式原型 prototype 中的构造器 constructor 是对自己本身的引用。这个点大白话来说，就是你的每一个基因都可以克隆一个一模一样的你（这是伪科学，别当真，就是举个例子）。

图解分析

网上有一个关于原型很详细的图。看懂了，你也就懂了。图我放在下面了

这不纯纯折磨人吗？所以我来给重新画了一张

enmmmmm 好像我也就是加了个中文备注

所以，看到了这里，我们好像也不用纠结原型是什么。他就是一个属性，它的 __proto__ 是它构造函数的 prototype 。

就好像，你的身体里有你爸的信息（其实不算是很贴切，暂时就想到这样） 仅此而已。

进阶讲解

到了这里，你应该就知道什么是原型了吧？

看起来也并不是什么很复杂的东西啊？为啥面试的时候都问这个呢？

因为从它这里，还可以拓展更多的东西，最典型的一个问题，就是如何实现继承，这也就扯到了我们第二个问题。什么是原型链。

这个玩意其实在上面的图里也已经体现出来了，就是那一条条的线啊，不就是链子吗？

举个简单的例子

const obj = {}
obj.toString()

赋值的不是一个空对象吗？为啥会有 toString ？就是因为他爹或者它祖宗有这个本事，遗传给了他，龙生龙凤生凤，老鼠的儿子会打洞。当执行代码的时候，发现它自己没有这个属性，就顺着原型挨个往上去找。所以啊，你可以通过基因技术，进行强行改造。有很多有趣的库，就是通过修改原型，来实现一些有趣的代码。
写个最简单的例子体验一下。

Object.prototype.toString = function(name){
   console.log('Hi~' + name)
}

const o1= {}

o1.toString('zss') // Hi~zss

那看到这里，就明白继承如何实现的了吗？

对，就是想办法把你需要的东西给挂载到它的原型相关的属性上去。

• 可以直接在原型上新增属性的原型链继承
• 可以是修改构造函数的构造函数继承
• 可以是将原型链+构造器一起修改的组合继承
• 还有就是组合继承优化版的寄生组式合继承
  等等等等，你去看他们的实现方式的时候，都是对它的原型、构造函数下手。

总结

很多时候，不懂这个知识点，是因为它有点圈圈绕绕的。所以我们应该用尽量贴近我们常识的东西去理解，也许会加深我们的印象。以后再提到原型原型链。我是我爹的儿子，我的基因里有我爹的信息，根据生物进化的规律，我爹先天会的我都会，后天的另说。谁要是对我进行了基因改造，那我可能就更牛逼了，我可能还有蜘蛛吐丝的能力。想想就很棒~

最后，上面的内容纯属我的个人理解，对于一个只有两年半经验的开发来说，也许还有很多不足的地方。如果发现了不对的地方还请指正，我会第一时间进行修改~

努力！奋斗！

再再再废话一句，一个基于Vue3的 Material design 移动端组件库
varlet 希望大佬们可以点个赞~感谢