基于JavaScript實現(xiàn)繼承機制之構(gòu)造函數(shù)+原型鏈混合方式的使用詳解
構(gòu)造函數(shù)、原型實現(xiàn)繼承的缺陷
首先來分析構(gòu)造函數(shù)和原型鏈兩種實現(xiàn)繼承方式的缺陷：
構(gòu)造函數(shù)（對象冒充）的主要問題是必須使用構(gòu)造函數(shù)方式，且無法繼承通過原型定義的方法，這不是最好的選擇。不過如果使用原型鏈，就無法使用帶參數(shù)的構(gòu)造函數(shù)了。開發(fā)者如何選擇呢？答案很簡單，兩者都用。
構(gòu)造函數(shù)+原型混合方式
這種繼承方式使用構(gòu)造函數(shù)定義類，并非使用任何原型。創(chuàng)建類的最好方式是用構(gòu)造函數(shù)定義屬性，用原型定義方法。這種方式同樣適用于繼承機制，用對象冒充繼承構(gòu)造函數(shù)的屬性，用原型鏈繼承 prototype 對象的方法。用這兩種方式重寫前面的例子，代碼如下：
function ClassA(sColor) {
this.color = sColor;
}
ClassA.prototype.sayColor = function () {
alert(this.color);
};
function ClassB(sColor, sName) {
ClassA.call(this, sColor);
this.name = sName;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () {
alert(this.name);
};
在此例子中，繼承機制由兩行突出顯示的藍色代碼實現(xiàn)。在第一行突出顯示的代碼中，在 ClassB 構(gòu)造函數(shù)中，用對象冒充繼承 ClassA 類的 sColor 屬性。在第二行突出顯示的代碼中，用原型鏈繼承 ClassA 類的方法。由于這種混合方式使用了原型鏈，所以 instanceof 運算符仍能正確運行。
下面的例子測試了這段代碼：
var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor(); //輸出 "blue"
objB.sayColor(); //輸出 "red"
objB.sayName(); //輸出 "John"
相關(guān)文章
在JavaScript中使用Promise.allSettled()的方法
Promise.allSettled()是一個游戲規(guī)則改變者，讓您等待所有承諾得到解決（解決或拒絕），然后根據(jù)結(jié)果采取行動，這篇文章主要介紹了如何在JavaScript中使用Promise.allSettled(),需要的朋友可以參考下2023-07-07
微信小程序的云開發(fā)功能剛剛上線，這篇文章主要介紹了小程序云開發(fā)部署攻略(圖文教程)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了微信小程序 彈窗自定義實例代碼的相關(guān)資料,有時候做開發(fā)項目的時候需要根據(jù)客戶需求更改原系統(tǒng)的組件，這里就對小程序中彈窗進行更改，需要的朋友可以參考下2017-03-03
父元素與子iframe相互獲取變量和元素對象的具體實現(xiàn)
父元素與子iframe相互獲取變量和元素對象的方法有很多,本文提供了一些不錯的示例另收集網(wǎng)上的一些，可以參考下2013-10-10
js 數(shù)組的for循環(huán)到底應該怎么寫？
說實話，我是個比較喜歡懷疑權(quán)威的人，但是在有些權(quán)威的問題一直在我面前閃，閃啊閃，我就開始不懷疑他們了，因為有10000個人說這個東西是對的，我就會覺得它的確是對的吧。2010-05-05
淺談Webpack4 Tree Shaking 終極優(yōu)化指南
這篇文章主要介紹了淺談Webpack4 Tree Shaking 終極優(yōu)化指南，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這里簡單介紹下js中的encode、decode的字符2012-10-10
這篇文章主要為大家介紹了JavaScript閉包，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
我們先看到的未開始的頁面黑色和白色方塊是隨機生成的，完了這么多把沒有發(fā)現(xiàn)時固定不變的。點擊一次方塊，程序需要判斷是黑色還是白色的。如果是黑色的，當然程序也是實現(xiàn)了一次自減，在動畫中是實現(xiàn)一次下移的，下移的時候點擊的方塊到黃顏色的區(qū)域會變成灰色2015-11-11
這篇文章主要介紹了JavaScript鍵盤事件常見用法,簡單描述了javascript鍵盤事件的分類、功能,并結(jié)合實例形式給出了javascript響應鍵盤事件相關(guān)使用技巧,需要的朋友可以參考下2019-01-01