浅谈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 定位input元素的几种方法小结
Jul 28 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
JS表的模拟方法
Feb 05 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
vue中post请求以a=a&b=b 的格式写遇到的问题
Apr 27 Javascript
vue响应式原理与双向数据的深入解析
代码解析React中setState同步和异步问题
Jun 03 #Javascript
React配置子路由的实现
手把手教你从零开始react+antd搭建项目
react antd实现动态增减表单
react 项目中引入图片的几种方式
Jun 02 #Javascript
小程序wx.getUserProfile接口的具体使用
You might like
PHP中捕获超时事件的方法实例
2015/02/12 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
Python深入06——python的内存管理详解
2016/12/07 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
三好学生自我鉴定
2013/12/17 职场文书
找工作最新求职信
2013/12/22 职场文书
国旗下演讲稿
2014/05/08 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
美术教师求职信范文
2015/03/20 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
vue组件vue-esign实现电子签名
2022/04/21 Vue.js