浅谈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 页面载入进度条实现代码
Feb 08 Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
vue响应式原理与双向数据的深入解析
代码解析React中setState同步和异步问题
Jun 03 #Javascript
React配置子路由的实现
手把手教你从零开始react+antd搭建项目
react antd实现动态增减表单
react 项目中引入图片的几种方式
Jun 02 #Javascript
小程序wx.getUserProfile接口的具体使用
You might like
解析php开发中的中文编码问题
2013/08/08 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
javascript 建设银行登陆键盘
2008/06/10 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
解决安装python库时windows error5 报错的问题
2018/10/21 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
python 日志 logging模块详细解析
2020/03/31 Python
python安装及变量名介绍详解
2020/12/12 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
群众路线个人整改措施
2014/10/24 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android