面向對象的JavaScript之繼承(一) 類式繼承

引言

面向對象的編程語言都具繼承這一機制,而 JavaScript 是基於原型(Prototype)面向對象程序設計,因此它的實現方式也是基於原型(Prototype)實現的.

繼承的方式

• 類式繼承

• 構造函數繼承

• 組合繼承

• 原型式繼承

• 寄生式繼承

• 寄生組合式繼承

1.類式繼承

---

//聲明父類
function SuperClass(){
    //值類型
    this.superValue = true;
    //引用類型
    this.book = ['c','java','htnl']
}

//爲父類添加方法
SuperClass.prototype.getSuperValue =function(){
    return this.superValue;
}

//聲明子類
function SubClass(){
    this.subValue = false;
}
//繼承父類
SubClass.prototype = new SuperClass();

//爲子類添加方法
SubClass.prototype.getSubValue = function(){
    return this.subValue;
}

//測試
var a = new SubClass(); 
var b = new SubClass(); 
console.log(a.getSubValue()); //false
console.log(a.getSuperValue());  //true

console.log(a.book);//["c", "java", "htnl"]
console.log(b.book);//["c", "java", "htnl"]
a.book.push('css');
console.log(a.book);//["c", "java", "htnl", "css"]
console.log(b.book);//["c", "java", "htnl", "css"]

console.log(a.getSuperValue())//true
console.log(b.getSuperValue())//true
a.superValue = 'a';

console.log(a.getSuperValue())//a
console.log(b.getSuperValue())//true

console.log(a.getSubValue())//false
console.log(b.getSubValue())//false
a.subValue = 'sub';

console.log(a.getSubValue())//sub
console.log(b.getSubValue())//false

經過測試能夠得知類式繼承有以下特色:

1. 經過子類原型繼承父類的實例 實現繼承.

   子類實例的原型都是父類實例,因此 a b 都是用的是 父類的實例.因此它的屬性共用(值類型,引用類型)。那大家確定會問：爲何book 共用，而 subValue 沒有共用呢，下面就給你解釋，請看2

2. 引用類型是共用的,值類型是私用的。

   其實：值類型按理說應該和值類型同樣，都是共用的，可是由於 this 的緣由，this.superValue尋值時由近到遠，先尋找 a，若 a 沒有則尋找 a 的原型`prototype`,一直往上,若沒有則返回`"undefined"`,這樣你就知道爲何給a.book.push('css'); 以後 b.book 也發生了改變,由於它是尋找到原型上的 book 值,而a.superValue = 'a'; 則直接給 a 添加了個 superValue 屬性,而沒有去 原型`prototype`的superValue賦值,則輸出的時候也是就近.

---

下一節講解 面向對象的JavaScript之繼承(二) 構造函數繼承

參考

• 我的博客

• JavaScript 設計模式 --- 張容銘 著

注

本人對類式繼承的一點點理解,如果那裏解釋的有問題,請多指教,謝謝!