重溫Javascript（三）

標籤：src   參數   const   instance   實現   prototype   class   情況   nic   

繼承

 

　　1.原型鏈繼承

　　基本思想是利用原型讓一個參考型別繼承另一個參考型別的屬性和方法。每個建構函式都有一個原型對象，原型對象都包含一個指向建構函式的指標，而執行個體都包含一個指向原型對象的內部指標。讓原型對象等於另一個類型的執行個體，此時的原型對象將包含一個指向另一個原型的指標，相應的，另一個原型中也包含著一個指向另一個建構函式的指標。層層遞進，構成了執行個體與原型的鏈條。

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

 

　　完整的原型鏈繼承

　　

　　原型鏈繼承的問題

　　仍然是原型中參考型別的問題

function SuperType(){    this.colors = ["red", "blue", "green"];}function SubType(){}//繼承了SuperTypeSubType.prototype = new SuperType();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,black"

　　

　　2.借用建構函式　

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"

　　

function SuperType(name){    this.name = name;}function SubType(){    //繼承了SuperType，同時還傳遞了參數    SuperType.call(this, "Nicholas");    //執行個體屬性    this.age = 29;}var instance = new SubType();alert(instance.name); //"Nicholas";alert(instance.age); //29

　　還是和建立對象的建構函式模式一樣的問題，無法公用prototype的方法

 

　　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(); //29var instance2 = new SubType("Greg", 27);alert(instance2.colors); //"red,blue,green"instance2.sayName(); //"Greg";instance2.sayAge(); //27

　　

　　組合繼承最大的問題就是無論什麼情況下，都會調用兩次超類型建構函式，一次是在建立子類型原型的時候，另一次是在子類型建構函式內部。子類型最終會包含超類型對象的全部執行個體屬性，在調用子類型建構函式時如果有需要得重寫這些屬性

　　4.組合寄生式繼承　　

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

function inheritPrototype(subType, superType){    var prototype = object(superType.prototype); //建立對象    prototype.constructor = subType; //增強對象    subType.prototype = prototype; //指定對象}

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

　　對於SubType的原型也不會出現SuperType的執行個體屬性

 

引用：

《JavaScript進階程式設計中文版》

重溫Javascript（三）