深入理解JavaScript的原型与原型链(继承)

原型的基本概念


要想真正理解js的原型和原型链的概念,必须且只要记住以下几点即可:

▶ 一切都是对象(看似如此)。

undefined, number, string, boolean四种属于简单的值类型,不是对象,使用基本类型变量可以调用方法是因为产生了包装对象(临时的)。剩下的几种情况——函数、数组、对象、null、new Number(10)都是对象,他们都是引用类型。

 所有的对象都是由函数创建。

1、函数也是一个对象,由Function函数创建。

2、var obj = { a: 10, b: 20}; var arr = [5, 'x',true]; 这类定义其实只是一个下面的语法糖而已

3、Function也是一个对象,由它自己创建,有趣吧

所有的函数都有prototype属性(原型)

注意,是函数才有prototype,普通对象没有。

函数创建时就自动带有这个属性,也就是我们讲的“原型”,这也绝对是js中最基础也是最难的部分。

这个prototype的属性值是一个对象(属性的集合,再次强调!),默认的只有一个叫做constructor的属性,指向这个函数本身。

prototype可以添加自定义属性,你可以试试Object.prototype,可以看到很多自定义的属性:

所有的对象都有__proto__。

1、所有的对象都有__proto__,指向创建它的函数的prototype,注意,你要这样来理解这句话的意思,那就是同一个函数new出来的对象的__proto__都统一指向了这个函数的prototype,根据后面要讲述的原型链规则,也就是说通过这个函数new出来的所有对象都可以直接使用该函数原型上的任意属性和方法!,因此,对于jquery的这种形式就应该能理解了

$是jQuery的简写别名,其实是一个函数。因此$div是jQuery函数创建的对象,很显然,on方法就是在jQuery.prototype上定义的属性(函数),因此所有jQuery函数创建的对象都已直接使用on方法

2、所有的函数,比如 function fn(){},都是由Function函数创建,因此fn的__proto__指向Function的prototype。

3、比较有意思的是,Function也是函数,因此它也由Function创建的,也就是说它自己创建了自己!所有Function的__proto__指向的就是Function的prototype!

4、同理,Object函数也是由Function创建,因此Object的__proto__同样指向Function的prototype!

5、prototype也是一个对象,原始prototype只有一个叫做constructor的属性,指向这个函数本身。因为prototype是一个对象,因此它也是由Object方法创建,因此它的__proto__将指向Object.prototype,如下所示:

6、但是Object.prototype却是一个特例——它的__proto__指向的是null,切记切记!

想想也觉得应该是这样吧

因此,根据上面的几条基本概念,从这段简单的代码我们可以画出这样一条关系链图:



原型链


以上图为例,我们来对原型链进行描述。

首先person是个函数,我们在它的原型(prototype)上添加了一个getName的方法(函数属性)

然后zs是person new出来的一个对象,因此zs的__proto__指向person的prototype。

person.prototype作为一个普通对象,是有Object函数创建的,因此它的__proto__指向Object.prototype

我们看到,zs对象本身没有getName方法,那它是怎么访问到的?

原来在当前对象中没有找到某个属性时,它会顺着__proto__属性依次向上查找,知道找到为止!因此,

getName属性在zs对象中没有找到,就会继续找zs.__proto__,也就是person.prototype,很显然,这里找到了,就不会再向上查找了

hasOwnProperty属性显然zs对象中没有找到,就会继续找zs.__proto__,也就是person.prototype,很显然,person.prototype中也找不到,于是继续向上在person.prototype.__proto__中找。person.prototype是一个普通对象,它是由Object方法创建的,因此person.prototype.__proto__就是Object.prototype,很显然,Object.prototype里面已经定义了hasOwnProperty方法(属性),因此在这里也找到了。

上面这种查找形式就成为原型链。就像一根链条一样,依次向上链接起来。这也是ES5及之前的所谓“继承”实现。

原型链访问顺序

我们注意到,在getName方法中是直接使用this.name来获取zs对象的name值得,这就是说js在访问原型对象的方法时,直接把当前对象应用到了这个方法的上下文中。也就是相当于:person.prototype.getName.apply(zs)

总结


要想正确理解掌握原型和原型链的概念,必须把上面讲的最核心和基本的几个概念理解和记住,否则看再多的案例也只会云里雾里,晕晕乎乎的,越加无法理解,靠死记硬背肯定是不行的。并且只要熟练掌握和牢记上面说的这几个概念,不管遇到任何变着花样的原型考查,都一定能够正确理解。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容