JavaScript繼承方式（1）

前段時間溫故了下JS OO之寫類方式，從這篇開始我們看看JS OO之繼承方式。

物件導向的語言多數都支援繼承，繼承最重要的優點就是代碼複用，從而構建大型軟體系統。如果一個類能夠重用另一個類的屬性和或方法，就稱之為繼承。從這個角度來看看JS的繼承方式。JS中繼承方式與寫類方式息息相關。不同的寫類方式造成不同的繼承方式。各種流行JS庫繼承方式也各不相同。從最簡單的複用開始。

 

1、建構函式方式寫類，通過方法調用複製父類屬性/欄位到子類 實現繼承

這裡父類，子類都採用建構函式方式寫，不用原型。子類調用父類函數來複製父類的屬性。

/** * 父類Polygon:多邊形 * @param {Object} sides */function Polygon(sides) {this.sides = sides;this.setSides = function(s) {this.sides=s;}}/** * 子類Triangle:三角形 */function Triangle() {this.tempfun = Polygon;//父類引用賦值給子類的一個屬性tempfunthis.tempfun(3);//調用delete this.tempfun;//刪除該屬性this.getArea = function(){};}//new個對象 var tri = new Triangle();console.log(tri.sides);//繼承的屬性console.log(tri.setSides);//繼承的方法console.log(tri.getArea);//自有的方法//缺點是對於Triangle的執行個體對象用instanceof為父類Polygon時是falseconsole.log(tri instanceof Triangle);//trueconsole.log(tri instanceof Polygon);//false

因為 JavaScript中具名函數的多種調用方式 ，子類還可以有以下的多種實現方式。只是在子類中調用父類方法不同而已。

function Triangle() {Polygon.call(this,3); //call方式調用父類this.getArea = function(){};}function Triangle() {Polygon.apply(this,[3]); //apply方式調用父類this.getArea = function(){};}function Triangle() {var temp = new Polygon(3); //new方式調用父類for(atr in temp) { //全部複製給子類this[atr] = temp[atr];}this.getArea = function(){};}

這種方式的缺點是子類的執行個體對象用instanceof檢查父類時總是false。這與java中繼承"is a "的關係是違背的。

 

2、原型方式寫類，原型方式繼承

core JS自身的對象系統就是採用原型方式(prototype based)繼承的。或者說core JS沒有採用常見的類繼承(class based)系統，而是使用原型繼承來實現自己的對象系統。工作中我們也可以用原型方式來實現繼承，代碼複用以構建自己的功能模組。 

/** * 父類Polygon:多邊形 *  */function Polygon() {}Polygon.prototype.sides = 0;Polygon.prototype.setSides = function(s) {this.sides=s;}/** * 子類Triangle:三角形 */function Triangle() {}Triangle.prototype = new Polygon(); //這是原型繼承關鍵的一句Triangle.prototype.getArea = function(){}//new個對象var tri = new Triangle();console.log(tri.sides);//繼承的屬性console.log(tri.setSides);//繼承的方法console.log(tri.getArea);//自有方法//instanceof測試console.log(tri instanceof Triangle);//true，表明該對象是三角形console.log(tri instanceof Polygon);//true，表明三角形也是多邊形

雖然從輸出可以看出子類繼承了父類Polygon的屬性sides和方法setSides，但sides是0，怎麼會是三角形呢。還得調用下tri.setSides(3)使之成為三角形。這樣似乎很不方便。不能傳參數，即是原型方式的缺點。優點是正確的維護了"is a"的關係。

 

3、組合建構函式/原型方式寫類，採用前面種方式繼承

這種方式父類，子類的屬性都掛在建構函式裡，方法都掛在原型上。

/** * 父類Polygon:多邊形 */function Polygon(sides) {this.sides = sides;}Polygon.prototype.setSides = function(s) {this.sides=s;}/** * Triangle 三角形 * @param {Object} base 底 * @param {Object} height 高 */function Triangle(base,height) {Polygon.call(this,3);//複製父類屬性給自己this.base = base;this.height = height;}Triangle.prototype = new Polygon();//複製父類方法給自己Triangle.prototype.getArea = function(){ //最後定義自己的方法return this.base*this.height/2;}//new個對象var tri = new Triangle(12,4);console.log(tri.sides);//繼承的屬性console.log(tri.setSides);//繼承的方法console.log(tri.base);//自有屬性console.log(tri.height);//自有屬性console.log(tri.getArea);//自有方法//instanceof測試，表明正確的維護了"is a"的關係console.log(tri instanceof Triangle);//true，表明該對象是三角形console.log(tri instanceof Polygon);//true，表明三角形也是多邊形

 

相關：

JavaScript繼承方式（2） 

JavaScript繼承方式（3）

JavaScript繼承方式（4）