JAVASCRIPT繼承方如此簡單
?????? 看了很多的js繼承方式都覺得不是很好,總是覺得不是很方便,用起來也不順。所以一直在查這方面的資料思考這個(gè)問題,終于有所收獲。忍不住要貼出來與大家共享,讓大家一起享受javascript繼承的快樂。優(yōu)點(diǎn):只要聲明一個(gè)簡單的函數(shù)即可方便使用JAVASCRIPT的繼承,使用方法也只要一行代碼調(diào)用繼承方法即可,調(diào)用方式非常自然。 ????????下面是示例源代碼:?? <script>??? /**?????? 首先給Object類添加繼承方法extends,?????? 前兩句起繼承父類的作用,使得調(diào)用的子類能夠獲得父類的所有屬性和方法?????? 后一句保存對一個(gè)對父類的引用,以便在需要的時(shí)候可以調(diào)用父類的方法?????? 如果不需要使用父類的方法,最后一句可以刪除???????方法名不能為extends,因?yàn)镮E認(rèn)為是關(guān)鍵字不讓用火狐下是可以的。屬性superClass也不能用super,也是關(guān)鍵字。不然看起來就更舒服了(那就太像java了)。??? */??? Object.prototype.extend = function(SuperClass){????? this.SuperClass=SuperClass;????? this.SuperClass();????? this.superClass=new SuperClass();??? }???//下面是示例代碼??? //聲明父類:第一個(gè)方法show將得到繼承,第二個(gè)方法將被覆蓋??? function SuperClass(){????? this.show=function(){??????? alert('Call SuperClass.show()');????? }????? this.override=function(){??????? alert('Call SuperClass.override() width "superClass.override()"');????? }??? }??? //聲明子類:繼承父類,同時(shí)覆蓋了父類的方法override??? function SubClass(){????? //調(diào)用繼承方法繼承父類的屬性和方法????? this.extend(SuperClass);????? this.override=function(){??????? alert('I have overrided SuperClass.override method.\nCall SubClass.override()');????? }??? }??? //測試?yán)^承的結(jié)果:??? var s=new SubClass();??? s.show(); //將調(diào)用父類的方法??? s.override();//將調(diào)用子類覆蓋后的方法??? s.superClass.override();//將調(diào)用父類的override方法?</script>
javascript的多根繼承和多層繼承
上篇文章貼出后又想了兩個(gè)問題:
仔細(xì)一想,多層繼承上篇文章的代碼已經(jīng)實(shí)現(xiàn)。多根繼承則需要進(jìn)一步完善extend方法。于是有了下面的代碼,使用方法很簡單。只要一句話可以輕松實(shí)現(xiàn)對多個(gè)父類的繼承。下面是詳細(xì)的示例源代碼。歡迎交流,QQ:27234687 。讀者可以自行修改后點(diǎn)【測試】按鈕查看輸出結(jié)果。 /** 多根繼承方法, 參數(shù)可以支持多個(gè)父類參數(shù) 子類將按順序繼承所有父類的方法, 如果父類中有重復(fù)的方法則繼承父類列表中在后面的類 父類的方法通過this.superClass.method()調(diào)用,可以調(diào)用所有父類方法 */ Object.prototype.extend = function(){ this.superClass={} for(var i=0;i<arguments.length;i++){ this.SuperClass=arguments[i]; this.SuperClass(); this.superClass.SuperClass=arguments[i]; this.superClass.SuperClass() } } //聲明父類1:第一個(gè)方法show將得到繼承,第二個(gè)方法將被覆蓋 function SuperClass1(){ this.show=function(){ alert('Call SuperClass1.show()'); } this.override=function(){ alert('Call SuperClass1.override()'); } } //聲明父類2:子類將繼承speak方法 function SuperClass2(){ this.speak=function(){ alert('Call SuperClass2.speak()'); } } //聲明子類:繼承父類1和父類2,同時(shí)覆蓋了父類1的方法override function SubClass(){ //調(diào)用繼承方法繼承父類的屬性和方法 this.extend(SuperClass1,SuperClass2); this.override=function(){ alert("Call SubClass.override()。I will call my superClass's method SuperClass1.override()"); this.superClass.override(); } this.sing=function(){ alert('Call SubClass.sing()'); } } //子類的子類,多層繼承展示:將通過繼承SubClass得到SuperClass1和SuperClass2的方法以及SubClass的方法 function SubSubClass(){ this.extend(SubClass); this.talk=function(){ alert('call SubSubClass.talk()'); } } //測試子類的繼承的結(jié)果: var s=new SubClass(); s.show(); //將調(diào)用SuperClass1的方法 s.speak(); //將調(diào)用SuperClass2的方法 s.override();//將調(diào)用SubClass的方法 s.sing();//將調(diào)用SubClass的sing方法 //測試孫類繼承的結(jié)果: var s=new SubSubClass(); s.show(); //將調(diào)用SuperClass1的方法 s.speak(); //將調(diào)用SuperClass2的方法 s.override();//將調(diào)用SubClass的方法 s.sing();//將調(diào)用SubClass的sing方法 s.talk();//將調(diào)用SubSubClass.talk方法 測試