【JavaScript】一文了解JS原型与原型链

🍈作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🍇个人主页：亦世凡华、的博客

🍓系列专栏：JavaScript专栏

🥝推荐一款模拟面试刷题神器🔥：点击跳转进入网站

目录

🍇原型(prototype)

🍈显示原型与隐式原型

🍇原型链

🍈原型链属性问题

🍉原型链 instanceof 使用

🍊练习

---

🍇原型(prototype)

每一个函数都有一个 prototype 属性，它默认指向一个Object空对象(即称为：原型对象)。

原型对象中有一个属性 constructor ，它指向函数对象。

给原型对象添加属性(一般是方法) ===> 实例对象可以访问。

有的时候我们想要在所有已经存在的对象添加新的属性或方法。

另外，有时候我们想要在对象的构造函数中添加属性或方法。

使用 prototype 属性就可以给对象的构造函数添加新的属性：

🍈显示原型与隐式原型

每一个函数 function 都有一个 prototype，即显示原型。默认指向一个空的 Object 对象。

每个实例对象都有一个 __proto__ ，可称为隐式原型。

对象的隐式原型的值 为其对应 构造函数的显示原型的值。

总结：

函数的 prototype 属性：在定义函数时自动添加的，默认值是一个空的 Object 对象。

对象的 __proto__ 属性：创建对象时自动添加的，默认值为构造函数的 prototype 属性值。

程序员能直接操作显示原型，但不能直接操作隐式原型(ES6之前)。

🍇原型链

原型链(本质为：隐式原型链，作用：查找对象的属性或方法)，访问一个对象的属性时，先在自身属性中查找，找到返回；如果没有，再沿着 __proto__ 这条链向上查找，找到返回；如果最终没找到，返回 undefined。

总结：

        JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

🍈原型链属性问题

读取对象的属性值时：会自动查找到原型链中查找；设置对象属性时：不会查找原型链，如果当前对象中没有此属性，直接添加此属性值并设置其值；方法一般定义在原型中，属性一般通过构造函数定义在对象本身上。

🍉原型链 instanceof 使用

表达式：A instanceof B ；如果B函数的显示原型对象在A对象的原型链中，返回true，否则返回false；Function是通过new自己产生的实例。

🍊练习

其实现原理如下图所示（图有点草，凑合看吧哈哈）

🍃JavaScript的学习还是要以多练习为主，想要练习JavaScript的朋友，推荐可以去牛客网看一看，链接：牛客网 里面的IT题库内容很丰富，属于国内做的很好的了，最重要的是里面的资源是免费的，是课程+刷题+面经+求职+讨论区分享，一站式求职学习网站，感兴趣的可以去看看。