浅谈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 ajax 用户无刷新登录方法详解
Apr 28 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
JS实现多选框的操作
Jun 24 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 Javascript
vue响应式原理与双向数据的深入解析
代码解析React中setState同步和异步问题
Jun 03 #Javascript
React配置子路由的实现
手把手教你从零开始react+antd搭建项目
react antd实现动态增减表单
react 项目中引入图片的几种方式
Jun 02 #Javascript
小程序wx.getUserProfile接口的具体使用
You might like
php 删除数组元素
2009/01/16 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
php实现可逆加密的方法
2015/08/11 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
通过C++学习Python
2015/01/20 Python
python超简单解决约瑟夫环问题
2015/05/12 Python
Python多进程机制实例详解
2015/07/02 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
Python_LDA实现方法详解
2017/10/25 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
EJB与JAVA BEAN的区别
2016/08/29 面试题
小学生读书感言
2014/02/12 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
爱心募捐感谢信
2015/01/22 职场文书
2015年党小组工作总结
2015/05/26 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书