JavaScript設計模式學習之“類式繼承”，javascript設計模式

JavaScript設計模式學習之“類式繼承”，javascript設計模式

在做一件事情之前，首先要清楚做這件事情的好處有什麼，相信不會有哪個人願意無緣無故的去做事情。一般說來，我們在設計類的時候，實際上就是希望能減少重複性的代碼，使用繼承可以完美的做到這一點，藉助繼承機制，你可以在現有類的基礎上再次進行設計並且充分利用它們已經具備的各種方法，而對設計的修改也更為輕鬆。廢話不多說了，舉例說明：
複製代碼 代碼如下:
function Person(name){
    this.name = name;
}
Person.prototype.getname = function(){
    return this.name;
}
 
function Bloger(name,blog){
    Person.call(this,name);
    this.blog = blog;
}
var bloger = new Bloger("zhenn","http://www.bkjia.com");
alert(bloger.name=="zhenn");   /*返回ture*/
alert(bloger.blog)   /*提示http://www.bkjia.com*/
alert(bloger.getname()=="zhenn");   /*提示"bloger.getname is not a function"*/

通過上例可以看到，Bloger在其內部通過call動態調用了其父類Person的原生屬性和方法（關於call的講解請參考http://www.bkjia.com/article/62086.htm），即可以理解為Bloger繼承了Person，成為它的一個子類，但是細心的同學會發現，Person原型對象中的方法，僅僅依靠call，是不能繼承過來的，這也就是會提示"bloger.getname is not a function"的原因所在了。不過不用擔心，對上述代碼稍作處理，即可解決這個問題！

複製代碼 代碼如下:
function Person(name){
    this.name = name;
}
Person.prototype.getname = function(){
    return this.name;
}
 
function Bloger(name,blog){
    Person.call(this,name);
    this.blog = blog;
}
/*請注意以下兩行代碼*/
Bloger.prototype = new Person(); 
Bloger.prototype.constructor = Bloger;
 
var bloger = new Bloger("zhenn","http://www.bkjia.com");
alert(bloger.name=="zhenn");   /*返回ture*/
alert(bloger.blog)   /*提示http://www.bkjia.com*/
alert(bloger.getname()=="zhenn");   /*提示true*/

在這裡需要對這兩行代碼解釋一下，我們知道，每一個建構函式都有一個prototype屬性，這個屬性指向該建構函式的原型對象，其實原型對象也是執行個體對象，只不過在原型對象中定義的屬性和方法可以提供給所有的執行個體對象共用，由此可以得出，新添加兩行代碼的意圖就是設定子類的原型對象指向父類的一個執行個體化對象，而父類的執行個體化對象會把父類的原型屬性方法統統繼承過來，這樣也就達到了我們的目的，子類的原型繼承了所有父類執行個體對象具有的屬性和方法。

但是還應該注意Bloger.prototype.constructor = Bloger;這行代碼，因為把子類的prototype設定為父類的執行個體時，其constructor屬性會指向父類，所以要設定子類原型的constructor重新指向子類，至此，已經完美實現了javascript的類式繼承！

為了簡化子類的聲明，可以把擴充子類的整個過程寫在一個名為extend的函數中，作用就是基於一個給定的類結構去建立一個新的類：
複製代碼 代碼如下:
function extend(childClass,parentClass){
    var F = new Function();
    F.prototype = parentClass.prototype;
    childClass.prototype = new F();
    childClass.prototype.constructor = childClass;
}

有了這個extend這個函數，就可以很方便的擴充子類了，只需調用這個函數即可，上述添加的兩行代碼可改為extend(Bloger,Person), 一樣可以實現完全繼承！