浅谈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 相关文章推荐
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
javascript中验证大写字母、数字和中文
Jan 15 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
javascript每日必学之继承
Feb 23 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
vue--vuex详解
Apr 15 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
vue响应式原理与双向数据的深入解析
代码解析React中setState同步和异步问题
Jun 03 #Javascript
React配置子路由的实现
手把手教你从零开始react+antd搭建项目
react antd实现动态增减表单
react 项目中引入图片的几种方式
Jun 02 #Javascript
小程序wx.getUserProfile接口的具体使用
You might like
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
MySQL相关说明
2007/01/15 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
vue脚手架及vue-router基本使用
2018/04/09 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
深入理解Python中的super()方法
2017/11/20 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
如何更优雅地写python代码
2019/07/02 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
药学专业大专生的自我评价
2013/12/12 职场文书
六年级数学教学反思
2014/02/03 职场文书
党员目标管理责任书
2014/07/25 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
保证书格式
2015/01/16 职场文书
回复函范文
2015/07/14 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js