博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS基础—原型对象的那些事(二)
阅读量:6367 次
发布时间:2019-06-23

本文共 1797 字,大约阅读时间需要 5 分钟。

上一篇讲了

①原型对象是什么;
__proto__prototypeconstructor的关系;
③原型对象的作用;
④原型对象带来的一些需要注意的问题;

没理解的可以再复习一下。

传送门:

今天讲一下原型链以及原型链的关系图。

原型链是什么

每个对象都有一个__proto__属性,指向对象的原型。

ps:准确的说,是每一个实例都有一个[[Prototype]]属性,指向原型对象。这是一个隐式属性,存在但是我们的脚本访问不到,不过浏览器厂商大部分都支持一个__proto__属性,用来显示指向原型,虽然能用,但__proto__不是ECMA中的规范。

原型的值可以是一个对象,也可以是null。如果它的值是一个对象,那么这个对象也一定有自己的原型。这样就形成了一条线性的链,我们称之为原型链

当我们在对象上调用一个属性或者方法时,会先在这个对象上寻找,没有的话就去它的原型对象上找,原型对象上没有就去原型对象的原型对象上找,一直找到原型对象为null为止,没有的话就是undefined

简而言之,对象寻找一个属性会沿着原型链向上寻找,直到原型链的顶端。

还是以上一篇的Person为例

function Person(name) {    this.name = name}Person.prototype.sayName = function() {    console.log(this.name)}var person = new Person("张三")

我们先来画一个简单的关于原型的关系图

图片描述

以上是实例构造函数原型对象三者的关系图。

PS: prototype只是构造函数上的一个属性,它是一个指针,指向原型对象,并不表示Person.prototype就是原型对象。这里将Person.prototype认为是原型对象,是为了方便理解,需要注意哦。

看不懂的同学去复习上一篇的内容,看懂的我们继续。

注意点一

原型对象也是对象,是对象就有__proto__属性,指向它的原型对象。

在上一个例子中,Person.prototype就是一个对象,这个对象可以说是原生Object构造函数的实例,所以

Person.prototype.__proto__ === Object.prototype

Object.prototype也是一个对象,所以它也有__proto__属性,不过它的__proto__指向null,也就是原型链的顶端,再往上就没有了。

重新补充一下关系图

图片描述

看懂的我们继续

注意点二

任何函数都可以说是原生Function构造函数的实例。

所以Person构造函数是Function构造函数的实例。

Person.__proto__ === Function.prototype

继续我完善我们的关系图

图片描述

可能有人疑惑,Person不是函数吗,函数怎么也有__proto__,函数不是只有prototype吗?

因为函数本质也是对象啊,在JS的世界里,万物皆对象,所以函数有__proto__没毛病。

注意点三

Function.prototype也是对象,所以和Person.prototype一样,Function.prototype可以说是原生Object构造函数的实例,所以

Function.prototype.__proto__ === Object.prototype

补充我们的图(红色的线)

图片描述

注意点四

FunctionObject都是构造函数,根据第二点任何函数都可以说是原生Function构造函数的实例,那么

Function.__proto__ === Function.prototypeObject.__proto__ === Function.prototype

完善我们的图(蓝色的线),大功告成。

图片描述

恩,就是这么神奇,FunctionFunction的实例。。。

以上就是原型链的关系图,将这个图弄懂,原型对象的知识基本就掌握了。

虽然在真实场景中,这些知识用到的没这么复杂,但是掌握了最基础的知识,将来出现问题时,就能更快的找到问题的原因。

对于新手而言,原型链和作用域链经常搞混,this和静态作用域不知道在场景中怎么使用,确实是很头疼的问题,但这也许就是js的魅力所在吧。有时间的话再写一下作用域的知识~

转载地址:http://uprma.baihongyu.com/

你可能感兴趣的文章
Mysql索引的类型
查看>>
Eclipse debug模式 总是进入processWorkerExit
查看>>
Nginx的https配置记录以及http强制跳转到https的方法梳理
查看>>
[每天五分钟,备战架构师-1]操作系统的类型和结构
查看>>
springcloud(十三):Eureka 2.X 停止开发,但注册中心还有更多选择:Consul 使用详解...
查看>>
关于Boolean类型做为同步锁异常问题
查看>>
TestLink运行环境:Redhat5+Apache2.2.17+php-5.3.5+MySQL5.5.9-1
查看>>
Get File Name from File Path in Python | Code Comments
查看>>
显示本月每一天日期
查看>>
[转]java 自动装箱与拆箱
查看>>
NET的堆和栈04,对托管和非托管资源的垃圾回收以及内存分配
查看>>
think in coding
查看>>
IdHttpServer实现webservice
查看>>
HTML的音频和视频
查看>>
Unsupported major.minor version 52.0
查看>>
面对对象之差异化的网络数据交互方式--单机游戏开发之无缝切换到C/S模式
查看>>
优酷网架构学习笔记
查看>>
把HDFS里的json数据转换成csv格式
查看>>
WEEX-EROS | 集成并使用 bindingx
查看>>
广州牵引力来告诉你学编程先学什么语言好?
查看>>