浅谈JS的原型和原型链


Posted in Javascript onJune 04, 2021

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的结果如下:

浅谈JS的原型和原型链

从上面打印的结果来看,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方法

控制台打印结果如下,这样就印证原型链逐级查找的特性。

浅谈JS的原型和原型链

总结

任何对象都可以通过原型链,也就是__proto__属性,逐级查找,最终的重点都是Object,必经之路是function。他们的关系像是用一条链子串起来一样,我们把这种关系叫做原型链。

浅谈JS的原型和原型链

以上就是浅谈JS的原型和原型链的详细内容,更多关于JS的原型和原型链的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
使用javascript访问XML数据的实例
Dec 27 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue响应式原理与双向数据的深入解析
代码解析React中setState同步和异步问题
Jun 03 #Javascript
React配置子路由的实现
手把手教你从零开始react+antd搭建项目
react antd实现动态增减表单
react 项目中引入图片的几种方式
Jun 02 #Javascript
小程序wx.getUserProfile接口的具体使用
You might like
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
php目录操作实例代码
2014/02/21 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
php导入模块文件分享
2015/03/17 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
jquery CSS选择器笔记
2010/03/29 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
印尼购物网站:iLOTTE
2019/10/16 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
公务员的自我鉴定
2013/10/26 职场文书
电子信息专业学生自荐信
2013/11/09 职场文书
证券期货行业个人的自我评价
2013/12/26 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
运动会口号16字
2014/06/07 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书