淺析JavaScript繼承方式

作者：snandy 2011-03-10 14:19:56

面向對象的語言多數都支持繼承，繼承最重要的優點就是代碼復用，從而構建大型軟件系統。如果一個類能夠重用另一個類的屬性和或方法，就稱之為繼承。從這個角度來看看JavaScript的繼承方式。

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

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

1、構造函數方式寫類，通過方法調用復制父類屬性/字段到子類實現繼承

這里父類，子類都采用構造函數方式寫，不用原型。子類調用父類函數來復制父類的屬性。

/**  
 * 父類Polygon:多邊形  
 * @param {Object} sides  
 */ 
function Polygon(sides) {  
    this.sides = sides;  
    this.setSides = function(s) {this.sides=s;}  
}  
 
/**  
 * 子類Triangle:三角形  
 */ 
function Triangle() {  
    this.tempfun = Polygon;//父類引用賦值給子類的一個屬性tempfun  
    this.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);//true  
console.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，表明三角形也是多邊形

#p#

這篇開始寫幾個工具函數實現類的擴展。每個工具函數都是針對特定的寫類方式(習慣)。這篇按照構造函數方式寫類：屬性(字段)和方法都掛在this上。以下分別提供了個類，分別作為父類和子類。

//  父類Person  
function Person(nationality) {  
    this.nationality = nationality;  
    this.setNationality = function(n) {this.nationality=n;};  
    this.getNationality = function() {return this.nationality;};  
}  
 
// 類Man  
function Man(name) {  
    this.name = name;  
    this.setName = function(n){this.name=n;};  
    this.getName = function(){return this.name;};  
}

繼承工具函數一

/**  
 * @param {Function} subCls 子類  
 * @param {Function} superCls 父類  
 * @param {Object} param 父類構造參數  
 */ 
function extend(subCls,superCls,param) {  
    superCls.call(subCls.prototype,param);  
}

使用如下

extend(Man,Person,'China');  
var m = new Man('jack');  
console.log(m.nationality);//China  
console.log(m.setNationality('Japan'));  
console.log(m.getNationality('Japan'));//Japan

輸出可以看到Man繼承了Person的屬性及所有方法。這種繼承方式于java的很不一樣哦，

class Animal {  
    int legs;     
    Animal(int l) {  
        legs = l;  
    }  
    int getLegs() {  
        return legs;  
    }  
}  
public class Person extends Animal{  
    //屬性（字段）  
    String name;      
    //構造方法（函數）  
    Person(int legs, String name) {  
        super(legs);//調用父類構造器  
        this.name = name;  
    }     
    //方法  
    String getName() {  
        return this.name;  
    }  
    public static void main(String[] args) {  
          
        Person p = new Person(2,"jack");          
        System.out.println(p.legs);  
    }  
}

Java中，子類Person在自身構造方法中調用父類構造方法super(legs)，創建對象的時候直接將父類構造參數legs:2傳進去，不僅僅只傳自己的name:jack。上面JavaScript繼承是在extend時傳父類構造參數(extend函數的第三個參數)，而不是在new Man時將父類構造參數傳過去。好，模擬Java來實現下extend，這里巧妙的在子類上暫存了父類引用。

繼承工具函數二

/**  
 * @param {Function} subCls  
 * @param {Function} superCls  
 */ 
function extend(subCls,superCls) {    
    subCls.supr = superCls;  
}

還是以Person為父類，來實現子類Woman

function Woman(nationality,name) {  
    Woman.supr.call(this,nationality);//和java有點類似哦，在子類中調用父類構造器  
    this.name = name;  
    this.setName = function(n){this.name=n;};  
    this.getName = function(){return this.name;};  
}<br>extend(Woman,Person);<br>

***，創建對象的方式和java也類似，即new的時候同時將父類構造參數(nationality:Japan)傳進去。

var w = new Woman('Japan','lily');  
console.log(w.nationality);//Japan  
w.setNationality('U.S.A');  
console.log(w.getNationality());//U.S.A

繼承工具函數三

/**  
 * @param {Function} subCls  
 * @param {Function} superCls  
 */ 
function extend(subCls,superCls) {  
    subCls.prototype = new superCls();    
}

父類，按原型方式寫，即屬性和方法都掛在原型上。

/**  
 *  父類Person  
 */ 
function Person(){}  
Person.prototype.nationality = 'China';  
Person.prototype.getNationality = function() {return this.nationality;}  
Person.prototype.setNationality = function(n) { this.nationality = n;}

子類繼承與父類

function Man() {}  
extend(Man,Person);

繼承父類的屬性和方法后，再添加子類自有屬性，方法

Man.prototype.name = 'jack';  
Man.prototype.getName = function() { return this.name;}  
Man.prototype.setName = function(n) { this.name=n;}

測試如下，

var m = new Man();  
console.log(m);  
console.log(m instanceof Person);

可以看到這種寫類方式，繼承方式完全采用原型機制。

#p#

繼承工具函數四

這種方式是目前比較流行的，51ditu網站的開發就是按照這種模式的。

/**  
 * @param {Function} subCls 子類  
 * @param {Function} superCls 父類  
 */ 
function extend(subCls,superCls) {    
    //暫存子類原型  
    var sbp = subCls.prototype;  
    //重寫子類原型--原型繼承  
    subCls.prototype = new superCls();  
    //重寫后一定要將constructor指回subCls  
    subCls.prototype.constructor = subCls;  
    //還原子類原型  
    for(var atr in sbp) {  
        subCls.prototype[atr] = sbp[atr];  
    }  
    //暫存父類    
    subCls.supr = superCls;  
}

按構造函數+原型方式寫類，即屬性掛在this上，方法掛在prototype上。

/**  
 *  父類Person  
 */ 
function Person(nationality){  
    this.nationality = nationality;  
}  
Person.prototype.getNationality = function() {return this.nationality;}  
Person.prototype.setNationality = function(n) { this.nationality = n;}  
 
/**  
 *  子類Man  
 */ 
function Man(nationality,name) {  
    Man.supr.call(this,nationality); //很重要的一句，調用父類構造器  
    this.name = name;  
}  
Man.prototype.getName = function() {return this.name;}  
Man.prototype.setName = function(n) {this.name=n;}

注意子類Man中要顯示的調用父類構造器已完成父類的屬性/字段拷貝。

extend調用，創建Man的實例

extend(Man,Person);  
var m = new Man('USA','jack');  
console.log(m);  
m.setName('lily');  
console.log(m.name);

繼承工具函數五

/**  
 * @param {String} className  
 * @param {String/Function} superClass  
 * @param {Function} classImp  
 */ 
function $class(className, superClass, classImp){  
    if(superClass === "") superClass = Object;  
    var clazz = function(){  
        return function(){  
            if(typeof this.init == "function"){  
                this.init.apply(this, arguments);  
            }  
        };  
    }();  
    var p = clazz.prototype = new superClass();  
    var _super = superClass.prototype;  
    window[className] = clazz;  
    classImp.apply(p, [_super]);  
}

定義父類Person

/**  
 * 父類 Person  
 */ 
$class('Person','',function(){  
    this.init = function(name){  
        this.name = name;  
    };  
    this.getName = function(){  
        return this.name;  
    };  
    this.setName = function(name){  
        this.name = name;  
    }  
});

子類Man

/**  
 * 子類 Man  
 */ 
$class('Man', Person, function(supr){  
    this.init = function(name, age){  
        supr.init.apply(this,[name]); // 該句很重要  
        this.age = age;  
    };  
    this.getAge = function(){  
        return this.age;  
    };  
    this.setAge = function(age){  
        this.age = age;  
    };  
});  
var m = new Man('Jack',25);  
console.log(m.name); // Jack  
console.log(m.age); // 25

從輸出看可以看到子類Man的確繼承了父類的屬性和方法。

原文鏈接：http://www.cnblogs.com/snandy/archive/2011/03/09/1977804.html

【編輯推薦】

如何編寫高質量的Javascript代碼
淺析JavaScript的寫類方式
JavaScript跨域總結與解決辦法
JavaScript版幾種常見排序算法分享
10個令人驚奇的HTML5和JavaScript效果

責任編輯：陳貽新來源： snandy的博客

JavaScript