浅谈JS的原型和原型链
更新时间：2021年06月04日 10:54:42 作者：熊猫程序员
在原型链中，Object是顶级公民，function是一级公民，其他的是二级公民，先记住这句话，下面我们来讲解一下为什么这么说。
1.原型prototype
javascript中所有函数都具有这个属性，所有具有prototype属性的对象都是一个函数。prototype的作用是向对象添加一个方法/属性。
function persion(){}
persion.prototype.name = "xiaoming"
console.log(persion.prototype)//{name: "xiaoming", constructor: ƒ}
2.原型指针：__proto__
如果将上面persion函数生成一个实例对象Persion1，用prototype为他添加一个属性写法如下：
function persion(){}
persion.prototype.name = "xiaoming"
let Persion1 = new persion();
console.log(Persion1) //控制台结果如下
打印实例Persion1的结果如下:
从上面打印的结果来看，Persion1.__proto__.name = persion.prototype.name,也就是实例对象的__proto__属性等于其构造函数的prototype。
理解了上面之后，原型链就很好理解了，我们可以通过Persion1.__proto__.__proto__直接查找到Object的方法。这么说可能不太直观，上代码：
function persion(){}
persion.prototype.name = "xiaoming"
let Persion1 = new persion();
console.log(Persion1.__proto__.__proto__.toString) //通过原型链查找到的Object的toString方法
console.log(Object.prototype.toString)//Object上的toString方法
控制台打印结果如下，这样就印证原型链逐级查找的特性。
总结
任何对象都可以通过原型链,也就是__proto__属性，逐级查找，最终的重点都是Object，必经之路是function。他们的关系像是用一条链子串起来一样，我们把这种关系叫做原型链。
以上就是浅谈JS的原型和原型链的详细内容，更多关于JS的原型和原型链的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了js实现鼠标感应图片展示的方法,实例分析了javascript鼠标事件及样式的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了JS动画效果打开、关闭层的实现方法,可实现js控制层从中心位置打开与关闭的功能,涉及javascript操作页面元素的相关技巧,需要的朋友可以参考下2015-05-05
这篇文章主要为大家详细介绍了H5 js点击按钮复制文本到粘贴板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
本篇文章是对使用Javascript正则表达式来格式化XML内容的方法进行了详细的分析介绍，需要的朋友可以参考下2013-07-07
纯JavaScript基于notie.js插件实现消息提示特效
这篇文章主要介绍了纯JavaScript基于notie.js插件实现消息提示特效，可以制作Alert提示框，确认框和带输入的消息框，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要是对异步动态加载JS并运行的示例代码进行了介绍。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了ElementUI中Tree组件使用案例讲解,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了父节点获取子节点的字符串的方法,需要的朋友可以参考下2014-02-02
这篇文章主要为大家详细介绍了JS简易的计算器实现代码,，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要为大家详细介绍了微信小程序实现录音Record功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
最新评论