JavaScript高階程式設計 閱讀筆記（十四） js繼承機制的實作_javascript技巧

繼承

　　繼承是物件導向語言的必備特徵，即一個類別能夠重複使用另一個類別的方法和屬性。在JavaScript中繼承方式的實作方式主要有以下五種：物件冒充、call()、apply()、原型鏈、混合方式。

　　以下分別介紹。

物件冒充

　　原理：建構子使用this關鍵字來賦值所有屬性和方法。因為建構函數只是一個函數，所以可以讓ClassA的建構函數成為ClassB的方法，然後呼叫它。 ClassB就會收到ClassA的建構函式中定義的性質和方法。

　　範例：

複製程式碼 程式碼如下:

程式碼如下:



程式碼如下:



碼){
this.color=sColor;
this.sayColor=function(){
alert(this.color);
}
}

function ClassB(sColoror ,sName){
this.newMethod=ClassA;

this.newMethod(sColor);
delete this.newMethod;

this.name=sName; this.sayName= function(){ alert(this.name); } }

呼叫：

複製程式碼

程式碼如下:

var objb=new ClassB("blue","Test");
objb.sayColor();// blueobjb.sayName(); // Test　　



注意：這裡要刪除對ClassA的引用，否則在後面定義新的方法和屬性會覆寫超類別的相關屬性和方法。用這種方式可以實現多重繼承。

call()方法　　由於物件冒充方法的流行，在ECMAScript的第三版對Function物件加入了兩個新方法call()和apply( )方法來實現相似功能。

　　call()方法的第一個參數用作this的對象，其他參數都直接傳遞給函數本身。範例：

複製程式碼


程式碼如下:


function sayor(sPrefix,Color(sPrefix. >alert(sPrefix this.color sSuffix);

}

var obj=new Object();

obj.color="red"; //output The color is red, a very nice color indeed. sayColor.call(obj,"The color is ",", a very nice color indeed."); 　使用此方法實現繼承繼承，只需將前三行的賦值、呼叫、刪除程式碼替換即可：

複製程式碼


程式碼如下:


function ClassB(sColor,sName){
//this.newMethod=ClassA;
//this.newMethod(sColor);
//delete this.newMethod;

ClassA.call(this,sColor);

this.name=sName; this.sayName=function(){ alert(this.name);
}
}

apply()方法 　　apply()方法跟call()方法類似，不同的是第二個參數，在apply( )方法中傳遞的是一個陣列。

複製程式碼


程式碼如下:


function Colraor(srefrefix,s(sPrefix,Suffix){ (sPrefix this.color sSuffix);
}

var obj=new Object();
obj.color="red";

//output The color is red , a very nice color indeed. sayColor.apply(obj,new Array("The color is ",", a very nice color indeed.")); 使用此方法來實現繼承，只需要將前三行的賦值、呼叫、刪除程式碼替換即可：

複製程式碼


程式碼如下:


function ClassB(sColor,sName){
//this.newMethod=ClassA;
//this.newMethod(sColor);
//delete this.newMethod;
ClassA.apply(this,new Array(sColor));

this.name=sName; this.sayName=function(){ alert(this.name); } }
跟call()有一點不同的是，如果超類別中的參數順序與子類別中的參數順序完全一致，第二個參數可以用arguments。

原型鏈

　　繼承這種形式在ECMAScript中原本是用於原型鏈的。 Prototype物件的任何屬性和方法都會傳遞給那個類別的所有實例。原型鏈利用這種功能實現繼承機制。

　　用原型鏈實作繼承範例：

複製程式碼

複製程式碼

程式碼如下:
>function ClassA(){
}

ClassA.prototype.color="red";
ClassA.prototype.sayColor=function(){
alert(this.color);
};

function ClassB(){
}

ClassB.prototype=new ClassA();


Class　函數注意時，沒有給它傳遞參數。這在原型鏈中是標準的做法，要確保建構函數沒有任何參數。
混合方式

　　這種方式混合了物件冒充和原型鏈方式。範例： 複製程式碼

程式碼如下:


function ClassA(sColor){
.color=sColor;
}
ClassA.prototype.sayColor=function(){
alert(this.color);
}

function ClassB(sor,sName)
ClassA.call(this,sColor);
this.name=sName;
}

ClassB.prototype=new ClassA();
ClassB.prototype.sayName=function=new ClassA();
ClassB.prototype.sayName=function=function (){

alert(this.name);
}

呼叫範例： 複製程式碼

複製程式碼

複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼 程式碼如下: var objb=new ClassB("red","test"); objb.sayColor();// output red objb. sayName();// output test 作者：Artwl