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.jb51.net");
alert(bloger.name=="zhenn");   /*回ture*/
alert(bloger.blog)   /*提示http://www.jb51.net*/
alert(bloger.getname()=="zhenn");   /*提示"bloger.getname is not a function"*/

透過上例可以看到，Bloger在其內部透過call動態呼叫了其父類Person的原生屬性與方法（關於call的解說請參考http://www.jb51.net/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.jb51.net");
alert(bloger.name=="zhenn");   /*回ture*/
alert(bloger.blog)   /*提示http://www.jb51.net*/
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), 一樣可以實現完全繼承！