1. 程式人生 > >JavaScript 繼承使用解析

JavaScript 繼承使用解析

繼承,通俗地說,之前你寫過一些類,這些類中有一些是而你現在要寫的類的功能的子集或者基本相同,那麼你不用完全重新寫一個新的類,你可以把之前寫的類拿過來使用.這樣的一種程式碼重用過程就叫做繼承,寫的十分的全面細緻,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。

深入學習javascript繼承之前,先了解下面的幾個概念:

父類:被繼承的類  子類:由繼承得來的類  超類:也就是父類  抽象類:一般不用來例項化的類,它的用途是用來給其他類繼承.  基類:提供給其他類可以繼承的類  派生類:由基類繼承而來的類 

javascript物件繼承通常有下面的5種方式:

  • 1.物件冒充 
  • 2.call()方式 
  • 3.apply()方式 
  • 4.原型鏈 
  • 5.混合方式 

A.物件冒充  所謂物件冒充,就是新的類冒充舊的類(舊的類必須採用建構函式方式),從而達到繼承目的. 

function people(name,sex,age){ //使用建構函式方式 
this.name=name; 
this.sex=sex; 
this.age=age; 
this.say=function(){ 
alert("My name is "+this.name); 
}; 

this.doing=function(){ 
alert("I am speaking"); 
}; 
} 
var Marry=new people("Marry","Woman","23"); 
Marry.say(); 
Marry.doing(); 

function white_people(name,sex,age){ 
this.inherit=people; 
this.inherit(name,sex,age); 
delete this.inherit; 

this.area=function(){ 
alert("I am in Europe"); 
} 
} //歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
var Tom=new white_people("Tom","man","21"); 
Tom.say(); 
Tom.area(); 
alert(Tom.age); 

上面的例子中,people是用來做white_people的基類,記住這個格式是用來物件冒充達到繼承目的的 

this.inherit=people; //冒充 
this.inherit(name,sex,age); //繼承 
delete this.inherit; //刪除繼承 

所有新屬性和新方法都必須再刪除了繼承後定義,這樣是為了避免覆蓋父類的相關屬性和方法.  另外,物件冒充支援多繼承. 

function worker(pay,work){ 
this.pay=pay; 
this.work=work; 
} 
function city_worker(name,sex,age,pay,work){ 
this.inherit=people; 
this.inherit(name,sex,age); 
delete this.inherit; 

this.inherit=worker; 
this.inherit(pay,work); 
delete this.inherit; 
} 
//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
var Jerry=new city_worker("Jerry","man","21","$1000","coder"); 
Jerry.say(); 
alert(Jerry.work); 

物件冒充有一個不足的地方:多繼承機制實現時,如果基類存在相同的屬性或者方法,將從後面的類繼承. 

B.call()方式 只是封裝的物件冒充的一個函式.這樣,我們不再需要寫"經典"的三句話,而是用下面這句話代替:  基類.call(物件,引數列表) 

function farmer(name,sex,age,pay,work){ 
people.call(this,name,sex,age); 
worker.call(this,pay,work); 
} //歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860

var Nicholas=new farmer("Nicholas","man","27","$3000","irrigator"); 
Nicholas.say(); 
alert(Nicholas.pay); 

同樣,call()存在同名屬性和方法的小問題. 

C.apply()方式 和call()一樣.apply()也是物件冒充的一個封裝函式.其格式為:  基類.apply(物件,引數陣列); 

function white_collar(name,sex,age,pay,work){ 
people.apply(this,new Array(name,sex,age)); 
worker.apply(this,[pay,work]); 
} //歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860

var Jiessie=new white_collar("Jiessie","woman","26","$2500","editor"); 
Jiessie.say(); 
alert(Jiessie.work); 

同樣,apply()存在同名屬性和方法的小問題. 

D.原型鏈  上面三種方式都是採用建構函式方式的繼承,對應地,也具有原型函式方式的繼承:原型鏈. 

function blue_collar(){ 
} 
blue_collar.prototype.name="Jean"; 
blue_collar.prototype.age="33"; 
blue_collar.prototype.say=function(){ 
alert("my name is "+ this.name); 
}; //歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
function city_blue_collar(){ 
} //歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
city_blue_collar.prototype=new blue_collar(); 
var jj=new city_blue_collar; 
jj.say(); 

原型鏈也具有了原型鏈的缺點:不能傳遞引數.另外,原型鏈不支援多繼承,因為 

E.混合方式 使用建構函式方式來寫類的屬性,對屬性的繼承採用call()或者apply()  使用原型方式來寫的方法,對方法的繼承採用原型鏈 

function beauty(name,age){ 
this.name=name; 
this.age=age; 
} //歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
beauty.prototype.say=function(){ 
alert("我是"+this.name); 
}; 
//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
function china_beauty(name,age,area){ 
beauty.call(this,name,age); 
this.area=area; 
} //歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
china_beauty.prototype=new beauty(); 
china_beauty.prototype.from=function(){ 
alert("我來自"+this.area); 
}; 
//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
var diaochan=new china_beauty("交流圈","864305860","全棧開發交流圈"); 
diaochan.say(); 
diaochan.from(); 
alert(diaochan.age);

結語

感謝您的觀看,如有不足之處,歡迎批評指正。