Javascript中的原型链、prototype、__proto__的关系
上图是本宝宝用Illustrator制作的可视化信息图,希望能帮你理清Javascript对象与__proto__、prototype和原型链之间的关系。如果暂时看不懂也没关系,这篇文章让你从0变成1。
0、感性认识JS里的“德罗斯特效应”之原型链
如果你打开浏览器的控制面板,随便输入一个JS内置的构造器函数,比如Array,控制台输出的是一个名为Array的函数体,这好像并没有什么稀奇的,但是,当你接着输入Array.prototype,控制面板输出了一堆我们经常用到的Array构造器的方法,把目光转移到最下方,有一个叫__proto__的属性,好奇的点开,
咦~?列表列出的不是Object构造器的方法么,里边有我们非常熟悉的hasOwnProperty还有toString等方法。我们常说的一切皆对象,一切对象皆null这么玄妙的编程界哲理和这种嵌套会不会有什么关系呢?更神奇的在下边。
继续深入思考,Array是构造器,那么控制台输出的Array.prototype的所有属性中的constructor(翻译:构造器)又是指向什么?点开看看,之后就像身处德罗斯特效应中一样,__proto__和constructor,还有Array构造器中常用的方法名不断的出现,一层套一层,一层层展开,没有尽头。。。
一、满满一堂证明题课
当你也发现了JS里这种循环往复、不断嵌套的规律后,仍然不相信自己的眼睛,于是决定亲自证明一下,哦不,是好几下。(对于初学者只靠空想太烧脑,于是本宝宝做了几个GIF动图。)
1、怎么证明你就是你?
这个问题可难不倒JS中的构造器们,一个证明秒秒钟证明“我就是我”,是颜色不一样的烟火。
拿Array举例,Array.prototype中有一个constructor属性,这个属性的值就是Array构造器自己!
2、“遗传进化链__proto__”,怎么证明一切皆对象?
所有的JS内置构造器都本是对象,这要从long long ago说起。可是从什么线索开始向过去前进呢,原型链(我给他起了一个名字叫遗传进化链)就是突破口。所有JS构造器(当然不止构造器有)都有一个__proto__属性,这是原型链指针,指向进化成它的“那个”。(就像我的__proto__指针指向我父母,我父母各自的__proto__指向他们的父母... ...鬼知道最尽头的Ta经历了什么!?(手动黑人问号脸)。在进化的过程中,父母的遗传物质(属性、方法)被我的__proto__指针引用着,同时我也变异出了自己的能力(属性、方法),然后我的子代的__proto__指针又引用我的遗传物质。额!为毛突然莫名脸红~)
从上图中发现,JS内置构造器其中之一的Array原本就是一个函数,而这个函数就是Function的prototype,所以Function.prototype有的方法,JS内置构造器都有,比如call()、apply()、bind()等(其实我们自定义的函数也是继承自Function.prototype,所以我们自己也可以定义构造器,创造属于自己的小小王国)。(所以在编程的世界里模拟一个宇宙系统是有可能的,说不定我们本来就生活在被设定好的编程世界里哦。)
而Function.prototype的进化链指针又指向了Object.prototype。
3、怎么证明到头来一切都是空?
不管你从那个属性开始,连续引用__proto__的指针,最后输出的那个值就是null。
上图中,一时手残,打成大写的P了。
万物都是从无生出来的?!Hi boy 老聃的道德经han庄子 读多了吧
4、怎么证明所有JS内置构造器和自定义函数都是Function构造器的原型(prototype)。
不断强化这一认知,实践出真知。
①、String构造器的进化链指针__proto__指向Function构造器的原型
//String构造器
String.__Proto__ === Function.prototype
②、Number构造器的进化链指针__proto__指向Function构造器的原型
//Number构造器
Number.__Proto__ === Function.prototype
③、Boolean构造器的进化链指针__proto__指向Function构造器的原型
//Boolean构造器
Boolean.__Proto__ === Function.prototype
④、Array构造器的进化链指针__proto__指向Function构造器的原型
//Array构造器
Array.__Proto__ === Function.prototype
⑤、没错,Function构造器的进化链指针__proto__也指向自己的原型
//Function构造器
Function.__Proto__ === Function.prototype
⑥、Date构造器的进化链指针__proto__指向Function构造器的原型
//Date构造器
Date.__Proto__ === Function.prototype
⑦;、Error构造器的进化链指针__proto__指向Function构造器的原型
//Error构造器
Error.__Proto__ === Function.prototype
⑧、Object构造器的进化链指针__proto__指向Function构造器的原型
//Object构造器
Object.__Proto__ === Function.prototype
⑨、RegExp构造器的进化链指针__proto__指向Function构造器的原型
//RegExp构造器
RegExp.__Proto__ === Function.prototype
⑩、Event构造器的进化链指针__proto__指向Function构造器的原型
//Event构造器
Event.__Proto__ === Function.prototype
这里需要注意所有构造器的prototype都是对象(object)类型,只有Function.prototype是函数(function)类型,这是为了保证函数构造器们的__proto__指向的都是函数。
二,咦?JSON和Math哪去啦?
JS内置的构造器函数都可以使用new关键字实例化一个对象,我们称实例化后的这个对象就是某某构造器的一个实例。就像我们每一个“人”都是“人类”这个构造器函数的一个实例
//实例化一个String构造函数
var str = new String("Hi, today! ");
既然上边10个构造器函数都能这样实例化对象,那么JSON和Math是不是也可以用new 关键字实例化呢?试试看!
//尝试实例化JSON和Math两个构造器函数
var json = new JSON();
var Math = new Math();
哦No,不可以。JSON和Math不是构造器函数,他们是普通的对象。
上边提到过,只有构造器函数才能使用new 关键字实例化一个对象,而JSON和Math已经是对象了,所以我们可以不用实例化直接使用JSON和Math中的属性和方法~~(我们实例化的目就是想用实例化后的对象里的属性和方法,那么既然JSON和Math已经是对象了,就省去实例化的操作喽。当然,能实例化有能实例化的好处~)
所以JSON和Math不属于10个构造器函数,但他们12个共同属于Javascript的内置对象。
三、__proto__进化链指针设计为什么如此重要!!
javascript中为什么会有__proto__原型链的设计,不防做一个小实验先。
//实例化一个String对象
var str = new String("Hi!")
我们先实例化一个String对象并将其赋值给str这个变量,然后我们输出这个str
从str输出的内容来看,str有四个属性,分别是0、1、2、length
//我们一个个输出这些属性
console.log(str[0]) //H
console.log(str[1]) //i console.log(str[2]) //! console.log(str['length']) //3
这毋庸置疑,但是接着往下看。
//charAt()是str对象中不存在的属性方法,但是没有报错,依然可以输出!
str.charAt(0) // 输出'H'
charAt()是str对象中不存在的属性方法,但是没有报错,依然可以输出!
这是为什么?这就是进化链__proto__的用处。
str这个对象本身的确没有charAt()这个方法,但是str的进化链上存在这个属性方法,那么charAt()这个方法在进化链的那个节点上呢?
哦~,原来String.prototype拥有charAt这个方法,而str的__proto__指针指向String.prototype
有小伙伴就问了,“那为什么我爷爷写得一手好毛笔字,可我却没遗传这一点呢?”“呵呵”
这么说的话,str.__proto__.__proto__指向的对象所拥有的属性str也都可以直接用喽?答案是肯定的!
看到str.__proto__.__proto__指向的对象所拥有的属性中有一个hasOwnProperty属性方法了么,str可以直接使用这个属性方法。
在验证之前先说下str.__proto__.__proto__指向了谁?指向的是Object的prototype属性。
str.__proto__.__proto__ === Object.prototype // true
Object.prototype.hasOwnProperty()属性方法用来检验一个对象是否自己拥有一个属性而非通过进化链__proto__继承来的属性。
好的,实验开始:
//检查str是否拥有length属性
str.hasOwnProperty('length') //true
//检查str是否拥有0属性(str.charAt(0)的输出是'H')
str.hasOwnProperty(0) //true //检查str是否拥有1属性 str.hasOwnProperty(1) //true //检查str是否拥有2属性 str.hasOwnProperty(2) //true //检查str是否拥有3属性(str的length是3,所以索引值从0开始,所以索引最大是2,所以没有3这个属性) str.hasOwnProperty(3) //false //str是否拥有hasOwnProperty这个属性呢?答案是否定的。 str.hasOwnProperty('hasOwnProperty') //false
四、结语
现在再来看这张图,是不是思路清晰多了呢!
当你弄清楚了原型链(我喜欢叫他进化链)__proto__,prototype之间的关系,还有Javascript中12个内置对象,其中10个函数类型,2个对象类型。再来学习这12个内置对象的属性和属性方法是不是如鱼得水,心里跟明镜似的~
对于Javascrip初学者,一时半会肯定还是搞不清楚,唯一的办法就是多看、多想、多模仿、多创新、多总结、多分享~,学习的本质无非就是这些嘛,教育的本质无非就是教会你用学习的本质学习你所感兴趣的嘛。
Javascript中的原型链、prototype、__proto__的关系相关推荐
- Javascript中的原型链,__proto__和prototype等问题总结
1.js中除了原始数据类型 都是对象. 包括函数也是对象,可能类似于C++函数对象把 应该是通过解释器 进行()操作符重载或其他操作, 用的时候把它当函数用就行 但是实际上本质是一个对象 原型也是一个 ...
- JavaScript -- 对象与原型链 [[Prototype]]
一.第三章:对象 1.属性描述符(数据描述符) 可以使用 Object.getOwnPropertyDescriptor( myObject, "a" ); 获取myObject对 ...
- 理解JavaScript中的原型与原型链
理解JavaScript中的原型与原型链 原型链是一种机制,指的是JavaScript中每个内置的对象都有一个内置的__proto__属性指向创建它的构造函数的prototype(原型)属性.原型链的 ...
- 一文读懂原型链 prototype和__proto__详解
目录 1.原型对象 prototype 2.prototype 和 __proto__ 3.原型链 4.补充 5.原型链总结 1.原型对象 prototype 我们首先总结一下原型对象的作用: 原型对 ...
- JavaScript中的原型(prototype)与继承
在JavaScript中,原型是用来模仿其他「类」语言继承机制的基础.原型并不复杂,原型只是一个对象. 一.原型对象 1.1 什么是原型对象 每当我们创建了一个函数后,这个函数就拥有了一个protot ...
- 对Javascript 类、原型链、继承的理解
一.序言 和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承 ...
- JavaScript中的原型和继承
请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...
- 浅谈JavaScript继承与原型链
对于使用过基于类的语言(如java或C++)的开发人员来说,JavaScript有点令人困惑,因为它是动态的,并且本身不提供一个class实现. 在(es5/es6)中引入class关键字,但那只是语 ...
- JavaScript简餐——原型链是什么?
文章目录 前言 一.原型链 二.原型链示例 二.示例图解 总结 前言 写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript高级程序设计(第4版)> ...
最新文章
- Java项目构建基础:统一结果,统一异常,统一日志(好文推荐)
- 闲鱼亿级商品结构化背后的思考和演进
- Cookies工作原理
- window用ssh连接本机虚拟机中的ubuntu
- 这边本来有1个人,现在没了:你有没有想过有一天自己也会被取代
- 敏捷开发日常跟进系列之三:故事板,看板
- steam密码文件在哪里_如何将您的Steam库无痛地移动到另一个文件夹或硬盘驱动器...
- ansible模块--setup模块
- sas字段有html脚本,sas 实现自动化报表格式之定性变量
- vue开发完整企业购物商城集成支付宝和微信登陆支付3步实现登陆
- CodeForces 379C -- D - New Year Ratings Change
- 3dsMax学习笔记06_用VRayMtl材质制作室外雕塑
- 无刷新假象 实现简易文件上传
- 排卵计算机在线,排卵期(排卵日计算器在线查询)
- php getimagesize svg,getimagesize
- JS字符串和数字相加结果是什么?
- ipad分屏_第九期procreate教程|分屏技巧篇+超好用的iPad软件推荐
- Flutter练习:gridview分页
- 很有意思的思维方式:直线思维和曲线思维
- 【性能监控】计算 FMP(First Meaningful Paint)
热门文章
- 机器学习评价指标AUC计算公式
- 【灌水】天草逆向, esp定律脱壳
- 面试官:Redis 如何实现每周热评功能?说说思路!
- Excel - VBA -复制粘贴 【Ctrl+v,Ctrl+c类型】
- MongoDB(NoSQL)数据库入门及基本操作
- 线性插值(Linear Interpolation):线性插值、双线性插值
- 函数名前加static与不加static的区别
- c语言砍头游戏,太牛了!给皇帝玩一个小游戏,就让他接受了一个有砍头之罪的建议...
- 测试高考体育成绩的软件,高考体育测试提前准备!考生最关心的评分标准等问题解答...
- libhv tcp实战小项目