浅谈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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
关于js datetime的那点事
Nov 15 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
vue响应式原理与双向数据的深入解析
代码解析React中setState同步和异步问题
Jun 03 #Javascript
React配置子路由的实现
手把手教你从零开始react+antd搭建项目
react antd实现动态增减表单
react 项目中引入图片的几种方式
Jun 02 #Javascript
小程序wx.getUserProfile接口的具体使用
You might like
网站当前的在线人数
2006/10/09 PHP
PHP提取中文首字母
2008/04/09 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
提高PHP编程效率的方法
2013/11/07 PHP
php多文件上传下载示例分享
2014/02/20 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
python根据日期返回星期几的方法
2015/07/06 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
Python Process多进程实现过程
2019/10/22 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
促销活动策划方案
2014/01/12 职场文书
投资合作协议书
2014/04/17 职场文书
大专学生求职自荐信
2014/07/06 职场文书