基于JavaScript實現(xiàn)繼承機制之構造函數(shù)+原型鏈混合方式的使用詳解
構造函數(shù)、原型實現(xiàn)繼承的缺陷
首先來分析構造函數(shù)和原型鏈兩種實現(xiàn)繼承方式的缺陷：
構造函數(shù)（對象冒充）的主要問題是必須使用構造函數(shù)方式，且無法繼承通過原型定義的方法，這不是最好的選擇。不過如果使用原型鏈，就無法使用帶參數(shù)的構造函數(shù)了。開發(fā)者如何選擇呢？答案很簡單，兩者都用。
構造函數(shù)+原型混合方式
這種繼承方式使用構造函數(shù)定義類，并非使用任何原型。創(chuàng)建類的最好方式是用構造函數(shù)定義屬性，用原型定義方法。這種方式同樣適用于繼承機制，用對象冒充繼承構造函數(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 構造函數(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"
相關文章
JavaScript如何動態(tài)監(jiān)聽DOM元素高度詳解
這篇文章主要為大家詳細介紹了JavaScript如何動態(tài)監(jiān)聽DOM元素高度，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-07-07
本文介紹的方法基于javascript，css和myFunction結合可實現(xiàn)頁面展示轉(zhuǎn)換，下面有個示例，大家可以參考下2014-07-07
最近發(fā)現(xiàn)在對JS的學習中有很多朋友對this的指向問題還是有很大的誤區(qū)或者說只是大致了解,但是一旦遇到復雜的情況就會因為this指向問題而引發(fā)各種bug。所以這篇文章主要給大家介紹了關于js中this的指向問題的相關資料，需要的朋友可以參考下2018-11-11
原生javascript實現(xiàn)簡單的datagrid數(shù)據(jù)表格
這篇文章主要介紹了原生javascript實現(xiàn)簡單的datagrid數(shù)據(jù)表格的方法，效果十分棒,需要的朋友可以參考下2015-01-01
javaScript讓文本框內(nèi)的最后一個文字的后面獲得焦點實現(xiàn)代碼
讓文本框內(nèi)的最后一個文字的后面獲得焦點，在應用中很常見，接下來提供解決方案，按興趣的朋友可以了解下2013-01-01
js借助ActiveXObject實現(xiàn)創(chuàng)建文件
創(chuàng)建文件的方法有很多，在本文為大家詳細介紹下js中時如何實現(xiàn)的，感興趣的朋友不要錯過了2013-09-09
這篇文章主要為大家介紹了JS中var let聲明范圍區(qū)別示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
寫一個字符串轉(zhuǎn)成駝峰的方法，使用js代碼實現(xiàn)，具體如下，感興趣的朋友可以了解下哈2013-06-06
webpack 動態(tài)批量加載文件的實現(xiàn)方法
這篇文章主要介紹了webpack 動態(tài)批量加載文件的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
window對象提供了兩個方法來實現(xiàn)定時器的效果，分別是window.setTimeout()和window.setInterval。其中前者可以使一段代碼在指定時間后運行；而后者則可以使一段代碼每過指定時間就運行一次2015-10-10