首頁  >  文章  >  web前端  >  Javascript無參數且有參數類別繼承問題解決方法_javascript技巧

Javascript無參數且有參數類別繼承問題解決方法_javascript技巧

WBOY
WBOY原創
2016-05-16 16:11:391021瀏覽

說到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的原型,此時就執行了A的建構子。但依照物件導向的規則,在實例化B之前,B及其父類別A的建構子都不應該執行。

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即可。要注意的是,對於同名的方法,自然是子類別優先(重載),因而不能覆蓋:
複製程式碼 程式碼如下:

for (var m in A.prototype) {
  if (!B.prototype[m]) {  // 父類別不能覆寫子類別的方法
    B.prototype[m] = A.prototype[m];
  }
}

後記

考慮到C#、Java等高階語言都拋棄了多繼承,因此,本文所討論的也只是單繼承的情況。而本文所述的繼承方法,也會寫成jRaiser的一個擴展,遲些發布。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn