面向?qū)ο蟮某绦蛟O(shè)計(jì)之繼承

魏明發(fā)布于2019-08-22 11:59 / 916人閱讀

摘要：以下是幾種中實(shí)現(xiàn)繼承的方式方法它們也是各自有各自的優(yōu)缺點(diǎn)選擇哪一種根據(jù)自己的應(yīng)用而定最適合自己的才是最好的通過原型鏈繼承通過原型對(duì)象繼承缺點(diǎn)引用類型的值在原型中會(huì)被所有實(shí)例共享不能向超類的構(gòu)造函數(shù)中傳遞參數(shù)借用構(gòu)造函數(shù)繼承借用構(gòu)造函數(shù)繼承是

以下是幾種js中實(shí)現(xiàn)繼承的方式方法,它們也是各自有各自的優(yōu)缺點(diǎn),選擇哪一種根據(jù)自己的應(yīng)用而定,最適合自己的才是最好的.

通過原型鏈繼承

function SuperType(){
    this.name = "yahualingfeng";
}

SuperType.prototype.friends = ["David","Bob","Lucy"];
SuperType.prototype.sayName = function(){
    
  alert(this.name);
  
};

function SubType(){
    this.age = 30;    
}

SubType.protoType = new SuperType();//通過原型對(duì)象繼承SuperType

var subType1 = new SubType();
var subType2 = new SubType();

subType1.friends.push("Jake");

console.log(subType1.friends); // ["David","Bob","Lucy","Jake"]
console.log(subType2.friends); // ["David","Bob","Lucy","Jake"]

缺點(diǎn):

引用類型的值在原型中會(huì)被所有實(shí)例共享.

不能向超類的構(gòu)造函數(shù)中傳遞參數(shù)

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

借用構(gòu)造函數(shù)繼承是將超類(SuperType)所有的屬性和方法都寫在構(gòu)造函數(shù)中,最后在函數(shù)(SubType)體內(nèi)通過call方法調(diào)用超類.

function SuperType(){
    this.name = "yuhualingfeng";
    this.friends =["David","Bob","Lucy"];
    this.sayName = function(){
        alert(this.name);
    }
}

function SubType(){
    SuperType.call(this);
}

var subType = new SubType();
subType.sayName();

缺點(diǎn):方法的定義都存在構(gòu)造函數(shù)中,導(dǎo)致函數(shù)無法被復(fù)用.

組合繼承

組合繼承是原型鏈繼承和構(gòu)造函數(shù)繼承的結(jié)合體,結(jié)合了二者的優(yōu)點(diǎn),即實(shí)現(xiàn)了函數(shù)的復(fù)用,也不會(huì)導(dǎo)致引用類型值在多個(gè)實(shí)例中共享.

function SuperType(){
    this.name="yuhualingfeng";
    this.friends=["David","Bob","Lucy"];
}
SuperType.prototype.sayName = function(){
    
    alert(this.name);

};

function SubType(){

    SuperType.call(this);

}

SubType.prototype = new SuperType();

var subType = new SubType();

缺點(diǎn):

超類函數(shù)被執(zhí)行了兩次.

超類構(gòu)造函數(shù)SuperType自身的屬性(name,friends)被重復(fù)定義，即出現(xiàn)在SubType的構(gòu)造函數(shù)中，也出現(xiàn)在SubType的原型對(duì)象中.

原型繼承

原型繼承是繼承自一個(gè)對(duì)象而不是引用類型.

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

這里的object方法接收obj對(duì)象,并將對(duì)象賦值給一個(gè)空函數(shù)的原型,并返回空函數(shù)的實(shí)例.

var person = {
 name:"yuhualingfeng",
 friends:["David","Bob","Lucy"]
};

var anotherPerson = object(person);
anotherPerson.name = "Jake";
anotherPerson.friends.push("Marry");

console.log(anotherPerson.friends); //["David","Bob","Lucy","Marry"]

console.log(person.friends); //["David","Bob","Lucy","Marry"]

如果不想創(chuàng)建構(gòu)造函數(shù),只想讓一個(gè)對(duì)象和另一個(gè)對(duì)象保持一致的情況下,原型繼承是完全可以勝任的,不過有一點(diǎn)要注意的是,假如繼承的屬性值為引用類型時(shí)，還是會(huì)相互影響的.

寄生繼承

寄生繼承是基于原型繼承的基礎(chǔ)上擴(kuò)展自己的屬性和方法.

function createrAnother(obj){
    var clone = object(obj);
    clone.sayHi=function(){
     alert("Hi!");
    }
    return clone;
}

var person = {
    name:"yuhualingfeng"
};

var anotherPerson = createAnother(person);

anohterPerson.sayHi();  // Hi

寄生繼承也是和原型繼承一樣也是繼承對(duì)象,并產(chǎn)出對(duì)象.

寄生組合繼承

顧名思義,寄生組合繼承是集寄生繼承和組合繼承的結(jié)合體,它結(jié)合了二者的優(yōu)點(diǎn).

//繼承Supertype的原型對(duì)象
function inheritProtoType(SuperType,SubType){
 
     var prototype = object(SuperType.prototype);
     prototype.constructor = SubType;
     SubType.prototype = prototype;

}

function SuperType(){
    this.name = "yuhualingfeng";
    this.friends = ["David","Bob","Lucy"];
}

function SubType(){
    ////繼承Supertype的構(gòu)造函數(shù)屬性
    SuperType.call(this);
    this.age = 30;
}

inheritProtoType(SuperType,SubType);

var subType = new SubType();

寄生組合繼承是前面幾種繼承思想碰撞在一起的產(chǎn)物,是執(zhí)行效率最高也是應(yīng)用面最廣的.

總結(jié)

原型鏈繼承是通過為原型對(duì)象賦值,不足之處為引用類型值會(huì)被多個(gè)實(shí)例共享,構(gòu)造函數(shù)繼承解決了原型鏈繼承的問題,同時(shí)也暴露出新的問題是函數(shù)的復(fù)用無法實(shí)現(xiàn)，然后我們結(jié)合二者的優(yōu)缺點(diǎn),構(gòu)造出了組合繼承,組合繼承基本上滿足了我們想要的繼承結(jié)果.
考慮到執(zhí)行的效率,我們構(gòu)思出了寄生繼承(基于原型繼承),并將寄生繼承和組合繼承結(jié)合,最終得出了繼承的最優(yōu)解決方案"寄生組合繼承.