浅谈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 相关文章推荐
28个JS验证函数收集
Mar 02 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
vuex的module模块用法示例
Nov 12 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
vue响应式原理与双向数据的深入解析
代码解析React中setState同步和异步问题
Jun 03 #Javascript
React配置子路由的实现
手把手教你从零开始react+antd搭建项目
react antd实现动态增减表单
react 项目中引入图片的几种方式
Jun 02 #Javascript
小程序wx.getUserProfile接口的具体使用
You might like
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
python基于SMTP协议发送邮件
2019/05/31 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
Python: 传递列表副本方式
2019/12/19 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
优秀员工获奖感言
2014/03/01 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
天坛导游词
2015/02/02 职场文书
项目建议书
2015/02/04 职场文书
青岛海底世界导游词
2015/02/11 职场文书
国富论读书笔记
2015/06/26 职场文书