『跟着老谭学 JavaScript』使用原型

原型是什么

我们创建的每个函数都有一个 prototype 属性,这个属性是一个引用,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

为什么要使用原型

我们知道通过构造函数,我们可以方便地创建对象,但同时也存在一个问题,那就是每个方法都要在每个实例中重新创建一遍

<script src="https://gist.github.com/zhiwei1988/d1ac7d5cb25b1529a5df651469eeb76b.js">
</script>

使用原型对象的好处是可以让所有实例共享它所包含的属性和方法。

组合使用构造函数模式和原型模式

单纯地使用原型模式存在的问题:

  1. 所有实例在默认情况下都取得相同的属性值;
  2. 原型中所有属性都是被很多实例共享的,这一点对于包含引用类型值的属性来说,可能就不是我们想要的了。

利用构造函数和原型对象各自的特点,构造函数模式用于定义实例属性,原型模式用于定义方法和共享属性。这样即使所有实例共享同一个方法,减少代码的冗余,又使每个实例有自己特有的属性。

<script src="https://gist.github.com/zhiwei1988/6050a04a74c80501eac65f7097eb6ad9.js">
</script>

原型是动态的:任何时刻原型中添加了新的属性或方法,集成该原型的对象都能立刻使用该属性或方法。

重写原型:任何情况下,都可重写原型的属性和方法;调用对象方法时,如果在对象中找不到,将在原型中查找它。如果在对象中找到了,对象中的属性或方法会覆盖原型中的属性或方法。

建立原型链

ECMAScript 只支持实现继承,而且其实现继承主要是依靠原型链来实现的。

没错,建立原型链的目的就是为了继承。

我们先来看下构造函数、原型和实例的关系:

[图片上传失败...(image-ab70b7-1515160669449)]

  1. 每个构造函数都有一个原型对象(prototype 属性);
  2. 原型对象都包含一个指向构造函数的指针;
  3. 实例都包含一个指向原型对象的内部指针;
  4. SubType 类型的原型对象是 SuperType 类型的实例;

注意:instance.constructor 现在指向的是 SuperType,这是因为现在 instance 实例所指向的原型对象中并没有指向构造函数的指针,它是 SuperType 类型的一个实例,这个实例中又存在指向原型对象的指针,这个原型对象所指向的构造函数是 SuperType。

确定原型和实例的关系

有两种方式可确认原型和实例的关系:

alert(instance instanceof SubType);
alert(SubType.prototype.isPrototypeOf(instance));

原型链的问题

包含属性值的原型对象,其属性值会被所有实例共享,而这也正是为什么要在构造函数中,而不是在原型对象中定义属性的原因。在通过原型来实现继承时,原型实际上会变成另一个类型的实例。于是,原先的实例属性也就顺理成章地变成了现在的原型属性了。下列代码可以用来说明这个问题:

<script src="https://gist.github.com/zhiwei1988/b4b5d685c0a17479083f9b615db02c38.js">
</script>

组合继承

组合继承使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。下面来看一个例子。

<script src="https://gist.github.com/zhiwei1988/597291e4ebe0fd6c63497f9446d28929.js">
</script>

组合继承避免了原型链和借用构造函数的缺陷,并结合了它们的优点,是 JavaScript 中最常用的继承模式。而且,instanceof 和 isPrototypeOf() 也能够用于识别基于组合继承创建的对象。

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

推荐阅读更多精彩内容