快捷導(dǎo)航

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

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

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

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

復(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://m.fzitv.net");

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

alert(bloger.blog)   /*提示http://m.fzitv.net*/

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

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

}

/*請(qǐng)注意以下兩行代碼*/

Bloger.prototype = new Person();  

Bloger.prototype.constructor = Bloger;

var bloger = new Bloger("zhenn","http://m.fzitv.net");

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

alert(bloger.blog)   /*提示http://m.fzitv.net*/

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

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

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

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

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

function extend(childClass,parentClass){

    var F = new Function();

    F.prototype = parentClass.prototype;

    childClass.prototype = new F();

    childClass.prototype.constructor = childClass;

}

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

您可能感興趣的文章: