闲聊

不知道各位大佬们对JS的原型和原型链接触多久弄清楚的，我这个人没什么优点，就是比较笨，看了很多文章，博客以及书籍的介绍才算清楚了这个困扰我好久的问题。那么接下来就让我为大家展开说说JS的原型和原型链😯

GO

面试官：小伙子，看你骨骼惊奇，你给我讲讲JS的原型和原型链吧 我：😳 其实一开始我出于应付面试才开始查阅资料，因为水平问题，看的内容只是懂个表皮，这样就会造成一种问题，看过之后就会忘记，因为根本没有理解，所以在这里也是希望各位伙伴不要学习我这种行为，了解一个知识点就要把他吃透。

书籍

最近在学习阅读《Tyscript入门与实战》这本书时，发现上面有对原型的介绍，那么大致内容是这样（内容较为无聊，但是阅读进去真的很有帮助）

js的对象都有原型，这个原型可以是对象，即原型对象，也可能是一个null；原型对象又有自己的原型，因此对象的原型就形成了一条原型链，原型链终止于null值；那么原型的作用其实是提供了一些共享的属性和方法，对象也是通过隐含引用的方式引用原型，隐含引用其实就是[[Prototype]]属性，所谓隐含引用关系是指，对象的原型不是对象的公共属性，因此无法通过对象属性访问来直接获取对象原型。

听着是不是很抽象，要不我们举个例子看看吧~

从例子出发

一个通俗易懂的🌰能够让我们理解的更加深刻，那么我们想象下面的情景：所谓万物皆对象，那么我们生活中会有动物这个角色，动物又有许多种类，暂且用dog和cat举例吧！

function Animal(name, age) {
   this.name = name
   this.age = age
}
Animal.prototype.speak = function (word) {
   console.log(`${this.name}---speak---${word}`)
}
var dog = new Animal('dog', 12)
var cat = new Animal('cat', 16)

从上面的代码，我们定义了一个动物的构造函数，又实例化了两个不同的动物，那么两个对象的原型其实就是构造函数，构造函数所有的属性和方法，这两个实例都有，这也就是书上所说的原型提供共享属性和方法

 dog.speak('wowo') // dog---speak---wowo
 cat.speak('miao') // cat---speak---miao

那么我们打印一下实例化对象会是怎样呢？

就以dog为例，不难看出，书上所说的隐含引用就是[[Prototype]]这个属性

原型作用

啰啰嗦嗦，那么原型作用到底怎样？

原型的作用：主要体现在查询对象某个属性或方法时会沿着原型链依次向后搜索

其实也就是说，当访问对象属性时，比如访问dog的color属性，现在自身查找，没有就会沿着原型对象animal查找，那么animal没有color属性，就会继续沿着原型链查找，找到尽头null值没有找到，则返回undefined。

console.log(dog.color) // undefined

按他这么说，那么假如我们在最顶层Object上定义一个color，是不是访问查找这条原型链会查得到呢？

 Object.prototype.color = 'pink'
 console.log(dog.color) // pink

事实证明我们猜想是对的✅，多说一句如果当前对象和原型具有相同的属性，那么当前对象属性的优先级会更高呢~

拓展

其实我还不太明白大家所说的__proto__ 和 prototype是怎么回事，看了一些文章才了解到是这样滴：

• 前者针对于对象，而后者针对于函数，
• 那么对象又是函数所生成的
• 对象的__proto__指向函数的prototype

console.log(dog.__proto__ === Animal.prototype) // true

那么其实，对象的__proto__属性就是从它的函数prototype得来的，那么prototype又是什么？

prototype

prototype其实是一个类型为object的对象，它具有construct和__proto__属性， 其中construct指向函数自身, 而__proto__则指向Object.prototype

总结

其实说了这么多，原型其实就是个对象，那么原型链就是对象的原型所形成的链条，在这条链条我们去寻找我们所需要的内容，如果找不到就返回undefined；我所理解的大概就是这样，如果有需要补充的，随时欢迎大佬进行补充，我们共同进步哦！