浅谈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时遇到的一些小问题
Dec 06 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
vue响应式原理与双向数据的深入解析
代码解析React中setState同步和异步问题
Jun 03 #Javascript
React配置子路由的实现
手把手教你从零开始react+antd搭建项目
react antd实现动态增减表单
react 项目中引入图片的几种方式
Jun 02 #Javascript
小程序wx.getUserProfile接口的具体使用
You might like
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
php桌面中心(二) 数据库写入
2007/03/11 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
jquery validate demo 基础
2015/10/29 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
express express-session的使用小结
2018/12/12 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
Python实现图像几何变换
2015/07/06 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
学校后勤人员职责
2013/12/27 职场文书
施工班组长岗位职责
2014/01/05 职场文书
宿舍违规检讨书
2014/01/12 职场文书
安全标准化实施方案
2014/02/20 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
运动会宣传口号
2014/06/09 职场文书
外贸业务员求职信
2014/06/16 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
2015员工年度考核评语
2015/03/25 职场文书
新党员入党决心书
2015/09/22 职场文书
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL