淺談JS繼承_寄生式繼承 & 寄生組合式繼承

更新時(shí)間：2016年08月16日 09:52:16 投稿：jingxian

下面小編就為大家?guī)?lái)一篇淺談JS繼承_寄生式繼承 & 寄生組合式繼承。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

5.寄生式繼承

與寄生構(gòu)造函數(shù)和工廠模式類(lèi)似，創(chuàng)建一個(gè)僅用于封裝繼承過(guò)程的函數(shù)，該函數(shù)在內(nèi)部以某種方式來(lái)增強(qiáng)對(duì)象，最后返回對(duì)象。

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

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

在上述例子中，createAnother函數(shù)接收了一個(gè)參數(shù)，也就是將要作為新對(duì)象基礎(chǔ)的對(duì)象。

anotherPerson是基于person創(chuàng)建的一個(gè)新對(duì)象，新對(duì)象不僅具有person的所有屬性和方法，還有自己的sayHi()方法。

6.寄生組合式繼承

組合繼承是js最常用的繼承模式，組合繼承最大的問(wèn)題就是無(wú)論在什么情況下，都會(huì)調(diào)用兩次構(gòu)造函數(shù)：一次是在創(chuàng)建子類(lèi)型原型時(shí)，另一次是在子類(lèi)型構(gòu)造函數(shù)內(nè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.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è)同名屬性。

寄生組合式繼承就是為了解決這一問(wèn)題。

通過(guò)借用構(gòu)造函數(shù)來(lái)繼承屬性；

通過(guò)原型鏈來(lái)繼承方法。

不必為了指定子類(lèi)型的原型而調(diào)用超類(lèi)型的構(gòu)造函數(shù)，

function inheritPrototype(subType, superType){
 var protoType = Object.create(superType.prototype); //創(chuàng)建對(duì)象
 protoType.constructor = subType;     //增強(qiáng)對(duì)象
 subType.prototype = protoType;      //指定對(duì)象
}
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;
}
inheritPrototype(SubType, SuperType)
SubType.prototype.sayAge = function(){
 alert(this.age);
}

var instance = new SubType("Bob", 18);
instance.sayName();
instance.sayAge();

inheritPrototype函數(shù)接收兩個(gè)參數(shù)：子類(lèi)型構(gòu)造函數(shù)和超類(lèi)型構(gòu)造函數(shù)。

1. 創(chuàng)建超類(lèi)型原型的副本。

2. 為創(chuàng)建的副本添加constructor屬性，彌補(bǔ)因重寫(xiě)原型而失去的默認(rèn)的constructor屬性

3. 將新創(chuàng)建的對(duì)象（即副本）賦值給子類(lèi)型的原型這種方法只調(diào)用了一次SuperType構(gòu)造函數(shù)，instanceof 和isPrototypeOf()也能正常使用。

以上這篇淺談JS繼承_寄生式繼承 & 寄生組合式繼承就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: