快捷導(dǎo)航

JavaScript設(shè)計模式學(xué)習(xí)之“類式繼承”

更新時間：2015年03月12日 10:35:38 投稿：junjie

這篇文章主要介紹了JavaScript設(shè)計模式學(xué)習(xí)之“類式繼承”,本文直接用代碼實(shí)例講解類式繼承的實(shí)現(xiàn)方法,需要的朋友可以參考下

在做一件事情之前，首先要清楚做這件事情的好處有什么，相信不會有哪個人愿意無緣無故的去做事情。一般說來，我們在設(shè)計類的時候，實(shí)際上就是希望能減少重復(fù)性的代碼，使用繼承可以完美的做到這一點(diǎn)，借助繼承機(jī)制，你可以在現(xiàn)有類的基礎(chǔ)上再次進(jìn)行設(shè)計并且充分利用它們已經(jīng)具備的各種方法，而對設(shè)計的修改也更為輕松。廢話不多說了，舉例說明：

復(fù)制代碼代碼如下:

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.dbjr.com.cn");

alert(bloger.name=="zhenn");   /*返回ture*/

alert(bloger.blog)   /*提示http://www.dbjr.com.cn*/

alert(bloger.getname()=="zhenn");   /*提示"bloger.getname is not a function"*/

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

復(fù)制代碼代碼如下:

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.dbjr.com.cn");

alert(bloger.name=="zhenn");   /*返回ture*/

alert(bloger.blog)   /*提示http://www.dbjr.com.cn*/

alert(bloger.getname()=="zhenn");   /*提示true*/

在這里需要對這兩行代碼解釋一下，我們知道，每一個構(gòu)造函數(shù)都有一個prototype屬性，這個屬性指向該構(gòu)造函數(shù)的原型對象，其實(shí)原型對象也是實(shí)例對象，只不過在原型對象中定義的屬性和方法可以提供給所有的實(shí)例對象共享，由此可以得出，新添加兩行代碼的意圖就是設(shè)置子類的原型對象指向父類的一個實(shí)例化對象，而父類的實(shí)例化對象會把父類的原型屬性方法統(tǒng)統(tǒng)繼承過來，這樣也就達(dá)到了我們的目的，子類的原型繼承了所有父類實(shí)例對象具有的屬性和方法。

但是還應(yīng)該注意Bloger.prototype.constructor = Bloger;這行代碼，因?yàn)榘炎宇惖膒rototype設(shè)置為父類的實(shí)例時，其constructor屬性會指向父類，所以要設(shè)置子類原型的constructor重新指向子類，至此，已經(jīng)完美實(shí)現(xiàn)了javascript的類式繼承！

為了簡化子類的聲明，可以把擴(kuò)展子類的整個過程寫在一個名為extend的函數(shù)中，作用就是基于一個給定的類結(jié)構(gòu)去創(chuàng)建一個新的類：

復(fù)制代碼代碼如下:

function extend(childClass,parentClass){

    var F = new Function();

    F.prototype = parentClass.prototype;

    childClass.prototype = new F();

    childClass.prototype.constructor = childClass;

}

有了這個extend這個函數(shù)，就可以很方便的擴(kuò)展子類了，只需調(diào)用這個函數(shù)即可，上述添加的兩行代碼可改為extend(Bloger,Person), 一樣可以實(shí)現(xiàn)完全繼承！

您可能感興趣的文章: