快捷導(dǎo)航

Javascript玩轉(zhuǎn)繼承(一)

更新時間：2014年05月08日 17:50:55 作者：

最近一直在學(xué)Javascript，打算寫一些文章，算做自己的學(xué)習(xí)心得吧，也可以算是學(xué)習(xí)筆記。沒有系統(tǒng)的知識點，太基礎(chǔ)的不想寫，主要是寫一些自己覺得有價值的地方

Javascript究竟是一門面向?qū)ο蟮恼Z言，還是一門支持對象的語言，我想每個人都有著自己的看法。那些Javascript忠實的Fans一定講Javascript是一門面向?qū)ο蟮恼Z言，像《Javascript王者歸來》一書中對Javascript的說法是基于原型的面向?qū)ο?。我談?wù)勎覀€人的看法。面向?qū)ο蟮娜齻€特征，繼承，多態(tài)，封裝，Javascript雖然實現(xiàn)起來不像Java,C#等面向?qū)ο蟮恼Z言來得快，但是畢竟也有著一定的支持。因此說Javascript是面向?qū)ο蟮恼Z言是有著一定道理的，但是從繼承這個部分來談，一系列的繼承法，但是每個繼承法都無法實現(xiàn)真正面向?qū)ο笳Z言的威力，因此，說他面向?qū)ο笥兄欢ǖ臓繌?。綜上，我對Javascript的理解，更愿意把它叫做一種簡化的面向?qū)ο?，或者說"偽"面向?qū)ο螅ㄟ@個偽字絕無貶義）。

今天就從面向?qū)ο筮@個第一個特征：繼承來談。
什么是繼承？這個我不想廢話，有一只動物，有一個人，有一個女孩，這個就是一個最簡單，也是典型的繼承鏈。
在C#等面向?qū)ο笾?，很容易?

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

class Animal 
{    } 
class People:Animal 
{    } 
class Girl:People 
{    } 
 

那么在Javascript中，沒有類，沒有繼承的提供實現(xiàn)，我們該怎么做呢？
對象偽裝（構(gòu)造繼承法）
什么是對象偽裝呢？我們可能叫做構(gòu)造繼承更容易理解一些。顧名思義，就是用構(gòu)造函數(shù)來玩繼承。其實就是說把父類的構(gòu)造函數(shù)當成是一個普通的方法，放到子類的構(gòu)造函數(shù)中去執(zhí)行，這樣的話，當構(gòu)造對象的時候，子類的對象當然就可以構(gòu)造父類的方法啦！

還是用上面的那個例子，代碼如下：

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

function Animal() 
{ 
        this.Run=function(){alert("I can run");}; 
} 
function People(name) 
{ 
//在這里就是傳入了父類的構(gòu)造方法，然后執(zhí)行父類的構(gòu)造方法，這個時候就//可以使用父類中的方法了。 
        this.father=Animal; 
        this.father(); 
        //記得要刪除，否則在子類添加于父類相同名稱的方法時，會修改到父類。 
delete this.Father; 
this.name=name; 
        this.Say=function(){alert("My name is "+this.name);} 
} 
function Girl(name,age) 
{ 
        this.father=People; 
        this.father(name); 
        delete this.father; 
        this.age=age; 
        this.Introduce=function(){alert("My name is "+this.name+".I am "+this.age);}; 
} 

這樣的話就實現(xiàn)了一個繼承鏈，測試下：

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

var a=new Animal(); 
a.Run(); 
var p=new People("Windking"); 
p.Run(); 
p.Say(); 
var g=new Girl("Xuan",22); 
g.Run(); 
g.Say(); 
g.Introduce(); 

結(jié)果如下：

a.

b.

c.

d.

e.

f.

測試成功！

我們來總結(jié)一下這段代碼的關(guān)鍵，指定父類，聲明父類對象，然后刪除臨時變量，您是否覺得有些麻煩呢？至少我是這么覺得的，一旦忘記了delete，還要承擔(dān)父類被修改的風(fēng)險，針對這個，我們對這個用call和apply來改進！
接著看代碼，還是上面的例子（為了更加容易大家理解，需求改變一下，Animal有了名字）：

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

function Animal(name) 
{ 
        this.Run=function(){alert("I can Run");}; 
} 
function People(name) 
{ 
        //使用call方法實現(xiàn)繼承 
this.father=Animal; 
        this.father.call(this,name); 
        this.name=name; 
        this.SayName=function(){alert("My name is "+this.name;);}; 
} 
function Girl(name,age) 
{ 
        //使用apply方法來實現(xiàn)繼承 
        this.father=People; 
        this.father.apply(this,new Array(name)); 
        this.age=age; 
        this.Introduce=function(){alert("My name is "+this.name+".I am "+this.age);}; 
} 

用一樣的測試代碼，發(fā)現(xiàn)測試一樣成功。

如果是新手，可能看后面的這兩段代碼有些暈暈乎乎，什么是call,什么是apply呢？好，在玩轉(zhuǎn)繼承這個專題中，我加入一個增刊系列，如果對這個有不了解，可以看我的這個文章：《玩轉(zhuǎn)方法:call和apply 》。
對象偽裝，這只是一種實現(xiàn)繼承的方式，在接下來的文章，我會繼續(xù)寫出其他的繼承方式以及幾種繼承方式的優(yōu)劣，歡迎繼續(xù)關(guān)注。

您可能感興趣的文章: