1.原型鏈

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

實(shí)現(xiàn)的本質(zhì)是重寫原型對(duì)象，代之以一個(gè)新類型的實(shí)例。

2.借用構(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"

如果僅僅是借用構(gòu)造函數(shù)，那么也將無法避免構(gòu)造函數(shù)模式存在的問題——方法都在構(gòu)造函數(shù)中定義，因此函數(shù)復(fù)用就無從談起了。而且，在超類型的原型中定義的方法，對(duì)子類型而言也是不可見的，結(jié)果所有類型都只能使用構(gòu)造函數(shù)模式?？紤]到這些問題，借用構(gòu)造函數(shù)的技術(shù)也是很少單獨(dú)使用的。

3.組合繼承

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()也能夠用于識(shí)別基于組合繼承創(chuàng)建的對(duì)象。

4.原型式繼承

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

在object()函數(shù)內(nèi)部，先創(chuàng)建了一個(gè)臨時(shí)性的構(gòu)造函數(shù)，然后將傳入的對(duì)象作為這個(gè)構(gòu)造函數(shù)的原型，最后返回了這個(gè)臨時(shí)類型的一個(gè)新實(shí)例。從本質(zhì)上講，object()對(duì)傳入其中的對(duì)象執(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è)對(duì)象可以作為另一個(gè)對(duì)象的基礎(chǔ)。如果有這么一個(gè)對(duì)象的話，可以把它傳遞給object()函數(shù)，然后再根據(jù)具體需求對(duì)得到的對(duì)象加以修改即可。在這個(gè)例子中，可以作為另一個(gè)對(duì)象基礎(chǔ)的是person 對(duì)象，于是我們把它傳入到object()函數(shù)中，然后該函數(shù)就會(huì)返回一個(gè)新對(duì)象。這個(gè)新對(duì)象將person 作為原型，所以它的原型中就包含一個(gè)基本類型值屬性和一個(gè)引用類型值屬性。這意味著person.friends 不僅屬于person 所有，而且也會(huì)被anotherPerson以及yetAnotherPerson 共享。實(shí)際上，這就相當(dāng)于又創(chuàng)建了person 對(duì)象的兩個(gè)副本。

ECMAScript 5 通過新增Object.create()方法規(guī)范化了原型式繼承。這個(gè)方法接收兩個(gè)參數(shù)：一個(gè)用作新對(duì)象原型的對(duì)象和（可選的）一個(gè)為新對(duì)象定義額外屬性的對(duì)象。在傳入一個(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è)屬性都是通過自己的描述符定義的。以這種方式指定的任何屬性都會(huì)覆蓋原型對(duì)象上的同名屬性。例如：

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è)對(duì)象與另一個(gè)對(duì)象保持類似的情況下，原型式繼承是完全可以勝任的。不過別忘了，包含引用類型值的屬性始終都會(huì)共享相應(yīng)的值，就像使用原型模式一樣。

5.寄生式繼承

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

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

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

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

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

使用寄生式繼承來為對(duì)象添加函數(shù)，會(huì)由于不能做到函數(shù)復(fù)用而降低效率；這一
點(diǎn)與構(gòu)造函數(shù)模式類似。

6.寄生組合式繼承

前面說過，組合繼承是JavaScript 最常用的繼承模式；不過，它也有自己的不足。組合繼承最大的問題就是無論什么情況下，都會(huì)調(diào)用兩次超類型構(gòu)造函數(shù)：一次是在創(chuàng)建子類型原型的時(shí)候，另一次是在子類型構(gòu)造函數(shù)內(nèi)部。沒錯(cuò)，子類型最終會(huì)包含超類型對(duì)象的全部實(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); //第二次調(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ù)的代碼。在第一次調(diào)用SuperType 構(gòu)造函數(shù)時(shí)，SubType.prototype 會(huì)得到兩個(gè)屬性：name 和colors；它們都是SuperType 的實(shí)例屬性，只不過現(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è)同名屬性。圖6-6 展示了上述過程。
如圖6-6 所示，有兩組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)建對(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ǔ)因重寫原型而失去的默認(rèn)的constructor 屬性。最后一步，將新創(chuàng)建的對(duì)象（即副本）賦值給子類型的原型。這樣，我們就可以用調(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)為寄生組合式繼承是引用類型最理想的繼承范式。

YUI 的YAHOO.lang.extend()方法采用了寄生組合繼承，從而讓這種模式首次出現(xiàn)在了一個(gè)應(yīng)用非常廣泛的JavaScript 庫(kù)中。要了解有關(guān)YUI 的更多信息，請(qǐng)?jiān)L問http://developer. yahoo.com/yui/。

以上所述就是本文的全部?jī)?nèi)容了，希望對(duì)大家學(xué)習(xí)javascript繼承有所幫助。

最新評(píng)論