資訊專欄INFORMATION COLUMN
摘要：下面來(lái)看一個(gè)例子繼承屬性繼承方法在這個(gè)例子中構(gòu)造函數(shù)定義了兩個(gè)屬性和。組合繼承最大的問(wèn)題就是無(wú)論什么情況下都會(huì)調(diào)用兩次超類型構(gòu)造函數(shù)一次是在創(chuàng)建子類型原型的時(shí)候另一次是在子類型構(gòu)造函數(shù)內(nèi)部。
組合繼承
組合繼承(combination inheritance),有時(shí)候也叫做偽經(jīng)典繼承,指的是將原型鏈和借用構(gòu)造函數(shù)的技術(shù)組合到一塊,從而發(fā)揮二者之長(zhǎng)的一種繼承模式。其背后的思路是使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承,而通過(guò)借用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。這樣,既通過(guò)在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用,又能夠保證每個(gè)實(shí)例都有它自己的屬性。下面來(lái)看一個(gè)例子：
function SuperType (name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType (name, age) {
SuperType.call(this, name); //繼承屬性
this.age = age;
}
SubType.prototype = new SuperType(); //繼承方法
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function () {
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27
在這個(gè)例子中,SuperType 構(gòu)造函數(shù)定義了兩個(gè)屬性:name 和 colors。SuperType 的原型定義了一個(gè)方法 sayName()。SubType 構(gòu)造函數(shù)在調(diào)用 SuperType 構(gòu)造函數(shù)時(shí)傳入了 name 參數(shù),緊接著又定義了它自己的屬性 age。然后,將 SuperType 的實(shí)例賦值給 SubType 的原型,然后又在該新原型上定義了方法 sayAge()。這樣一來(lái),就可以讓兩個(gè)不同的 SubType 實(shí)例既分別擁有自己屬性——包括 colors 屬性,又可以使用相同的方法了。組合繼承避免了原型鏈和借用構(gòu)造函數(shù)的缺陷,融合了它們的優(yōu)點(diǎn),成為 JavaScript 中最常用的繼承模式。而且,instanceof和 isPrototypeOf()也能夠用于識(shí)別基于組合繼承創(chuàng)建的對(duì)象。
寄生組合式繼承前面說(shuō)過(guò),組合繼承是 JavaScript 最常用的繼承模式;不過(guò),它也有自己的不足。組合繼承最大的問(wèn)題就是無(wú)論什么情況下,都會(huì)調(diào)用兩次超類型構(gòu)造函數(shù):一次是在創(chuàng)建子類型原型的時(shí)候,另一次是在子類型構(gòu)造函數(shù)內(nèi)部。沒(méi)錯(cuò),子類型最終會(huì)包含超類型對(duì)象的全部實(shí)例屬性,但我們不得不在調(diào)用子類型構(gòu)造函數(shù)時(shí)重寫(xiě)這些屬性。再來(lái)看一看下面組合繼承的例子。
function SuperType (name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function () {
alert(this.name);
};
function SubType (name, age) {
SuperType.call(this, name); //第二次調(diào)用 SuperType()
this.age = age;
}
SubType.prototype = new SuperType(); //第一次調(diào)用 SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function () {
alert(this.age);
};
在第一次調(diào)用 SuperType 構(gòu)造函數(shù)時(shí),SubType.prototype 會(huì)得到兩個(gè)屬性:name 和 colors;它們都是 SuperType 的實(shí)例屬性,只不過(guò)現(xiàn)在位于 SubType 的原型中。當(dāng)調(diào)用 SubType 構(gòu)造函數(shù)時(shí),又會(huì)調(diào)用一次 SuperType 構(gòu)造函數(shù),這一次又在新對(duì)象上創(chuàng)建了實(shí)例屬性 name 和 colors。于是,這兩個(gè)屬性就屏蔽了原型中的兩個(gè)同名屬性。
好在我們已經(jīng)找到了解決這個(gè)問(wèn)題方法——寄生組合式繼承。所謂寄生組合式繼承,即通過(guò)借用構(gòu)造函數(shù)來(lái)繼承屬性,通過(guò)原型鏈的混成形式來(lái)繼承方法。其背后的基本思路是:不必為了指定子類型的原型而調(diào)用超類型的構(gòu)造函數(shù),我們所需要的無(wú)非就是超類型原型的一個(gè)副本而已。本質(zhì)上,就是使用寄生式繼承來(lái)繼承超類型的原型,然后再將結(jié)果指定給子類型的原型。寄生組合式繼承的基本模式如下所示。
function inheritPrototype (subType, superType) {
var prototype = object(superType.prototype); //創(chuàng)建對(duì)象
prototype.constructor = subType; //增強(qiáng)對(duì)象
subType.prototype = prototype; //指定對(duì)象
}
這個(gè)示例中的 inheritPrototype()函數(shù)實(shí)現(xiàn)了寄生組合式繼承的最簡(jiǎn)單形式。這個(gè)函數(shù)接收兩個(gè)參數(shù):子類型構(gòu)造函數(shù)和超類型構(gòu)造函數(shù)。在函數(shù)內(nèi)部,第一步是創(chuàng)建超類型原型的一個(gè)副本。第二步是為創(chuàng)建的副本添加 constructor 屬性,從而彌補(bǔ)因重寫(xiě)原型而失去的默認(rèn)的 constructor 屬性。最后一步,將新創(chuàng)建的對(duì)象(即副本)賦值給子類型的原型。這樣,我們就可以用調(diào)用 inherit-Prototype()函數(shù)的語(yǔ)句,去替換前面例子中為子類型原型賦值的語(yǔ)句了,例如:
function SuperType (name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function () {
alert(this.name);
};
function SubType (name, age) {
SuperType.call(this, name);
this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function () {
alert(this.age);
};
這個(gè)例子的高效率體現(xiàn)在它只調(diào)用了一次 SuperType 構(gòu)造函數(shù),并且因此避免了在 SubType.prototype 上面創(chuàng)建不必要的、多余的屬性。與此同時(shí),原型鏈還能保持不變;因此,還能夠正常使用instanceof 和 isPrototypeOf()。開(kāi)發(fā)人員普遍認(rèn)為寄生組合式繼承是引用類型最理想的繼承范式。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84618.html
摘要：高程讀書(shū)筆記第六章理解對(duì)象創(chuàng)建自定義對(duì)象的方式有創(chuàng)建一個(gè)實(shí)例，然后為它添加屬性和方法。創(chuàng)建了自定義的構(gòu)造函數(shù)之后，其原型對(duì)象默認(rèn)只會(huì)取得屬性至于其他方法都是從繼承而來(lái)的。 JS高程讀書(shū)筆記--第六章 理解對(duì)象 創(chuàng)建自定義對(duì)象的方式有創(chuàng)建一個(gè)Object實(shí)例，然后為它添加屬性和方法。還可用創(chuàng)建對(duì)象字面量的方式 屬性類型 ECMAScript在定義只有內(nèi)部采用的特性時(shí)，描述了屬性的各種特征...
摘要：與執(zhí)行環(huán)境相關(guān)的變量對(duì)象中有執(zhí)行環(huán)境定義的所有變量和函數(shù)作用域鏈代碼在一個(gè)環(huán)境中執(zhí)行，便會(huì)創(chuàng)建變量對(duì)象的一個(gè)作用域鏈。 執(zhí)行環(huán)境 執(zhí)行環(huán)境是什么？ javascript的解釋器每次開(kāi)始執(zhí)行一個(gè)函數(shù)時(shí)，都會(huì)為每個(gè)函數(shù)創(chuàng)建一個(gè)執(zhí)行環(huán)境（execution context）。 執(zhí)行環(huán)境定義了變量或者函數(shù)有權(quán)訪問(wèn)的其他數(shù)據(jù)，決定了他們各自的行為。 與執(zhí)行環(huán)境相關(guān)的變量對(duì)象(...
摘要：的理解函數(shù)與其他語(yǔ)言函數(shù)最大的不同在于，其不介意傳入多少參數(shù)以及參數(shù)的類型比如函數(shù)的形參有兩個(gè)，但是調(diào)用函數(shù)傳入的參數(shù)可以寫(xiě)一個(gè)，三個(gè)或不寫(xiě)參數(shù)對(duì)應(yīng)等，解析器都可以正常解析，這是因?yàn)橹袇?shù)在內(nèi)部是以一個(gè)數(shù)組形式來(lái)表示，故而不需要關(guān)系傳入?yún)?shù) ECMAScript function的理解 ECMAScript 函數(shù)與其他語(yǔ)言函數(shù)最大的不同在于，其不介意傳入多少參數(shù)以及參數(shù)的類型...
showImg(http://img3.douban.com/lpic/s8958650.jpg); 0x00 javascript組成 ECMAScript(-265)核心語(yǔ)言部分 DOM文檔對(duì)象模型（DOM1、2、3） BOM瀏覽器對(duì)象模型(提供與瀏覽器交互的接口和方法) 0x01 async 異步加載 執(zhí)行順序不定 charset defer 延遲加載，立即下載腳本但不執(zhí)行 src ...
摘要：假如你只想支持及更高版本那么大可丟掉前面定義的那個(gè)函數(shù)而只用原生的實(shí)現(xiàn)。跳過(guò)這個(gè)函數(shù)中新增的代碼首先檢測(cè)原生對(duì)象是否存在如果存在則返回它的新實(shí)例。如果原生對(duì)象不存在則檢測(cè)對(duì)象。如果這兩種對(duì)象都不存在就拋出一個(gè)錯(cuò)誤。 XMLHttpRequest 對(duì)象 IE7+、Firefox、Opera、Chrome 和 Safari 都支持原生的 XHR 對(duì)象,在這些瀏覽器中創(chuàng)建 XHR 對(duì)象要像下...
閱讀 3357·2021-11-25 09:43
閱讀 3045·2021-10-15 09:43
閱讀 1996·2021-09-08 09:36
閱讀 2957·2019-08-30 15:56
閱讀 776·2019-08-30 15:54
閱讀 2714·2019-08-30 15:54
閱讀 3008·2019-08-30 11:26
閱讀 1286·2019-08-29 17:27
