亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

JavaScript 繼承方式

系統(tǒng) 1922 0

關(guān)于繼承可以樸素的理解為,通過繼承,子類可以復(fù)用父類的方法,以達(dá)到代碼重用。JavaScript 可用多種方式模擬繼承,本文先舉例介紹各種方法,后對比分析優(yōu)缺點(diǎn)。

在 JavaScript 中,構(gòu)造函數(shù)也和普通的函數(shù)一樣,可以被賦值和調(diào)用,對象冒充通過此原理來模擬繼承。


            				
 Function ClassA(name) 
 { 
 this.name = name; 
 this.sayHello = function(){ 
 alert("Hello, " +  this.name); 
 } 
 } 
 Function ClassB(name,time) 
 { 
 this.newMethod = ClassA; 
 this.newMethod(name); 
 delete this.newMethod; 
 this.time = time; 
 this.sayGoodbye = function(){ 
 alert("Goodbye " + this.name + ",it's " + this.time + " now !"); 
 } 
 } 
 var objA = new ClassA("Tom"); 
 var objB = new ClassB("Jerry","11:30am"); 
 objA.sayHello(); // output is : "Hello,Tom"
 objB.sayHello(); // output is : "Hello,Jerry"
 objB.sayGoodbye();// output is : "Goodbye Jerry, it ’ s 11:30am now!"

          

如清單 1 所示,將 ClassA 的構(gòu)造函數(shù)賦值為 ClassB 的一個普通方法,然后調(diào)用它,由于此時 this 指向的是 ClassB 的實(shí)例,那么 ClassB 的實(shí)例就會收到 ClassA 構(gòu)造函數(shù)中定義的屬性和方法,從而達(dá)到了繼承的效果。

需要注意的是,應(yīng)及時刪除臨時引用(this.newMethod),以防止 ClassB 更改 ClassA 類對象的引用。因?yàn)閷εR時引用(this.newMethod)的更改,也會導(dǎo)致 ClassA 的結(jié)構(gòu)變化。并且 ClassB 的所有新屬性和新方法,應(yīng)該在刪除臨時引用后定義,否則,可能會覆蓋父類的相關(guān)屬性和方法。

認(rèn)識到對象冒充的本質(zhì)后,可以采用 JavaScript 中的 call 或者 apply 函數(shù)達(dá)到同樣的效果,如清單 2 代碼所示。其原理也是在調(diào)用 ClassA 的構(gòu)造函數(shù)時,將 this 指向 ClassB 的實(shí)例。


            				
 Function ClassB(name,time) 
 { 
 ClassA.call(this,name); // 或者 ClassA.apply(this,[name]); 
 this.time = time; 
 this.sayGoodbye = function(){ 
 alert("Goodbye " + this.name + ",it's " + this.time + " now !"); 
 } 
 } 

          

JavaScript 中的每個對象都包含一個原型對象(prototype),指向?qū)δ硞€對象的引用,而由于原型對象本身也是對象,則也會包含對它的原型的引用,由此構(gòu)成一條原型鏈。原型鏈終止于內(nèi)建 Object 類的原型。當(dāng)要讀取某個對象的屬性或方法時,JavaScript 首先在該對象中查找,若沒有找到,便在該對象的原型中繼續(xù)查找,若仍未找到,便順著原型鏈繼續(xù)在原型的原型中查找,直到查找到或到達(dá)原型鏈的盡頭。這樣的系統(tǒng)被稱為原型繼承。而基于原型的繼承,則是指利用了 prototype 或者說以某種方式覆蓋了 prototype,從而達(dá)到屬性及方法復(fù)用的目的。如下所示:


            				
 Function ClassA() 
 { 
 this.name = ""; 
 this.sayHello = function(){ 
 alert("Hello, " +  this.name); 
 } 
 } 
 Function ClassB(){}; 
 ClassB.prototype = new ClassA(); 
 var objB = new ClassB(); 
 objB.name = "Jerry"; 
 objB.sayHello(); //output: "Hello,Jerry"; 

          

示例代碼中將 ClassB 的 prototype 指向 ClassA 的實(shí)例,其原型鏈如圖 1 所示,這樣 ClassB 便擁有了 ClassA 所有的屬性和方法,可以自由的賦值和調(diào)用。


圖 1. ClassB 原型鏈

對象冒充和基于原型的方式都可以讓子類復(fù)用父類的代碼以模擬繼承,但這兩種方法均各有利弊。

利用對象冒充,可以方便的實(shí)現(xiàn)多繼承,只需要對所有需要繼承的父類重復(fù)進(jìn)行賦值流程便可。但這樣卻有著有明顯的性能缺陷,因?yàn)樵诶脤ο竺俺淠M繼承時,每個實(shí)例都會擁有一份父類成員變量和方法的副本,而成員方法只是一段對變量操作的可執(zhí)行文本區(qū)域而已,這段區(qū)域不用為每個實(shí)例復(fù)制一份,所有的實(shí)例均可共享,這就造成了對內(nèi)存資源的極度浪費(fèi)。并且對象冒充也無法繼承 prototype 域的變量和方法。

而基于原型的繼承則可以使子類擁有一條完整的原型鏈,并且所有子類實(shí)例的原型都指向同一引用,相對于對象冒充,可極大的節(jié)省內(nèi)存開銷。但基于原型繼承的缺陷也相當(dāng)明顯,就是父類的構(gòu)造函數(shù)不能有參數(shù),因?yàn)閷ψ宇?prototype 域的修改需在聲明子類對象之后才能進(jìn)行,而用子類構(gòu)造函數(shù)的參數(shù)去初始化父類構(gòu)造函數(shù)的屬性是無法實(shí)現(xiàn)的。

因此可以結(jié)合二者的優(yōu)點(diǎn),采用混合的方式模擬繼承,即用對象冒充的方式給屬性賦值,用原型鏈的方式繼承方法,示例代碼如下:


            				
 Function ClassA(name){ 
 this.name = name; 
 } 
 ClassA.prototype.sayHello = function(){ 
 alert("Hello, " +  this.name); 
 } 
 Function ClassB(name,time){ 
 ClassA.call(this, name); 
 this.time = time; 
 } 
 ClassB.prototype = new ClassA(); 
 ClassB.prototype.sayGoodbye = function(){ 
 alert("Goodbye " + this.name + ",it's " + this.time + " now !"); 
 } 
 var objA = new  ClassA("Tom"); 
 var objB = new  ClassB("Jerry","11:30am"); 
 objA. sayHello();// output is: "Hello, Tom"
 objB.sayHello(); // output is: "Hello, Jerry"
 objB.sayGoodbye();//output is: "Goodbye Jerry,it ’ s 11:30am now !"

          

JavaScript 繼承方式


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯(lián)系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長非常感激您!手機(jī)微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發(fā)表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 黄色影院在线观看视频 | 欧美一区二区三区东南亚 | 夜夜艹日日干 | 国产精品成人一区二区三区 | 91麻豆精品一二三区在线 | 伊人这里只有精品 | 国产va | 国产色综合天天综合网 | 日韩高清欧美 | 不卡一区二区在线 | 国产成人精品一区二区视频 | 国产精品久久精品 | 欧美成人一区二区 | 国产精品边做奶水狂喷小说 | 九九精品视频在线免费观看 | 国产99久久精品一区二区 | 五月天婷婷在线观看 | 欧美国产成人一区二区三区 | 日日插夜夜操 | 国产最新在线视频 | 国产精品9999久久久久 | 婷婷爱爱| 国产精品九九热 | 黄色毛片一级 | 久久无码精品一区二区三区 | 四虎永久影院永久影库 | 亚洲最大色网站 | 日本一区二区三区免费看 | 色婷婷久久综合中文网站 | 免费在线看h | 亚洲字幕 | 天天看天天干 | 精品国产一区二区三区四区不 | 国产成人免费全部网站 | 在线观看日韩 | 亚洲狠狠色丁香婷婷综合 | 久久精品国产99国产精品亚洲 | 国产精品夜色视频一区二区 | 亚州激情视频在线播放 | 在线成人a毛片免费播放 | 92精品国产成人观看免费 |