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

轉(zhuǎn)載于:https://www.cnblogs.com/top5/archive/2010/10/27/1862755.html

總結(jié)

以上是生活随笔為你收集整理的由浅到深了解JavaScript类的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。