JavaScript 原型对象和原型链理解
一个例子让你彻底明白原型对象和原型链
1.
之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你没有真正的理解。最近正在读《Javascript高级程序设计》,书中对原型对象和原型链的描述让我受益匪浅,下面仅用一个对比性的例子来说明。
我们经常会这么写
function Person () {this.name = 'John';}var person = new Person();Person.prototype.say = function() {console.log('Hello,' + this.name);};person.say();//Hello,John
上述代码非常简单,Person原型对象定义了公共的say方法,虽然此举在构造实例之后出现,但因为原型方法在调用之前已经声明,因此之后的每个实例将都拥有该方法。从这个简单的例子里,我们可以得出:
原型对象的用途是为每个实例对象存储共享的方法和属性,它仅仅是一个普通对象而已。并且所有的实例是共享同一个原型对象,因此有别于实例方法或属性,原型对象仅有一份。所有就会有如下等式成立:
person.say == new Person().say
可能我们也会这么写
function Person () {this.name = 'John';}var person = new Person();Person.prototype = {say: function() {console.log('Hello,' + this.name);}};person.say();//person.say is not a function
很不幸,person.say方法没有找到,所以报错了。其实这样写的初衷是好的:因为如果想在原型对象上添加更多的属性和方法,我们不得不每次都要写一行Person.prototype,还不如提炼成一个Object来的直接。但是此例子巧就巧在构造实例对象操作是在添加原型方法之前,这样就会造成一个问题:
当var person = new Person()时,Person.prototype为:Person {}(当然了,内部还有constructor属性),即Person.prototype指向一个空的对象{}。而对于实例person而言,其内部有一个原型链指针proto,该指针指向了Person.prototype指向的对象,即{}。接下来重置了Person的原型对象,使其指向了另外一个对象,即
Object {say: function},
这时person.proto的指向还是没有变,它指向的{}对象里面是没有say方法的,因为报错。
从这个现象我们可以得出:
在js中,对象在调用一个方法时会首先在自身里寻找是否有该方法,若没有,则去原型链上去寻找,依次层层递进,这里的原型链就是实例对象的__proto__属性。
若想让上述例子成功运行,最简单有效的方法就是交换构造对象和重置原型对象的顺序,即:
function Person () {this.name = 'John';}Person.prototype = {say: function() {console.log('Hello,' + this.name);}};var person = new Person();person.say();//person.say is not a function
一张图让你秒懂原型链
其实,只需要明白原型对象的结构即可:
Function.prototype = {constructor : Function,__proto__ : parent prototype,some prototype properties: ...};
2. 总结
函数的原型对象constructor默认指向函数本身,原型对象除了有原型属性外,为了实现继承,还有一个原型链指针__proto__,该指针指向上一层的原型对象,而上一层的原型对象的结构依然类似,这样利用__proto__一直指向Object的原型对象上,而Object的原型对象用Object.proto = null表示原型链的最顶端,如此变形成了javascript的原型链继承,同时也解释了为什么所有的javascript对象都具有Object的基本方法。
3. 出处
作者:Deja0vu0
https://www.jb51.net/article/105090.htm
JavaScript 原型对象和原型链理解相关推荐
- 【javascript】对原型对象、原型链的理解
原型对象,原型链这些知识属于基础类知识.但是平时开发过程中也很少用到. 看网上的意思,原型链用于es5开发场景下的继承.es6有了类语法糖之后,就自带继承了. 通过理解,个人画了一张原型链解构的关系图 ...
- javascript原型对象、原型链、构造函数
1.原型对象(原型).原型链 先放一张在网上看到的关于原型和原型链的图,非常不错. 如果你能看懂,那就对原型链有了一定了解,如果看不懂,对照下面这几点来看图: js中所有函数都有一个prototype ...
- JavaScript 原型对象和原型链
开篇 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述.有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就 ...
- JavaScript原型对象与原型链
JavaScript原型对象与原型链 在JavaScript实际项目中,对象是十分重要的一种类型 无论是作为数据表现的一种形式或配置成工厂模式制造实例等等,这些用途在实际项目开发中都使用得非常广泛 依 ...
- java 原型图_一张图搞懂原型、原型对象、原型链
基本概念 在javascript中,函数可以有属性. 每个函数都有一个特殊的属性叫作原型(prototype) 每个对象拥有一个原型对象 [[Prototype]] / __proto__ / Obj ...
- 三张图搞懂JavaScript的原型对象与原型链
对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张 ...
- js原型对象和原型链理解
参考:https://blog.csdn.net/yucihent/article/details/79424506 文章内的图是参考一个大神的 但是找不到链接了 一. 函数对象 所有引用类型(函数, ...
- (转)认识原型对象和原型链
在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象 Object 和 函数对象 Function. 一般而言,通过 new Function 产生的对象是函数对象,其 ...
- Js 原型对象与原型链(转)
原文出处 原创作者: abruzzi 原文图文并茂,很好的说明了原型链的原理,在这里感谢原文作者把文章写的那么通俗易懂. 原型对象 每个javascript对象都有一个原型对象,这个对象在不同的解释器 ...
最新文章
- 调试应用不发愁,免安装的 curl 来帮忙
- ajax学生校验学号,ajax校验数据库数据是否存在
- C语言再学习--关键字
- python--8、面向对象的深入知识
- 微软故障转移群集服务器要求,故障转移群集概述
- eclipse加速之禁用JS、jsp等文件的语法验证
- nginx部署两个php虚拟主机,nginx服务器,fastcgi模式,添加虚拟主机(多站点)配置...
- php模拟input 的file上传文件
- 网页抓包嗅探器v1.0
- 小字符喷码机和高解析喷码机的区别
- 毫米波雷达及其应用精炼介绍
- 第十代晨风机器人,第十代机器人说明(软件+群主+成员使用说明)
- CSDN去广告,超清爽界面
- MATLAB 中的 mod() 函数
- Docker容器与本地文件相互拷贝
- 电商网上购物成为非洲人喜欢的一种新颖购物方式
- Git Bash命令行使用Git
- 《一万年以后》一段充满癫狂想象力的奇幻之旅
- php 数字 字母,怎么使用php实现数字转字母
- python生成随机个人信息——python批量生成随机信息