淺談JS繼承_借用構(gòu)造函數(shù) & 組合式繼承
2.借用構(gòu)造函數(shù)
為解決原型中包含引用類(lèi)型值所帶來(lái)的問(wèn)題, 我們使用一種叫做 借用構(gòu)造函數(shù)(constructor stealing)的技術(shù)(又叫偽造對(duì)象或經(jīng)典繼承)。
這種技術(shù)的基本思想:在子類(lèi)構(gòu)造函數(shù)內(nèi)部調(diào)用超類(lèi)型構(gòu)造函數(shù)。
通過(guò)使用apply()和call()方法可以在新創(chuàng)建的子類(lèi)對(duì)象上執(zhí)行構(gòu)造函數(shù)。
function SuperType(){ this.colors = ["red", "blue", "green"]; } function SubType(){ //繼承了 SuperType SuperType.apply(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
在上述例子中,實(shí)際上是在新創(chuàng)建的SubType實(shí)例(instance1 instance2)的環(huán)境下調(diào)用了SuperType的構(gòu)造函數(shù)。這樣一來(lái),就會(huì)在新SubType對(duì)象上執(zhí)行SuperType()函數(shù)中定義的所有對(duì)象初始化代碼。 所以Subtype的每個(gè)實(shí)例就都會(huì)具有自己的colors屬性的副本了。
傳遞參數(shù)
對(duì)于原型鏈來(lái)講,借用構(gòu)造函數(shù)有一個(gè)很大的優(yōu)勢(shì),即可以在子類(lèi)型構(gòu)造函數(shù)中想超類(lèi)型構(gòu)造函數(shù)傳遞參數(shù)。
function SuperType(name){ this.name = name; } function SubType(){ SuperType.call(this, "Bob"); this.age = 18; } var instance1 = new SubType(); alert(instance1.age); //18 alert(instance1.name); //Bob
借用構(gòu)造函數(shù)的問(wèn)題:
方法都在構(gòu)造函數(shù)中定義,因此函數(shù)復(fù)用就無(wú)從談起了。而且,在超類(lèi)型的原型中定義的方法,對(duì)子類(lèi)型而言也是不可見(jiàn)的。
3. 組合繼承
組合繼承(combination inheritance), 有時(shí)候也叫作偽經(jīng)典繼承, 指的是將原型鏈和借用構(gòu)造函數(shù)的技術(shù)組合到一起。從而發(fā)揮二者之長(zhǎng)的一種繼承模式。
使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承;
通過(guò)借用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。
這樣,既通過(guò)在原型上定義方法實(shí)現(xiàn)了函數(shù)的復(fù)用,又能保證每個(gè)實(shí)例都有他自己的屬性。
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.sayAge = function(){ alert(this.age); } var instance1 = new SubType("Bob", 22); instance1.colors.push("black"); alert(instance1.colors); //red,blue,green,black instance1.sayName(); //Bob instance1.sayAge(); //22 var instance2 = new SubType("Alice", 21); alert(instance2.colors); //red,blue,green instance2.sayName(); //Alice instance2.sayAge(); //21
在這個(gè)例子中, SuperType構(gòu)造函數(shù)定義了兩個(gè)屬性: name和colors。 SuperType的原型定義了一個(gè)方法sayName()。
SubType構(gòu)造函數(shù)在調(diào)用SuperType構(gòu)造函數(shù)時(shí)傳入了name參數(shù),定義了他自己的屬性age。然后將SuperType的實(shí)例賦值給SubType的原型。在該原型上定義了方法sayAge()。
這樣一來(lái),就可以讓兩個(gè)不同的SubType實(shí)例既分別擁有自己的屬性 - 包括colors屬性,又可以使用相同的方法。
以上這篇淺談JS繼承_借用構(gòu)造函數(shù) & 組合式繼承就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)鼠標(biāo)觸發(fā)圖片抖動(dòng)效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)觸發(fā)圖片抖動(dòng)效果的方法,通過(guò)定時(shí)器定時(shí)遞歸調(diào)用rattleimage函數(shù)實(shí)現(xiàn)抖動(dòng)效果,非常實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02JavaScript實(shí)現(xiàn)在頁(yè)面刷新時(shí)成功發(fā)送停止請(qǐng)求
最近接到一個(gè)需求,需要在頁(yè)面刷新或者關(guān)閉瀏覽器標(biāo)簽頁(yè)的時(shí)候觸發(fā)停止當(dāng)前sql的接口,所以本文小編給大家詳細(xì)介紹了解決方案和實(shí)現(xiàn)代碼,需要的朋友可以參考下2023-11-11JS+CSS實(shí)現(xiàn)淡入式焦點(diǎn)圖片幻燈切換效果的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)淡入式焦點(diǎn)圖片幻燈切換效果的方法,實(shí)例分析了javascript操作圖片、css等元素實(shí)現(xiàn)幻燈片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02返回對(duì)象在當(dāng)前級(jí)別中是第幾個(gè)元素的實(shí)現(xiàn)代碼
我就是想怎么獲取 每個(gè)層 相對(duì)于父級(jí)層 是第幾個(gè),需要的朋友可以參考下。2011-01-01TypeScript 類(lèi)型編程之索引類(lèi)型遞歸去掉可選修飾
這篇文章主要介紹了TypeScript 類(lèi)型編程之索引類(lèi)型遞歸去掉可選修飾,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08微信小程序云開(kāi)發(fā)實(shí)現(xiàn)分頁(yè)刷新獲取數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了微信小程序云開(kāi)發(fā)實(shí)現(xiàn)分頁(yè)刷新獲取數(shù)據(jù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08微信小程序Error:Fail?to?open?IDE問(wèn)題的解決方法
今天學(xué)習(xí)小程序時(shí)無(wú)法通過(guò)HBuilderX運(yùn)行微信小程序,查了相關(guān)資料后解決了,下面這篇文章主要給大家介紹了關(guān)于微信小程序Error:Fail?to?open?IDE問(wèn)題的解決方法,需要的朋友可以參考下2023-04-04echarts自定義餅圖數(shù)據(jù)刷新和顏色渲染問(wèn)題淺析
這篇文章主要給大家介紹了關(guān)于echarts自定義餅圖數(shù)據(jù)刷新和顏色渲染問(wèn)題的相關(guān)資料,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,需要的朋友可以參考下2023-05-05