再論Javascript的類(lèi)繼承
更新時(shí)間：2011年03月05日 14:20:56 作者：
說(shuō)到Javascript的類(lèi)繼承，就必然離不開(kāi)原型鏈，但只通過(guò)原型鏈實(shí)現(xiàn)的繼承有著不少缺陷。
無(wú)參數(shù)類(lèi)繼承的問(wèn)題
先看一段示例代碼，實(shí)現(xiàn)B繼承于A：
function A() {
}
A.prototype.a1 = function() {
};
function B() {
}
B.prototype = new A();
B.prototype.b1 = function() {
};
var b = new B();
alert(b.constructor == A); // true
alert(b.constructor == B); // false
這段代碼的主要問(wèn)題是：
* 需要實(shí)例化A作為B的原型，此時(shí)就執(zhí)行了A的構(gòu)造函數(shù)。但按照面向?qū)ο蟮囊?guī)則，實(shí)例化B之前，B及其父類(lèi)A的構(gòu)造函數(shù)都不應(yīng)該執(zhí)行。
* 更改了B的prototype，導(dǎo)致b.constructor不是B而是A。
有參類(lèi)繼承的問(wèn)題
假設(shè)A和B都有兩個(gè)字符串參數(shù)s1和s2，A中計(jì)算了兩段字符串的總長(zhǎng)度，B直接以s1、s2為參數(shù)調(diào)用A：
function A(s1, s2) {
this.totalLength = s1.length + s2.length;
}
A.prototype.a1 = function() {
};
function B(s1, s2) {
}
B.prototype = new A();
B.prototype.b1 = function() {
};
new B("ab", "123");
可以看到，這段代碼中根本沒(méi)有辦法把s1和s2傳到A，而又因?yàn)閷?shí)例化A作為B的原型時(shí)沒(méi)有參數(shù)，所以出現(xiàn)了異常：
s1 is undefined
解決方案
s1和s2的作用域只在B內(nèi)，要把它們傳到A，就只能在B中操作，借助函數(shù)的apply方法就可以實(shí)現(xiàn)之：
function B(s1, s2) {
A.apply(this, arguments);
alert(this.totalLength);
}
接下來(lái)的問(wèn)題就是如何把A的方法添加到B的原型中去。這也不難，只要遍歷A.prototype，把方法復(fù)制到B.prototype即可。要注意的是，對(duì)于同名的方法，自然是子類(lèi)優(yōu)先（重載），因而不能覆蓋：
for (var m in A.prototype) {
if (!B.prototype[m]) { // 父類(lèi)不能覆蓋子類(lèi)的方法
B.prototype[m] = A.prototype[m];
}
}
后記
考慮到C#、Java等高級(jí)語(yǔ)言都拋棄了多繼承，因此，本文所討論的也只是單繼承的情況。而本文所述的繼承方法，也會(huì)寫(xiě)成jRaiser的一個(gè)擴(kuò)展，遲些發(fā)布。
先看一段示例代碼，實(shí)現(xiàn)B繼承于A：
復(fù)制代碼 代碼如下:
function A() {
}
A.prototype.a1 = function() {
};
function B() {
}
B.prototype = new A();
B.prototype.b1 = function() {
};
var b = new B();
alert(b.constructor == A); // true
alert(b.constructor == B); // false
這段代碼的主要問(wèn)題是：
* 需要實(shí)例化A作為B的原型，此時(shí)就執(zhí)行了A的構(gòu)造函數(shù)。但按照面向?qū)ο蟮囊?guī)則，實(shí)例化B之前，B及其父類(lèi)A的構(gòu)造函數(shù)都不應(yīng)該執(zhí)行。
* 更改了B的prototype，導(dǎo)致b.constructor不是B而是A。
有參類(lèi)繼承的問(wèn)題
假設(shè)A和B都有兩個(gè)字符串參數(shù)s1和s2，A中計(jì)算了兩段字符串的總長(zhǎng)度，B直接以s1、s2為參數(shù)調(diào)用A：
復(fù)制代碼 代碼如下:
function A(s1, s2) {
this.totalLength = s1.length + s2.length;
}
A.prototype.a1 = function() {
};
function B(s1, s2) {
}
B.prototype = new A();
B.prototype.b1 = function() {
};
new B("ab", "123");
可以看到，這段代碼中根本沒(méi)有辦法把s1和s2傳到A，而又因?yàn)閷?shí)例化A作為B的原型時(shí)沒(méi)有參數(shù)，所以出現(xiàn)了異常：
復(fù)制代碼 代碼如下:
s1 is undefined
解決方案
s1和s2的作用域只在B內(nèi)，要把它們傳到A，就只能在B中操作，借助函數(shù)的apply方法就可以實(shí)現(xiàn)之：
復(fù)制代碼 代碼如下:
function B(s1, s2) {
A.apply(this, arguments);
alert(this.totalLength);
}
接下來(lái)的問(wèn)題就是如何把A的方法添加到B的原型中去。這也不難，只要遍歷A.prototype，把方法復(fù)制到B.prototype即可。要注意的是，對(duì)于同名的方法，自然是子類(lèi)優(yōu)先（重載），因而不能覆蓋：
復(fù)制代碼 代碼如下:
for (var m in A.prototype) {
if (!B.prototype[m]) { // 父類(lèi)不能覆蓋子類(lèi)的方法
B.prototype[m] = A.prototype[m];
}
}
后記
考慮到C#、Java等高級(jí)語(yǔ)言都拋棄了多繼承，因此，本文所討論的也只是單繼承的情況。而本文所述的繼承方法，也會(huì)寫(xiě)成jRaiser的一個(gè)擴(kuò)展，遲些發(fā)布。
相關(guān)文章
下面小編就為大家?guī)?lái)一篇JS去除空格和換行的正則表達(dá)式(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
javascript window.open打開(kāi)新窗口后無(wú)法再次打開(kāi)該窗口問(wèn)題的解決方法
這篇文章主要介紹了javascript window.open打開(kāi)新窗口后無(wú)法再次打開(kāi)該窗口問(wèn)題的解決方法即無(wú)法再次打開(kāi)窗口、第二次打開(kāi)不了,需要的朋友可以參考下2014-04-04
js前端加密庫(kù)Crypto-js進(jìn)行MD5/SHA256/BASE64/AES加解密的方法與示例
js加密解密可以使用crypto-js它可以進(jìn)行MD5、SHA-1、SHA-256、Base64、AES、DES、等算法和加密,這是一個(gè)對(duì)稱加密的庫(kù),可以使用 AES、DES、但沒(méi)有rsa等非對(duì)稱加密的方法2023-12-12
JavaScript實(shí)現(xiàn)數(shù)組對(duì)象去重的多種方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)組對(duì)象去重的多種方法，使用set對(duì)象或使用`reduce`方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2023-02-02
淺談JS封閉函數(shù)、閉包、內(nèi)置對(duì)象
下面小編就為大家?guī)?lái)一篇淺談JS封閉函數(shù)、閉包、內(nèi)置對(duì)象。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
JavaScript的eval JSON object問(wèn)題
在做AJAX應(yīng)用開(kāi)發(fā)的時(shí)候，我們通常喜歡把服務(wù)器端返回的JSON格式字符串在客戶端的回調(diào)函數(shù)中把它作為JavaScript代碼執(zhí)行并用一個(gè)變量保存起來(lái)，以方便使用返回的數(shù)據(jù)。2009-11-11
本文,我們來(lái)講講如何使用 JavaScript 實(shí)現(xiàn)圖片的縮放,當(dāng)然,我們可以類(lèi)比到其他的元素,比如視頻的縮放,文中有詳細(xì)的代碼示例,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
lhgcalendar時(shí)間插件限制只能選擇三個(gè)月的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇lhgcalendar時(shí)間插件限制只能選擇三個(gè)月的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章介紹了去掉gridPanel表頭全選框的小例子，有需要的朋友可以參考一下2013-07-07
JavaScript利用正則表達(dá)式來(lái)禁止鍵盤(pán)輸入數(shù)字
本文主要介紹了JavaScript利用正則表達(dá)式來(lái)禁止鍵盤(pán)輸入數(shù)字，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06