類是什么?
許多剛接觸編程的朋友都可能理解不了類,其實(shí)類是對(duì)我們這個(gè)現(xiàn)實(shí)世界的模擬,把它說成“類別”或者“類型”可能會(huì)更容易理解一些。比如“人”這種動(dòng)物就是一個(gè)類,而具體某一個(gè)人就是“人”這個(gè)類的一個(gè)實(shí)例,“人”可以有許多實(shí)例(地球人超過六十億了),但“人”這個(gè)類只有一個(gè)。你或許會(huì)說那男人和女人不也是人么?怎么只能有一個(gè)?其實(shí)這里要談到一個(gè)繼承的東西,后邊才講,請(qǐng)繼續(xù)看下去。
如何建立一個(gè)類?
在C++中是以class來聲明一個(gè)類的,JavaScript與C++不同,它使用了與函數(shù)一樣的function來聲明,這就讓許多學(xué)Jscript的朋友把類與函數(shù)混在一起了,在Jscript中函數(shù)與類確實(shí)有些混,但使用久了自然而然會(huì)理解,這篇文章是針對(duì)想進(jìn)攻面向?qū)ο缶幊痰呐笥讯鴮懀筒淮蛩阋幌伦佑懻摰锰盍恕?br />
請(qǐng)看下邊這個(gè)類的定義:
function WuYouUser()
{
this.Name; //名字
}
上邊的代碼定義了一個(gè)WuYouUser(無憂用戶)類,它有個(gè)屬性:Name(名字)。Name就是WuYouUser類的一個(gè)屬性。
一個(gè)類有固定的屬性,但類的實(shí)例卻有不同的屬性值,就像我是屬于“人”這個(gè)類的,性別是男,而我有一個(gè)女同學(xué),她也屬于“人”類,但她的性別屬性值卻為女。
那么如何聲明某個(gè)類的一個(gè)實(shí)例呢?非常簡(jiǎn)單:
var Wo = new WuYouUser(); //實(shí)例一:“我”
var Biyuan = new WuYouUser(); //實(shí)例二:“碧原”(Biyuan哥,不好意思。。。嘿嘿)
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
類的屬性
這個(gè)Wo(我)就是WuYouUser類的一個(gè)實(shí)例,它擁有WuYouUser給它的一切:Name屬性、Sex屬性以及Age屬性,我們可以這樣子來設(shè)置它的屬性:
Wo.Name = "泣紅亭";
很簡(jiǎn)單是不是?試著運(yùn)行
window.document.write(Wo.Name);
看看,是不是輸出了我的名字:泣紅亭?
同樣設(shè)置一下碧原兄的屬性
Biyuan.Name = "碧原";
運(yùn)行
window.document.write(Biyuan.Name);
可以看到輸出了"碧原",也就說明了Biyuan與Wo同樣是WuYouUser類的實(shí)例,但卻是不同的實(shí)體,具有不同的屬性值。
屬性是可以設(shè)置默認(rèn)值的,無憂里都有記錄大家各自發(fā)了多少貼子,我們也同樣給WuYouUser類添加一個(gè)發(fā)貼數(shù)量的屬性ArticleCount
function WuYouUser()
{
this.Name;
this.ArticleCount = 0;
}
一個(gè)無憂新用戶剛注冊(cè)完之后他的發(fā)貼數(shù)量為0,在上邊的代碼中可以看到直接給屬性ArticleCount設(shè)置值為0。
可以運(yùn)行一下這樣的代碼:
var Wo = new WuYouUser();
window.document.write(Wo.ArticleCount);
可以看到輸出了0,說明ArticleCount屬性被我們成功設(shè)置默認(rèn)值為0
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
類的方法
方法這個(gè)詞不大好理解,我覺得說成行為會(huì)更容易理解。一個(gè)人具有許多共同的行為,比如睡覺、吃飯、走路等等,現(xiàn)在我們給WuYouUser類添加一個(gè)發(fā)貼的方法。
function WuYouUser()
{
this.Name;
this.ArticleCount = 0;
this.NewArticle = function()
{
/*
*
* 具體如何發(fā)貼我們大家都知道,不就是打打字,加加圖片再按一下保存之類的按鈕么?
* 關(guān)于具體如何發(fā)貼的代碼沒有必要在這里寫出來,我們要了解的僅僅是方法的定義與使用
* 我們?cè)谶@里實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的功能,也是很重要的功能:給我們的發(fā)貼數(shù)量加上1!
* 注意:恐龍等級(jí)就是這樣加出來的,因此呀……大家狂發(fā)貼吧。。。
*/
this.ArticleCount++;
}
}
既然定義好了這個(gè)方法,我們來試試效果如何:
var Wo = new WuYouUser();
Wo.NewArticle();
document.write(Wo.ArticleCount);
可以看到輸出了1,說明我們發(fā)貼成功了!真是有歷史紀(jì)念意義的一刻,離恐龍等級(jí)又近一步了。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
靜態(tài)屬性
靜態(tài)屬性又稱公共屬性,它不屬于某個(gè)類的實(shí)例,而是直接屬于某個(gè)類。
比如說無憂用戶有一個(gè)屬性:注冊(cè)用戶的數(shù)量,它是屬于整個(gè)無憂用戶的,而不是屬于泣紅亭或者誰的
靜態(tài)屬性的聲明方法是:
類名.prototype.屬性名 = 屬性值;
比如給WuYouUser類定義一個(gè)注冊(cè)用戶的數(shù)量Count:
WuYouUser.prototype.Count = 0;
那么如何讀取它呢?有兩種方法:
1. 直接用 WuYouUser.prototype.Count
2. 使用Wo.Count
這兩者沒有區(qū)別,都是得到0
雖然讀取方法可以有兩種,但在改變它的時(shí)候卻得特別小心了,請(qǐng)看下邊代碼
var Biyuan = new WuYouUser();
WuYouUser.prototype.Count++;
document.write(Wo.Count);
document.write(Biyuan.Count);
你會(huì)發(fā)現(xiàn)兩者的Count屬性都是1,也就是說WuYouUser.prototype.Count改變了會(huì)影響到各個(gè)實(shí)例的相應(yīng)屬性,其實(shí)原理就是Wo、Biyuan的Count屬性與WuYouUser.prototype.Count根本就是同一個(gè)!
現(xiàn)在來看另外一段代碼:
var Biyuan = new WuYouUser();
Biyuan.Count++; //特別注意一下這里,這是直接改變Biyuan的Count屬性
document.write(Biyuan.Count); // 輸出 1
document.write(WuYouUser.prototype.Count); //輸出 0
document.write(Wo.Count); //同樣輸出0,為什么?
可以看到如果直接修改實(shí)例的靜態(tài)屬性值,那么會(huì)出現(xiàn)其它實(shí)例甚至類的靜態(tài)屬性與它不同步了?這是因?yàn)橹苯有薷牡臅r(shí)候,該實(shí)例會(huì)生成一個(gè)屬于該實(shí)例的屬性Count,這個(gè)時(shí)候Biyuan.Count不再與WuYouUser.prototype.Count是同一個(gè)了,也不與Wo.Count是同一個(gè),這個(gè)Count屬性是屬于Biyuan自己所有的,以后改變了它也只是影響它自己而已。
因此如果不是特別的需要,建議不管在讀取還是賦值的時(shí)候,都統(tǒng)一使用WuYouUser.prototype.Count這樣的方式,以做到萬無一失!
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
靜態(tài)方法
與靜態(tài)屬性相似,它也有個(gè)另稱:公共方法,同樣屬于類本身的。
靜態(tài)方法的定義方式是:
類名.方法名 = function(參數(shù)1,參數(shù)2...參數(shù)n)
{
//方法代碼
}
我們現(xiàn)在就來定義一個(gè)無憂用戶類的注冊(cè)新用戶靜態(tài)方法:
WuYouUser.prototype.AddOne = function()
{
//*** 同樣具體代碼不寫出來,給靜態(tài)屬性Count增加1,表示注冊(cè)用戶數(shù)量又多一個(gè)
WuYouUser.prototype.Count++;
}
現(xiàn)在我們來看看如何用它,同樣有兩種方法:
1.直接使用WuYouUser.prototype.AddOne()
2.使用某實(shí)例的AddOne()
這兩種方法沒有什么不同:
var Wo = new WuYouUser();
var Biyuan = new WuYouUser();
document.write(WuYouUser.prototype.Count); // 0
Wo.AddOne();
document.write(WuYouUser.prototype.Count); // 1
document.write(Wo.Count); // 1
document.write(Biyuan.Count); // 1
WuYouUser.prototype.AddOne();
document.write(WuYouUser.prototype.Count); // 2
document.write(Wo.Count); // 2
document.write(Biyuan.Count); // 2
可以看出不管是使用Wo.AddOne()還是WuYouUser.prototype.AddOne()效果都是一樣的,都是給WuYouUser.prototype.Count加上1
現(xiàn)在再看一段代碼:
function NewClass() //由于上邊的WuYouUser類不合適當(dāng)這個(gè)例子的代碼,我聲明了一個(gè)新類NewClass
{
this.Name = "泣紅亭"; //這里默認(rèn)值為我的名字
}
NewClass.prototype.ChangeName = function(NewName)
{
this.Name = NewName;
}
var Wo = new NewClass();
Wo.ChangeName("鄭運(yùn)濤"); //我的真名
可以看到Wo.Name確實(shí)已經(jīng)變成了"鄭運(yùn)濤",這個(gè)方法似乎是可以用的,但里邊是不是內(nèi)有天機(jī)呢?
再看下邊的代碼,類的定義以及ChangeName的定義我們照樣,但改變一下下邊的代碼:
NewClass.prototype.ChangeName("鄭運(yùn)濤");
document.write(NewClass.Name); //undefined,即未定義
document.write(NewClass.prototype.Name); //鄭運(yùn)濤
var Wo = new NewClass();
document.write(Wo.Name); //泣紅亭
可以看到我們并沒有定義NewClass.prototype.Name這個(gè)靜態(tài)屬性,但編譯器給我們自己加了一個(gè)。
可是再看下邊輸出Wo.Name,它并不是為"鄭運(yùn)濤",而是原來的默認(rèn)值"泣紅亭",說明了什么?
其實(shí)很簡(jiǎn)單,看一下NewClass的定義里已經(jīng)有Name這個(gè)屬性,因此Wo也有自己的Name屬性,它跟NewClass.prototype.Name并不是同一個(gè)的,因此就還是那樣子。
那為什么前一個(gè)例子運(yùn)行了Wo.ChangeName("鄭運(yùn)濤")卻能夠?qū)崿F(xiàn)改變Wo.Name屬性呢?其實(shí)在這里跟改變Wo.Count的值是同一個(gè)道理,編譯器自動(dòng)給Wo增加了一個(gè)方法ChangeName,這個(gè)方法代碼與NewClass.prototype.ChangeName一樣,但Wo.ChangeName是Wo這個(gè)實(shí)例所特有的,而非NewClass.prototype.ChangeName!
分析可知道在靜態(tài)方法里盡量不要使用this這樣的關(guān)鍵字來引用實(shí)例本身的屬性,除非你有特別的目的,而且能夠清楚地明白這里邊的運(yùn)行機(jī)制!
如果真的需要在靜態(tài)方法里使用this,可以直接把this當(dāng)作參數(shù)傳進(jìn)去:
NewClass.ChangeName = function(This,NewName) //注意這里是This,不是this
{
This.Name = NewName;
}
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
構(gòu)造函數(shù)
一個(gè)類在初始化的時(shí)候其實(shí)也是一個(gè)函數(shù)的執(zhí)行過程,這個(gè)函數(shù)就是構(gòu)造函數(shù),我們看一下下邊的代碼:
function WuYouUser()
{
this.Name = "泣紅亭"; //默認(rèn)定義為泣紅亭
alert(this.Name);
}
var Wo = new WuYouUser();//可以看到出現(xiàn)一個(gè)窗口顯示泣紅亭三個(gè)字
可以看出類的定義不僅僅是定義了它的屬性與方法,還同時(shí)可以加入一些代碼,而這些代碼就是該類的構(gòu)造函數(shù)的代碼,在實(shí)例聲明過程中被執(zhí)行!
其實(shí)說起來,類的屬性與類的方法都是在構(gòu)造函數(shù)里執(zhí)行定義的,看下邊的代碼:
function WuYouUser()
{
this.Name = "泣紅亭";
return;
this.Sex = "男";
}
var Wo = new WuYouUser();
document.write(Wo.Name); //泣紅亭
document.write(Wo.Sex); //undefined,即未定義
看得出什么?Sex屬性是在return;之后的,而WuYouUser類的構(gòu)造函數(shù)遇到return即停止運(yùn)行,換句話說this.Sex = "男";這一行是沒有被執(zhí)行,即Sex屬性根本沒有被定義!
構(gòu)造函數(shù)可以有參數(shù),參數(shù)值在聲明實(shí)例的時(shí)候被傳入:
function WuYouUser(Name)
{
this.Name = Name;
}
var Wo = new WuYouUser("泣紅亭");
document.write(Wo.Name); //泣紅亭
構(gòu)造函數(shù)不需要返回值,但如果你設(shè)置了返回值,可以把它當(dāng)成一個(gè)函數(shù)來使用。
function Sum(a, b)
{
this.a = a;
this.b = b;
return this.a + this.b;
}
document.write(Sum(12, 23)); //輸出的是12與23的和35
var Obj = new Sum(12,23);
document.write(Obj.a) // 12
document.write(Obj.b) // 23
感覺挺奇妙,對(duì)吧?我寫這文章寫著寫著也覺得挺奇妙的,呵呵!
但強(qiáng)烈建議不要把一個(gè)類當(dāng)成一個(gè)函數(shù)來使用!如果你需要的是一個(gè)函數(shù),請(qǐng)直接寫成函數(shù)而不要寫成類,以免搞混了。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
繼承
繼承這個(gè)詞在面向?qū)ο蟮木幊汤锸欠浅V匾模m然JavaScript并不是真正面向?qū)ο蟮恼Z言,而是跟VB一樣是基于對(duì)象的語言,它同樣提供了繼承機(jī)制。
文章開頭時(shí)談到了男人與女人,這也同樣是兩個(gè)不同的類,但卻具有相同的一些屬性以及方法,而這些相同的特性是來自“人”這個(gè)類的,換句話說男人與女人繼承了“人”的所有特性!但是男人與女人卻有其不同的地方,編程語言里的繼承也一樣,一個(gè)類A繼承了另一個(gè)類B,那么類B就是類A的父類,類A就是類B的派生類,也稱為子類。比如男人就是人的派生類,而人就是男人的父類。最高一級(jí)的類稱為基類,想象一下就可以明白,男人繼承自人,男孩繼承自男人,人就是男孩的基類,男人就是男孩的父類。
>>>>>>>>>>>>>>>>>>>>
題外:多重繼承
這里再涉及一個(gè)多重繼承的話題,但如果你僅僅是學(xué)JavaScript的話就沒有必要看下去,因?yàn)镴avaScript不提供多重繼承,準(zhǔn)確一點(diǎn)說沒有一種簡(jiǎn)單而標(biāo)準(zhǔn)的方法來實(shí)現(xiàn)多重繼承(其實(shí)是有辦法實(shí)現(xiàn)的,只不過麻煩了一點(diǎn),而且確實(shí)沒有必要)。
在C++中是有多重繼承的概念的,這里是討論JavaScript,因此不打算講,只是說說它的一點(diǎn)點(diǎn)思想以供參考。
在上邊男孩的繼承問題中,男孩其實(shí)不僅僅是繼承自男人,還繼承自孩子(有男孩子,也有女孩子)這個(gè)類,因此,它同時(shí)繼承了兩個(gè)類:男人與男孩,這就是所謂的多重繼承。
好,這個(gè)問題打住,我們還是回歸主題。
>>>>>>>>>>>>>>>>>>>>
先看第一個(gè)類的定義:
function A()
{
this.Name = "泣紅亭";
alert(this.Name);
}
這個(gè)類定義了一個(gè)屬性Name,默認(rèn)值為"泣紅亭"
現(xiàn)在看第二個(gè)類的定義:
function B()
{
this.Sex = "男";
alert(this.Sex);
}
定義了一個(gè)屬性Sex,默認(rèn)值為"男"
繼承的方式就是 子類.prototype = new 父類();
現(xiàn)在我們來讓B類繼承A類:
B.prototype = new A();
運(yùn)行這一段代碼:
var Obj = new B(); //首先打開警告窗口顯示"泣紅亭",再顯示"男"
可以從上邊的結(jié)果看出B類繼承了A類,擁有了A類的屬性Name,并且執(zhí)行了A類的構(gòu)造函數(shù),而且A類的構(gòu)造函數(shù)在B類的構(gòu)造函數(shù)執(zhí)行之前執(zhí)行。因此我們利用這個(gè)可以實(shí)現(xiàn)重寫父類的方法以及重設(shè)置父類某屬性的默認(rèn)值:
function A()
{
this.Name = "泣紅亭";
this.Show = function()
{
alert("這是A類的Show方法");
}
alert(this.Name);
}
function B()
{
this.Name = "鄭運(yùn)濤";
this.Show = function()
{
alert("這是B類的Show方法");
}
alert(this.Name);
}
var Obj = new B();
Obj.Show();
結(jié)果出現(xiàn)了三次警告窗口,第一個(gè)內(nèi)容為泣紅亭,是執(zhí)行A類的構(gòu)造函數(shù)里的alert(this.Name),那時(shí)候Name屬性值還為"泣紅亭",因?yàn)锽類的構(gòu)造函數(shù)還沒執(zhí)行,第二次內(nèi)容為"鄭運(yùn)濤",這是B類里的alert(this.Name),因?yàn)锽類的構(gòu)造函數(shù)里給Name重賦值為"鄭運(yùn)濤"。最后是調(diào)用了Obj.Show(),執(zhí)行了不是A類的Show方法里的Show(顯示"這是A類的Show方法"),而是執(zhí)行了B類的Show(顯示"這是B類的Show方法"),很明顯Show方法被重寫了。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
類作為一個(gè)對(duì)象時(shí)的屬性與方法(不知道如何簡(jiǎn)潔地表達(dá),因此用了這么長(zhǎng)的題目)
不知道在這里談這個(gè)話題是否有點(diǎn)混人耳目,但又覺得不談這篇文章就不算完整,因?yàn)槲恼履康木褪且屓烁闱宄惖姆椒矫婷妗?br />
看了這一小節(jié)的題目,或許你會(huì)覺得奇怪,類就是類,怎么會(huì)“作為一個(gè)對(duì)象”呢?在JavaScript里,一切都是對(duì)象,包括類!對(duì)象可以有屬性,可以有方法,類也同樣可以有,但這個(gè)非常容易跟前邊說到的靜態(tài)屬性與靜態(tài)方法搞混了,因此要仔細(xì)看清楚兩者的分別!
定義一個(gè)類:
function WuYouUser()
{
this.Name = "泣紅亭";
}
定義類作為一個(gè)對(duì)象時(shí)的屬性:
WuYouUser.Url = "http://www.51js.com"; //靜態(tài)屬性的定義是:WuYouUser.prototype.Url = "http://www.51js.com";
var Wo = new WuYouUser();
document.write(WuYouUser.Url); //http://www.51js.com
document.write(Wo.Url); //undefined,即未定義!注意這里的未定義
從這里可以看出Url這個(gè)屬性是WuYouUser自個(gè)所有,改變了它與其它類以及它的子類完全無關(guān)!
引用類的屬性只有一個(gè)辦法,就是類名.屬性名,改變它也一樣。
定義類作為一個(gè)對(duì)象時(shí)的方法:
WuYouUser.ChangeUrl = function()
{
this.Url = "http://51js.com";
}
你或許會(huì)覺得奇怪,這里的this是什么?因?yàn)镃hangeUrl這個(gè)方法是屬于對(duì)象WuYouUser的,因此this指的就是WuYouUser本身!
可以運(yùn)行下邊的代碼試試:
document.write(WuYouUser.Url); //
http://www.51js.com
WuYouUser.ChangeUrl();
document.write(WuYouUser.Url); //
http://51js.com
明顯ChangeUrl直接修改了WuYouUser.Url的值,因此后邊才能輸出
http://51js.com
如果你這一節(jié)看不明白,也不要著急,編程嘛,許多東東都只能意會(huì)不能言傳,而且我又沒口才,說不清楚,只要以后多寫寫代碼,多用用類自然而然會(huì)體會(huì)到這一些,還有可以去看看JSVM的代碼,里邊幾乎每個(gè)類都有用到類作為一個(gè)對(duì)象時(shí)的屬性與方法。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
后言
首先感謝你能夠有耐心看到這里,我也沒想到寫了這么多才能夠?qū)懙孟駱右稽c(diǎn),請(qǐng)別介意。
不管是哪種語言,只要是支持類的,類都在這種語言中占了非常重要的地位,但不是誰都能夠掌握它,為了讓無憂還沒學(xué)過類以及對(duì)類這個(gè)東東還搞不清楚的網(wǎng)友能夠清楚一點(diǎn)了解類的概念以及用法,也為了對(duì)無憂做點(diǎn)貢獻(xiàn),我寫了這篇文章,希望大家能夠喜歡。
posted on 2007-10-09 10:02
lk 閱讀(244)
評(píng)論(0) 編輯 收藏 所屬分類:
ajax&js