基于JavaScript實現(xiàn)繼承機(jī)制之構(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ù)定義屬性，用原型定義方法。這種方式同樣適用于繼承機(jī)制，用對象冒充繼承構(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);
};
在此例子中，繼承機(jī)制由兩行突出顯示的藍(lán)色代碼實現(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)文章
函數(shù)四種調(diào)用模式以及其中的this指向
本文主要介紹了函數(shù)四種調(diào)用模式以及其中的this指向的相關(guān)知識，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡單放大鏡特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
今天小編就為大家分享一篇layer 刷新某個頁面的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了BootStrap tooltip提示框使用小結(jié) ,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
13個簡單的代碼優(yōu)化方法，可以讓你的代碼在 Chrome 的 V8 JavaScript 引擎編譯/運行你的 JavaScript 代碼更加快速2012-07-07
JS多個異步請求 按順序執(zhí)行next實現(xiàn)解析
這篇文章主要介紹了js多個異步請求 按順序執(zhí)行next實現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
理清apply(),call()的區(qū)別和關(guān)系
如果沒接觸過動態(tài)語言,以編譯型語言的思維方式去理解javaScript將會有種神奇而怪異的感覺,因為意識上往往不可能的事偏偏就發(fā)生了,甚至覺得不可理喻.2011-08-08
JSON 屬于文本，并且我們能夠把任何 JavaScript 對象轉(zhuǎn)換為 JSON，然后將 JSON 發(fā)送到服務(wù)器，這篇文章主要介紹了Json文件格式化方法,需要的朋友可以參考下2023-05-05
本文主要介紹了使用JavaScript渲染頁面的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,感興趣的小伙伴下面隨著小編來一起來學(xué)習(xí)吧2023-12-12
javascript對JSON數(shù)據(jù)排序的3個例子
這篇文章主要介紹了javascript對JSON數(shù)據(jù)排序的3個例子的相關(guān)資料2014-04-04