博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用小猪佩奇说明Javascript的原型和原型链
阅读量:5966 次
发布时间:2019-06-19

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

  没错,我就是标题党!你已经成功被我骗进来了。来都来了,那就聊聊再走呗!接下来就听我一本正经地跟你说道说道。

  Javascript的原型是这门语言的一个重点和难点。看过很多大佬写的解释Javascript原型的文章,但是很多对于初学者其实不是很友好,看完之后还是云里雾里。我虽然不敢说能把这个东西解释的很清楚,但是作为一个前端菜鸟,我可能更知道大家在读文章的时候会卡在哪一步,所以希望本文能够帮助到大家。

  在文章开始,我先明确几个概念,这里如果你觉得不好理解,就先牢牢地记住它,然后继续往下阅读,读完你就会豁然开朗,相信我!另外,一定要每行每字去读,勿跳着读,博主就犯过这样的错误,导致越读越糊涂,我这里也尽量压缩字数,保证你读的每个字都是有用的。答:“你都忽悠半天了赶紧开始吧!”

  • prototype :每个函数都会有这个属性,这里强调,是函数,普通对象是没有这个属性的(这里为什么说普通对象呢,因为JS里面,一切皆为对象,所以这里的普通对象不包括函数对象)。它是构造函数的原型对象;
  • __proto__ :每个对象都有这个属性,,这里强调,是对象,同样,因为函数也是对象,所以函数也有这个属性。它指向构造函数的原型对象;
  • constructor :这是原型对象上的一个指向构造函数的属性。

先看代码

// Pig的构造函数function Pig(name, age) {    this.name = name;    this.age = age;}// 创建一个Pig的实例,小猪佩奇var Peppa = new Pig('Peppa', 5);复制代码

敲黑板,划重点,理解这一句整个问题的关键,请多重复几遍。:在实例化的时候,prototype上的属性会作为原型对象赋值给实例。 也就是说小猪佩奇的原型,就是从Pig.prototype继承来的写成代码就是这个样子Peppa.__proto__ === Pig.prototype

Pig是一个函数对象,它是Function对象的一个实例,所以
Pig.__proto__ === Function.prototype一定为true。

我们在上面提到了constructor这个属性,它位于原型对象上并且指向构造函数,所以
Pig.prototype.constructor === Pig

至此,我大致捋了一遍这三个属性的关系,我们再顺着这条链继续往深挖一挖。
Function.prototype,也就是Function的原型对象。这个原型对象的__proto__指向了
Object.prototype。打破砂锅问到底,
Object.prototype.__proto__又指向谁,JS世界里万物皆对象,Object似乎已经到了原型链的顶端,果然不出我所料,它确实是null。:

你可能要吐槽了,说好的讲明白呢,这一坨都被你绕糊涂了,一张图胜过千言万语:

解释一下上面的图。先看蓝色那条线,Pig,Function和Object的构造函数是Function的实例,所以它们的__proto__均指向Function.prototype。这就印证了敲黑板说的那句话,prototype属性会作为原型对象赋值给实例,每个对象的__proto__都指向原型对象(处于最顶层的Object.prototype除外)。

再看绿色那条,Pig和Function的原型对象是Object的实例,所以它们的__proto__均指向了Object.prototype,也就是Object的原型对象。

浅蓝色的线表明了原型的constructor指向了构造函数。

Emmmm,其实也没那么复杂对不对?接着说一下原型链。正如你在上面图中所看到的,JS在创建对象的时候,会在新对象上产生一个__proto__的属性,这个属性指向了它构造函数的原型的prototype。由此一级一级向上直到到达Object.prototype.proto === null的这个链条我们称之为原型链。

关于继承的概念,本来想写在一起的,后来想想,内容过多只会让文章成为收藏不看系列,所以这块的内容放在以后的文章里详解。各位看官,我想我大致讲明白了原型和原型链的概念,有什么错误还恳请批评指正。

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

你可能感兴趣的文章
Devexpress 15.1.8 Breaking Changes
查看>>
Java B2B2C多用户商城 springcloud架构- common-service 项目构建过程(七)
查看>>
ElasticSearch Client详解
查看>>
新零售讲堂之时代下的传统零售业,何去何从?
查看>>
c++读取和写入TXT文件的整理
查看>>
linux安全问答(1)
查看>>
mybatis update返回值的意义
查看>>
expdp 详解及实例
查看>>
解读最具O2O属性—哈根达斯微信企业号的成功之道
查看>>
Extjs4.x (MVC)Controller中refs以及Ext.ComponentQuery解析
查看>>
Server-01 How to Find the Remote Desktop Port
查看>>
Java--接口、抽象与继承
查看>>
通过IP判断登录地址
查看>>
Oracle闪回技术
查看>>
CentOS 7 配置yum本地base源和阿里云epel源
查看>>
python 学习导图
查看>>
生成树
查看>>
深入浅出JavaScript (五) 详解Document.write()方法
查看>>
Beta冲刺——day6
查看>>
Comet OJ - Contest #3 题解
查看>>