浅谈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 相关文章推荐
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
浅谈javascript的闭包
Jan 23 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
vue响应式原理与双向数据的深入解析
代码解析React中setState同步和异步问题
Jun 03 #Javascript
React配置子路由的实现
手把手教你从零开始react+antd搭建项目
react antd实现动态增减表单
react 项目中引入图片的几种方式
Jun 02 #Javascript
小程序wx.getUserProfile接口的具体使用
You might like
详解PHP数组赋值方法
2015/11/07 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
详解如何使用Python编写vim插件
2017/11/28 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
个人应聘自我评价分享
2013/11/18 职场文书
董事长秘书职责
2014/01/31 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
个人借款协议书范本
2014/11/17 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
httpclient调用远程接口的方法
2022/08/14 Java/Android