詳解JavaScript繼承方式（一）

物件導向的語言多數都支援繼承，繼承最重要的優點就是程式碼重複使用，從而建構大型軟體系統。如果一個類別能夠重複使用另一個類別的屬性和或方法，就稱之為繼承。從這個角度來看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时是false
   console.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、組合建構子/原型方式寫類，採用前面種方式繼承

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

以上是詳解JavaScript繼承方式（一）的詳細內容。更多資訊請關注PHP中文網其他相關文章！