js面向?qū)ο髮?shí)現(xiàn)面向?qū)ο?二)

上一篇講到j(luò)s實(shí)現(xiàn)對類對封裝,本篇介紹類的繼承,多態(tài)。

類的繼承

  • 類式繼承

類式繼承方式是將父類的實(shí)例賦在子類的原型上實(shí)現(xiàn)繼承的效果。

function SuperType(){
        this.property = true;
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
};
function SubType(){
    this.subproperty = false;
}
//繼承了 SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
    return this.subproperty;
  };
var instance = new SubType();
alert(instance.getSuperValue());   //true

這個(gè)例子中的 SuperType 構(gòu)造函數(shù)定義了一個(gè) colors 屬性,該屬性包含一個(gè)數(shù)組(引用類型值)。 SuperType 的每個(gè)實(shí)例都會有各自包含自己數(shù)組的 colors 屬性。當(dāng) SubType 通過原型鏈繼承了 SuperType 之后,SubType.prototype 就變成了 SuperType 的一個(gè)實(shí)例,因此它也擁有了一個(gè)它自 己的 colors 屬性——就跟專門創(chuàng)建了一個(gè) SubType.prototype.colors 屬性一樣。但結(jié)果是什么 呢?結(jié)果是 SubType 的所有實(shí)例都會共享這一個(gè) colors 屬性。而我們對 instance1.colors 的修改 能夠通過 instance2.colors 反映出來,就已經(jīng)充分證實(shí)了這一點(diǎn)。
原型鏈的第二個(gè)問題是:在創(chuàng)建子類型的實(shí)例時(shí),不能向超類型的構(gòu)造函數(shù)中傳遞參數(shù)。實(shí)際上, 應(yīng)該說是沒有辦法在不影響所有對象實(shí)例的情況下,給超類型的構(gòu)造函數(shù)傳遞參數(shù)。有鑒于此,再加上 前面剛剛討論過的由于原型中包含引用類型值所帶來的問題,實(shí)踐中很少會單獨(dú)使用原型鏈。

  • 構(gòu)造函數(shù)繼承

在解決原型中包含引用類型值所帶來問題的過程中,開發(fā)人員開始使用一種叫做借用構(gòu)造函數(shù) (constructor stealing)的技術(shù)(有時(shí)候也叫做偽造對象或經(jīng)典繼承)。這種技術(shù)的基本思想相當(dāng)簡單,即
在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)。別忘了,函數(shù)只不過是在特定環(huán)境中執(zhí)行代碼的對象, 因此通過使用 apply()和 call()方法也可以在(將來)新創(chuàng)建的對象上執(zhí)行構(gòu)造函數(shù)

function SuperType(){
    this.colors = ["red", "blue", "green"];
 function SubType(){
//繼承了 SuperType
    SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors);    //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors);    //"red,blue,green"

代碼中加粗的那一行代碼“借調(diào)”了超類型的構(gòu)造函數(shù)。通過使用 call()方法(或 apply()方法 也可以),我們實(shí)際上是在(未來將要)新創(chuàng)建的 SubType 實(shí)例的環(huán)境下調(diào)用了 SuperType 構(gòu)造函數(shù)。 這樣一來,就會在新 SubType 對象上執(zhí)行 SuperType()函數(shù)中定義的所有對象初始化代碼。結(jié)果, SubType 的每個(gè)實(shí)例就都會具有自己的 colors 屬性的副本了。

  • 組合繼承

組合繼承(combination inheritance),有時(shí)候也叫做偽經(jīng)典繼承,指的是將原型鏈和借用構(gòu)造函數(shù)的 技術(shù)組合到一塊,從而發(fā)揮二者之長的一種繼承模式。其背后的思路是使用原型鏈實(shí)現(xiàn)對原型屬性和方 法的繼承,而通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對實(shí)例屬性的繼承。這樣,既通過在原型上定義方法實(shí)現(xiàn)了函數(shù) 復(fù)用,又能夠保證每個(gè)實(shí)例都有它自己的屬性。下面來看一個(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()。這樣一來,就可以讓兩個(gè)不同的 SubType 實(shí)例既分別擁有自己屬性——包 括 colors 屬性,又可以使用相同的方法了。
組合繼承避免了原型鏈和借用構(gòu)造函數(shù)的缺陷,融合了它們的優(yōu)點(diǎn),成為 JavaScript 中最常用的繼 承模式。而且,instanceof 和 isPrototypeOf()也能夠用于識別基于組合繼承創(chuàng)建的對象。

  • 原型式繼承

道格拉斯·克羅克福德在 2006 年寫了一篇文章,題為 Prototypal Inheritance in JavaScript (JavaScript 10 中的原型式繼承)。在這篇文章中,他介紹了一種實(shí)現(xiàn)繼承的方法,這種方法并沒有使用嚴(yán)格意義上的 構(gòu)造函數(shù)。他的想法是借助原型可以基于已有的對象創(chuàng)建新對象,同時(shí)還不必因此創(chuàng)建自定義類型。為 了達(dá)到這個(gè)目的,他給出了如下函數(shù)。

function object(o){
        function F(){}
        F.prototype = o;
        return new F(); 12 
}

在 object()函數(shù)內(nèi)部,先創(chuàng)建了一個(gè)臨時(shí)性的構(gòu)造函數(shù),然后將傳入的對象作為這個(gè)構(gòu)造函數(shù)的 原型,最后返回了這個(gè)臨時(shí)類型的一個(gè)新實(shí)例。從本質(zhì)上講,object()對傳入其中的對象執(zhí)行了一次淺復(fù)制。來看下面的例子。

 var person = {
        name: "Nicholas",
        friends: ["Shelby", "Court", "Van"]
    };
    var anotherPerson = object(person);
    anotherPerson.name = "Greg";
    anotherPerson.friends.push("Rob");
    var yetAnotherPerson = object(person);
    yetAnotherPerson.name = "Linda";
    yetAnotherPerson.friends.push("Barbie");
    alert(person.friends);   //"Shelby,Court,Van,Rob,Barbie"

克羅克福德主張的這種原型式繼承,要求你必須有一個(gè)對象可以作為另一個(gè)對象的基礎(chǔ)。如果有這么 一個(gè)對象的話,可以把它傳遞給 object()函數(shù),然后再根據(jù)具體需求對得到的對象加以修改即可。在這 個(gè)例子中,可以作為另一個(gè)對象基礎(chǔ)的是 person 對象,于是我們把它傳入到 object()函數(shù)中,然后該 函數(shù)就會返回一個(gè)新對象。這個(gè)新對象將 person 作為原型,所以它的原型中就包含一個(gè)基本類型值屬性 和一個(gè)引用類型值屬性。這意味著 person.friends 不僅屬于 person 所有,而且也會被 anotherPerson 以及 yetAnotherPerson 共享。實(shí)際上,這就相當(dāng)于又創(chuàng)建了 person 對象的兩個(gè)副本。
ECMAScript 5 通過新增 Object.create()方法規(guī)范化了原型式繼承。這個(gè)方法接收兩個(gè)參數(shù):一 個(gè)用作新對象原型的對象和(可選的)一個(gè)為新對象定義額外屬性的對象。在傳入一個(gè)參數(shù)的情況下, Object.create()與 object()方法的行為相同。

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

Object.create()方法的第二個(gè)參數(shù)與 Object.defineProperties()方法的第二個(gè)參數(shù)格式相
同:每個(gè)屬性都是通過自己的描述符定義的。以這種方式指定的任何屬性都會覆蓋原型對象上的同名屬
性。例如:

 var person = {
        name: "Nicholas",
        friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = Object.create(person, {
    name: {
        value: "Greg"
    }
});
alert(anotherPerson.name); //"Greg"

支持 Object.create()方法的瀏覽器有 IE9+、Firefox 4+、Safari 5+、Opera 12+和 Chrome。
在沒有必要興師動(dòng)眾地創(chuàng)建構(gòu)造函數(shù),而只想讓一個(gè)對象與另一個(gè)對象保持類似的情況下,原型式 繼承是完全可以勝任的。不過別忘了,包含引用類型值的屬性始終都會共享相應(yīng)的值,就像使用原型模 式一樣。

  • 寄生式繼承

寄生式(parasitic)繼承是與原型式繼承緊密相關(guān)的一種思路,并且同樣也是由克羅克福德推而廣 之的。寄生式繼承的思路與寄生構(gòu)造函數(shù)和工廠模式類似,即創(chuàng)建一個(gè)僅用于封裝繼承過程的函數(shù),該 函數(shù)在內(nèi)部以某種方式來增強(qiáng)對象,最后再像真地是它做了所有工作一樣返回對象。以下代碼示范了寄 生式繼承模式。

function createAnother(original){ varclone=object(original); //通過調(diào)用函數(shù)創(chuàng)建一個(gè)新對象
 }
clone.sayHi = function(){
    alert("hi");
};
return clone;
//以某種方式來增強(qiáng)這個(gè)對象
//返回這個(gè)對象

在這個(gè)例子中,createAnother()函數(shù)接收了一個(gè)參數(shù),也就是將要作為新對象基礎(chǔ)的對象。然 后,把這個(gè)對象(original)傳遞給 object()函數(shù),將返回的結(jié)果賦值給 clone。再為 clone 對象 添加一個(gè)新方法 sayHi(),最后返回 clone 對象??梢韵裣旅孢@樣來使用 createAnother()函數(shù):

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

這個(gè)例子中的代碼基于 person 返回了一個(gè)新對象——anotherPerson。新對象不僅具有 person 的所有屬性和方法,而且還有自己的 sayHi()方法。
在主要考慮對象而不是自定義類型和構(gòu)造函數(shù)的情況下,寄生式繼承也是一種有用的模式。前面示 范繼承模式時(shí)使用的 object()函數(shù)不是必需的;任何能夠返回新對象的函數(shù)都適用于此模式。

  • 寄生組合式繼承

前面說過,組合繼承是 JavaScript 最常用的繼承模式;不過,它也有自己的不足。組合繼承最大的 問題就是無論什么情況下,都會調(diào)用兩次超類型構(gòu)造函數(shù):一次是在創(chuàng)建子類型原型的時(shí)候,另一次是 在子類型構(gòu)造函數(shù)內(nèi)部。沒錯(cuò),子類型最終會包含超類型對象的全部實(shí)例屬性,但我們不得不在調(diào)用子 類型構(gòu)造函數(shù)時(shí)重寫這些屬性。再來看一看下面組合繼承的例子。

  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);
};

加粗字體的行中是調(diào)用 SuperType 構(gòu)造函數(shù)的代碼。在第一次調(diào)用 SuperType 構(gòu)造函數(shù)時(shí), SubType.prototype 會得到兩個(gè)屬性:name 和 colors;它們都是 SuperType 的實(shí)例屬性,只不過 現(xiàn)在位于 SubType 的原型中。當(dāng)調(diào)用 SubType 構(gòu)造函數(shù)時(shí),又會調(diào)用一次 SuperType 構(gòu)造函數(shù),這 一次又在新對象上創(chuàng)建了實(shí)例屬性 name 和 colors。于是,這兩個(gè)屬性就屏蔽了原型中的兩個(gè)同名屬 性。有兩組 name 和 colors 屬性:一組在實(shí)例上,一組在 SubType 原型中。這就是調(diào) 用兩次 SuperType 構(gòu)造函數(shù)的結(jié)果。好在我們已經(jīng)找到了解決這個(gè)問題方法——寄生組合式繼承。
所謂寄生組合式繼承,即通過借用構(gòu)造函數(shù)來繼承屬性,通過原型鏈的混成形式來繼承方法。其背 后的基本思路是:不必為了指定子類型的原型而調(diào)用超類型的構(gòu)造函數(shù),我們所需要的無非就是超類型 原型的一個(gè)副本而已。本質(zhì)上,就是使用寄生式繼承來繼承超類型的原型,然后再將結(jié)果指定給子類型 的原型。寄生組合式繼承的基本模式如下所示。

function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype);//創(chuàng)建對象
    prototype.constructor = subType; //增強(qiáng)對象
    subType.prototype = prototype; //指定對象
}

這個(gè)示例中的 inheritPrototype()函數(shù)實(shí)現(xiàn)了寄生組合式繼承的最簡單形式。這個(gè)函數(shù)接收兩 個(gè)參數(shù):子類型構(gòu)造函數(shù)和超類型構(gòu)造函數(shù)。在函數(shù)內(nèi)部,第一步是創(chuàng)建超類型原型的一個(gè)副本。第二 步是為創(chuàng)建的副本添加 constructor 屬性,從而彌補(bǔ)因重寫原型而失去的默認(rèn)的 constructor 屬性。 最后一步,將新創(chuàng)建的對象(即副本)賦值給子類型的原型。這樣,我們就可以用調(diào)用 inherit- Prototype()函數(shù)的語句,去替換前面例子中為子類型原型賦值的語句了,例如:

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()。開發(fā)人員普遍認(rèn)為寄生組合式繼承是引用類型最理想的繼承范式。

小結(jié)

ECMAScript 支持面向?qū)ο?OO)編程,但不使用類或者接。對象可以在代碼執(zhí)行過程中創(chuàng)建和 增強(qiáng),因此具有動(dòng)態(tài)性而非嚴(yán)格定義的實(shí)體。在沒有類的情況下,可以采用下列模式創(chuàng)建對象。

  • 類模式

使用簡單的函數(shù)創(chuàng)建對象,為對象添加屬性和方法,然后返回對象。這個(gè)模式后來 被構(gòu)造函數(shù)模式所取代。

  • 構(gòu)造函數(shù)模式.

可以創(chuàng)建自定義引用類型,可以像創(chuàng)建內(nèi)置對象實(shí)例一樣使用 new 操作符。不 過,構(gòu)造函數(shù)模式也有缺點(diǎn),即它的每個(gè)成員都無法得到復(fù)用,包括函數(shù)。由于函數(shù)可以不局 限于任何對象(即與對象具有松散耦合的特點(diǎn)),因此沒有理由不在多個(gè)對象間共享函數(shù)。

  • 原型模式.

使用構(gòu)造函數(shù)的prototype屬性來指定那些應(yīng)該共享的屬性和方法。組合使用構(gòu)造 函數(shù)模式和原型模式時(shí),使用構(gòu)造函數(shù)定義實(shí)例屬性,而使用原型定義共享的屬性和方法。 JavaScript 主要通過原型鏈實(shí)現(xiàn)繼承。原型鏈的構(gòu)建是通過將一個(gè)類型的實(shí)例賦值給另一個(gè)構(gòu)造函
數(shù)的原型實(shí)現(xiàn)的。這樣,子類型就能夠訪問超類型的所有屬性和方法,這一點(diǎn)與基于類的繼承很相似。 原型鏈的問題是對象實(shí)例共享所有繼承的屬性和方法,因此不適宜單獨(dú)使用。解決這個(gè)問題的技術(shù)是借 用構(gòu)造函數(shù),即在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)。這樣就可以做到每個(gè)實(shí)例都具有自己的 屬性,同時(shí)還能保證只使用構(gòu)造函數(shù)模式來定義類型。使用最多的繼承模式是組合繼承,這種模式使用 原型鏈繼承共享的屬性和方法,而通過借用構(gòu)造函數(shù)繼承實(shí)例屬性。
此外,還存在下列可供選擇的繼承模式。

  • 原型式繼承

可以在不必預(yù)先定義構(gòu)造函數(shù)的情況下實(shí)現(xiàn)繼承,其本質(zhì)是執(zhí)行對給定對象的淺
復(fù)制。而復(fù)制得到的副本還可以得到進(jìn)一步改造。

  • 寄生式繼承

與原型式繼承非常相似,也是基于某個(gè)對象或某些信息創(chuàng)建一個(gè)對象,然后增強(qiáng)
對象,最后返回對象。為了解決組合繼承模式由于多次調(diào)用超類型構(gòu)造函數(shù)而導(dǎo)致的低效率問題,可以將這個(gè)模式與組合繼承一起使用。

  • 寄生組合式繼承

集寄生式繼承和組合繼承的優(yōu)點(diǎn)與一身,是實(shí)現(xiàn)基于類型繼承的最有效方式

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容