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), 一樣可以實現完全繼承！