浅谈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 encodeURI 和encodeURIComponent
Dec 04 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
webpack的移动端适配方案小结
Jul 25 Javascript
vue响应式原理与双向数据的深入解析
代码解析React中setState同步和异步问题
Jun 03 #Javascript
React配置子路由的实现
手把手教你从零开始react+antd搭建项目
react antd实现动态增减表单
react 项目中引入图片的几种方式
Jun 02 #Javascript
小程序wx.getUserProfile接口的具体使用
You might like
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
浅析Ajax语法
2016/12/05 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
Python 处理数据的实例详解
2017/08/10 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
Python日志模块logging基本用法分析
2018/08/23 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
python如何更新包
2020/06/11 Python
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
计算机专业个人求职信范例
2013/09/23 职场文书
代理商会议邀请函
2014/01/27 职场文书
请假条格式范文
2014/04/10 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis