Javascript無參數和有參數類繼承問題解決方法
更新時間：2015年03月02日 10:57:39 投稿：junjie
這篇文章主要介紹了Javascript無參數和有參數類繼承問題解決方法,本文講解了無參數類繼承的問題和有參類繼承的問題,并給出了解決方案,需要的朋友可以參考下
說到Javascript的類繼承，就必然離不開原型鏈，但只通過原型鏈實現的繼承有著不少缺陷。
無參數類繼承的問題
先看一段示例代碼，實現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
這段代碼的主要問題是：
1.需要實例化A作為B的原型，此時就執(zhí)行了A的構造函數。但按照面向對象的規(guī)則，實例化B之前，B及其父類A的構造函數都不應該執(zhí)行。
2.更改了B的prototype，導致b.constructor不是B而是A。
有參類繼承的問題
假設A和B都有兩個字符串參數s1和s2，A中計算了兩段字符串的總長度，B直接以s1、s2為參數調用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");
可以看到，這段代碼中根本沒有辦法把s1和s2傳到A，而又因為實例化A作為B的原型時沒有參數，所以出現了異常：
復制代碼 代碼如下:
s1 is undefined
解決方案
s1和s2的作用域只在B內，要把它們傳到A，就只能在B中操作，借助函數的apply方法就可以實現之：
復制代碼 代碼如下:
function B(s1, s2) {
A.apply(this, arguments);
alert(this.totalLength);
}
接下來的問題就是如何把A的方法添加到B的原型中去。這也不難，只要遍歷A.prototype，把方法復制到B.prototype即可。要注意的是，對于同名的方法，自然是子類優(yōu)先（重載），因而不能覆蓋：
復制代碼 代碼如下:
for (var m in A.prototype) {
if (!B.prototype[m]) { // 父類不能覆蓋子類的方法
B.prototype[m] = A.prototype[m];
}
}
后記
考慮到C#、Java等高級語言都拋棄了多繼承，因此，本文所討論的也只是單繼承的情況。而本文所述的繼承方法，也會寫成jRaiser的一個擴展，遲些發(fā)布。
相關文章
這篇文章主要給大家介紹了關于JS數組合并與對象合并的方法,本文將介紹常見的JS對象合并和數組合并方法,幫助讀者更好地理解和運用這些方法,需要的朋友可以參考下2024-12-12
這篇文章主要為大家詳細介紹了JS百度地圖搜索懸浮窗功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
在很多情況下，點要素圖層中的要素數量可能會成百上千，如果一個點要素圖層中的點數量很多，我們就會采取圖層聚合的方式對其進行處理，本文就來介紹一下，感興趣的可以了解一下2021-09-09
這篇文章主要介紹了詳解JSON Web Token 入門教程，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了JavaScript類型判斷的四種方法，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下2020-10-10
獲取offsetTop和offsetLeft值的js代碼(兼容)
offsetTop和offsetLeft的值在某些特殊的情況下是會使用到的，為了實現值的準確獲取，本文采用js代碼實現下，有需求的朋友可以參考下哈2013-04-04
這篇文章主要對JavaScript中的WeakMap進行深入探究，包括它的原理、用法和注意事項等，文中的示例代碼簡潔易懂，需要的小伙伴可以參考一下2023-05-05
JavaScript 沒有任何特定語言功能來支持命名空間，但很容易使用對象來模擬命名空間。今天我們就來探討下這個問題，希望大家能夠喜歡。2015-04-04
Math對象是一個內置對象,具有數學常數和函數的屬性和方法,不是一個函數對象,下面這篇文章主要給大家介紹了關于javascript中內置對象Math的介紹及用法案例的相關資料,需要的朋友可以參考下2022-03-03
前段時間同事在群里對jQuery里的.data()方法接下來介紹jQuery $.data()方法使用注意細節(jié),需要了解的朋友可以參考下2012-12-12