作者：泣紅亭 整理日期：2004年6月15日

最近在無憂腳本混了一陣子，回復(fù)了一些貼子，自己卻沒有做出什么東東讓大家看看，心里有些不安，于是寫了下邊的一點東西，本來應(yīng)該發(fā)在類封裝區(qū)的，考慮到那里比較冷，而這篇文章我希望能夠幫助到更多的朋友，因此放到這里來了。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
類是什么？

許多剛接觸編程的朋友都可能理解不了類，其實類是對我們這個現(xiàn)實世界的模擬，把它說成“類別”或者“類型”可能會更容易理解一些。比如“人”這種動物就是一個類，而具體某一個人就是“人”這個類的一個實例，“人”可以有許多實例（地球人超過六十億了），但“人”這個類只有一個。你或許會說那男人和女人不也是人么？怎么只能有一個？其實這里要談到一個繼承的東西，后邊才講，請繼續(xù)看下去。

如何建立一個類？
在C++中是以class來聲明一個類的，JavaScript與C++不同，它使用了與函數(shù)一樣的function來聲明，這就讓許多學(xué)Jscript的朋友把類與函數(shù)混在一起了，在Jscript中函數(shù)與類確實有些混，但使用久了自然而然會理解，這篇文章是針對想進(jìn)攻面向?qū)ο缶幊痰呐笥讯鴮懀筒淮蛩阋幌伦佑懻摰锰盍恕?br />請看下邊這個類的定義：

function WuYouUser()
{
this.Name; //名字
}

上邊的代碼定義了一個WuYouUser（無憂用戶）類，它有個屬性：Name（名字）。Name就是WuYouUser類的一個屬性。
一個類有固定的屬性，但類的實例卻有不同的屬性值，就像我是屬于“人”這個類的，性別是男，而我有一個女同學(xué)，她也屬于“人”類，但她的性別屬性值卻為女。
那么如何聲明某個類的一個實例呢？非常簡單：

var Wo = new WuYouUser(); //實例一：“我”
var Biyuan = new WuYouUser(); //實例二：“碧原”（Biyuan哥，不好意思。。。嘿嘿）

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
類的屬性

這個Wo（我）就是WuYouUser類的一個實例，它擁有WuYouUser給它的一切：Name屬性、Sex屬性以及Age屬性，我們可以這樣子來設(shè)置它的屬性：

Wo.Name = "泣紅亭";

很簡單是不是？試著運行

window.document.write(Wo.Name);

看看，是不是輸出了我的名字：泣紅亭？

同樣設(shè)置一下碧原兄的屬性

Biyuan.Name = "碧原";

運行

window.document.write(Biyuan.Name);

可以看到輸出了"碧原"，也就說明了Biyuan與Wo同樣是WuYouUser類的實例，但卻是不同的實體，具有不同的屬性值。

屬性是可以設(shè)置默認(rèn)值的，無憂里都有記錄大家各自發(fā)了多少貼子，我們也同樣給WuYouUser類添加一個發(fā)貼數(shù)量的屬性ArticleCount

function WuYouUser()
{
this.Name;
this.ArticleCount = 0;
}

一個無憂新用戶剛注冊完之后他的發(fā)貼數(shù)量為0，在上邊的代碼中可以看到直接給屬性ArticleCount設(shè)置值為0。

可以運行一下這樣的代碼：

var Wo = new WuYouUser();
window.document.write(Wo.ArticleCount);

可以看到輸出了0，說明ArticleCount屬性被我們成功設(shè)置默認(rèn)值為0

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
類的方法

方法這個詞不大好理解，我覺得說成行為會更容易理解。一個人具有許多共同的行為，比如睡覺、吃飯、走路等等，現(xiàn)在我們給WuYouUser類添加一個發(fā)貼的方法。

function WuYouUser()
{
this.Name;
this.ArticleCount = 0;

this.NewArticle = function()
{
/*
*
* 具體如何發(fā)貼我們大家都知道，不就是打打字，加加圖片再按一下保存之類的按鈕么？
* 關(guān)于具體如何發(fā)貼的代碼沒有必要在這里寫出來，我們要了解的僅僅是方法的定義與使用
* 我們在這里實現(xiàn)一個最簡單的功能，也是很重要的功能：給我們的發(fā)貼數(shù)量加上1！
* 注意：恐龍等級就是這樣加出來的，因此呀……大家狂發(fā)貼吧。。。
*/

this.ArticleCount++;
}
}

既然定義好了這個方法，我們來試試效果如何：

var Wo = new WuYouUser();
Wo.NewArticle();
document.write(Wo.ArticleCount);

可以看到輸出了1，說明我們發(fā)貼成功了！真是有歷史紀(jì)念意義的一刻，離恐龍等級又近一步了。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
靜態(tài)屬性

靜態(tài)屬性又稱公共屬性，它不屬于某個類的實例，而是直接屬于某個類。

比如說無憂用戶有一個屬性：注冊用戶的數(shù)量，它是屬于整個無憂用戶的，而不是屬于泣紅亭或者誰的
靜態(tài)屬性的聲明方法是：

類名.prototype.屬性名 = 屬性值;

比如給WuYouUser類定義一個注冊用戶的數(shù)量Count：

WuYouUser.prototype.Count = 0;

那么如何讀取它呢？有兩種方法：

1. 直接用 WuYouUser.prototype.Count
2. 使用Wo.Count

這兩者沒有區(qū)別，都是得到0

雖然讀取方法可以有兩種，但在改變它的時候卻得特別小心了，請看下邊代碼

var Biyuan = new WuYouUser();
WuYouUser.prototype.Count++;
document.write(Wo.Count);
document.write(Biyuan.Count);

你會發(fā)現(xiàn)兩者的Count屬性都是1，也就是說WuYouUser.prototype.Count改變了會影響到各個實例的相應(yīng)屬性，其實原理就是Wo、Biyuan的Count屬性與WuYouUser.prototype.Count根本就是同一個！

現(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，為什么？

可以看到如果直接修改實例的靜態(tài)屬性值，那么會出現(xiàn)其它實例甚至類的靜態(tài)屬性與它不同步了？這是因為直接修改的時候，該實例會生成一個屬于該實例的屬性Count，這個時候Biyuan.Count不再與WuYouUser.prototype.Count是同一個了，也不與Wo.Count是同一個，這個Count屬性是屬于Biyuan自己所有的，以后改變了它也只是影響它自己而已。

因此如果不是特別的需要，建議不管在讀取還是賦值的時候，都統(tǒng)一使用WuYouUser.prototype.Count這樣的方式，以做到萬無一失！

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
靜態(tài)方法

與靜態(tài)屬性相似，它也有個另稱：公共方法，同樣屬于類本身的。

靜態(tài)方法的定義方式是：

類名.方法名 = function(參數(shù)1,參數(shù)2...參數(shù)n)
{
//方法代碼
}

我們現(xiàn)在就來定義一個無憂用戶類的注冊新用戶靜態(tài)方法：

WuYouUser.prototype.AddOne = function()
{
//*** 同樣具體代碼不寫出來，給靜態(tài)屬性Count增加1，表示注冊用戶數(shù)量又多一個
WuYouUser.prototype.Count++;
}

現(xiàn)在我們來看看如何用它，同樣有兩種方法：

1.直接使用WuYouUser.prototype.AddOne()
2.使用某實例的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)這個例子的代碼，我聲明了一個新類NewClass
{
this.Name = "泣紅亭"; //這里默認(rèn)值為我的名字
}

NewClass.prototype.ChangeName = function(NewName)
{
this.Name = NewName;
}

var Wo = new NewClass();
Wo.ChangeName("鄭運濤"); //我的真名

可以看到Wo.Name確實已經(jīng)變成了"鄭運濤"，這個方法似乎是可以用的，但里邊是不是內(nèi)有天機(jī)呢？
再看下邊的代碼，類的定義以及ChangeName的定義我們照樣，但改變一下下邊的代碼：

NewClass.prototype.ChangeName("鄭運濤");
document.write(NewClass.Name); //undefined，即未定義
document.write(NewClass.prototype.Name); //鄭運濤
var Wo = new NewClass();
document.write(Wo.Name); //泣紅亭

可以看到我們并沒有定義NewClass.prototype.Name這個靜態(tài)屬性，但編譯器給我們自己加了一個。
可是再看下邊輸出Wo.Name，它并不是為"鄭運濤"，而是原來的默認(rèn)值"泣紅亭"，說明了什么？
其實很簡單，看一下NewClass的定義里已經(jīng)有Name這個屬性，因此Wo也有自己的Name屬性，它跟NewClass.prototype.Name并不是同一個的，因此就還是那樣子。

那為什么前一個例子運行了Wo.ChangeName("鄭運濤")卻能夠?qū)崿F(xiàn)改變Wo.Name屬性呢？其實在這里跟改變Wo.Count的值是同一個道理，編譯器自動給Wo增加了一個方法ChangeName，這個方法代碼與NewClass.prototype.ChangeName一樣，但Wo.ChangeName是Wo這個實例所特有的，而非NewClass.prototype.ChangeName！

分析可知道在靜態(tài)方法里盡量不要使用this這樣的關(guān)鍵字來引用實例本身的屬性，除非你有特別的目的，而且能夠清楚地明白這里邊的運行機(jī)制！

如果真的需要在靜態(tài)方法里使用this，可以直接把this當(dāng)作參數(shù)傳進(jìn)去：

NewClass.ChangeName = function(This,NewName) //注意這里是This,不是this
{
This.Name = NewName;
}

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
構(gòu)造函數(shù)

一個類在初始化的時候其實也是一個函數(shù)的執(zhí)行過程，這個函數(shù)就是構(gòu)造函數(shù)，我們看一下下邊的代碼：

function WuYouUser()
{
this.Name = "泣紅亭"; //默認(rèn)定義為泣紅亭
alert(this.Name);
}
var Wo = new WuYouUser();//可以看到出現(xiàn)一個窗口顯示泣紅亭三個字

可以看出類的定義不僅僅是定義了它的屬性與方法，還同時可以加入一些代碼，而這些代碼就是該類的構(gòu)造函數(shù)的代碼，在實例聲明過程中被執(zhí)行！
其實說起來，類的屬性與類的方法都是在構(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即停止運行，換句話說this.Sex = "男";這一行是沒有被執(zhí)行，即Sex屬性根本沒有被定義！

構(gòu)造函數(shù)可以有參數(shù)，參數(shù)值在聲明實例的時候被傳入：
function WuYouUser(Name)
{
this.Name = Name;
}
var Wo = new WuYouUser("泣紅亭");
document.write(Wo.Name); //泣紅亭

構(gòu)造函數(shù)不需要返回值，但如果你設(shè)置了返回值，可以把它當(dāng)成一個函數(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

感覺挺奇妙，對吧？我寫這文章寫著寫著也覺得挺奇妙的，呵呵！

但強(qiáng)烈建議不要把一個類當(dāng)成一個函數(shù)來使用！如果你需要的是一個函數(shù)，請直接寫成函數(shù)而不要寫成類，以免搞混了。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
繼承

繼承這個詞在面向?qū)ο蟮木幊汤锸欠浅Ｖ匾模m然JavaScript并不是真正面向?qū)ο蟮恼Z言，而是跟VB一樣是基于對象的語言，它同樣提供了繼承機(jī)制。

文章開頭時談到了男人與女人，這也同樣是兩個不同的類，但卻具有相同的一些屬性以及方法，而這些相同的特性是來自“人”這個類的，換句話說男人與女人繼承了“人”的所有特性！但是男人與女人卻有其不同的地方，編程語言里的繼承也一樣，一個類A繼承了另一個類B，那么類B就是類A的父類，類A就是類B的派生類，也稱為子類。比如男人就是人的派生類，而人就是男人的父類。最高一級的類稱為基類，想象一下就可以明白，男人繼承自人，男孩繼承自男人，人就是男孩的基類，男人就是男孩的父類。


>>>>>>>>>>>>>>>>>>>>
題外：多重繼承

這里再涉及一個多重繼承的話題，但如果你僅僅是學(xué)JavaScript的話就沒有必要看下去，因為JavaScript不提供多重繼承，準(zhǔn)確一點說沒有一種簡單而標(biāo)準(zhǔn)的方法來實現(xiàn)多重繼承（其實是有辦法實現(xiàn)的，只不過麻煩了一點，而且確實沒有必要）。

在C++中是有多重繼承的概念的，這里是討論JavaScript，因此不打算講，只是說說它的一點點思想以供參考。

在上邊男孩的繼承問題中，男孩其實不僅僅是繼承自男人，還繼承自孩子（有男孩子，也有女孩子）這個類，因此，它同時繼承了兩個類：男人與男孩，這就是所謂的多重繼承。

好，這個問題打住，我們還是回歸主題。
>>>>>>>>>>>>>>>>>>>>

先看第一個類的定義：

function A()
{
this.Name = "泣紅亭";
alert(this.Name);
}

這個類定義了一個屬性Name，默認(rèn)值為"泣紅亭"

現(xiàn)在看第二個類的定義：

function B()
{
this.Sex = "男";
alert(this.Sex);
}

定義了一個屬性Sex,默認(rèn)值為"男"

繼承的方式就是 子類.prototype = new 父類();
現(xiàn)在我們來讓B類繼承A類：

B.prototype = new A();



運行這一段代碼：

var Obj = new B(); //首先打開警告窗口顯示"泣紅亭",再顯示"男"

可以從上邊的結(jié)果看出B類繼承了A類，擁有了A類的屬性Name，并且執(zhí)行了A類的構(gòu)造函數(shù)，而且A類的構(gòu)造函數(shù)在B類的構(gòu)造函數(shù)執(zhí)行之前執(zhí)行。因此我們利用這個可以實現(xiàn)重寫父類的方法以及重設(shè)置父類某屬性的默認(rèn)值：

function A()
{
this.Name = "泣紅亭";
this.Show = function()
{
alert("這是A類的Show方法");
}
alert(this.Name);
}

function B()
{
this.Name = "鄭運濤";
this.Show = function()
{
alert("這是B類的Show方法");
}
alert(this.Name);
}

var Obj = new B();
Obj.Show();

結(jié)果出現(xiàn)了三次警告窗口，第一個內(nèi)容為泣紅亭,是執(zhí)行A類的構(gòu)造函數(shù)里的alert(this.Name)，那時候Name屬性值還為"泣紅亭",因為B類的構(gòu)造函數(shù)還沒執(zhí)行，第二次內(nèi)容為"鄭運濤",這是B類里的alert(this.Name)，因為B類的構(gòu)造函數(shù)里給Name重賦值為"鄭運濤"。最后是調(diào)用了Obj.Show()，執(zhí)行了不是A類的Show方法里的Show（顯示"這是A類的Show方法"），而是執(zhí)行了B類的Show（顯示"這是B類的Show方法"），很明顯Show方法被重寫了。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
類作為一個對象時的屬性與方法（不知道如何簡潔地表達(dá)，因此用了這么長的題目）

不知道在這里談這個話題是否有點混人耳目，但又覺得不談這篇文章就不算完整，因為文章目的就是要讓人搞清楚類的方方面面。

看了這一小節(jié)的題目，或許你會覺得奇怪，類就是類，怎么會“作為一個對象”呢？在JavaScript里，一切都是對象，包括類！對象可以有屬性，可以有方法，類也同樣可以有，但這個非常容易跟前邊說到的靜態(tài)屬性與靜態(tài)方法搞混了，因此要仔細(xì)看清楚兩者的分別！

定義一個類：
function WuYouUser()
{
this.Name = "泣紅亭";
}

定義類作為一個對象時的屬性：

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這個屬性是WuYouUser自個所有，改變了它與其它類以及它的子類完全無關(guān)！

引用類的屬性只有一個辦法，就是類名.屬性名，改變它也一樣。

定義類作為一個對象時的方法：

WuYouUser.ChangeUrl = function()
{
this.Url = "http://51js.com";
}

你或許會覺得奇怪，這里的this是什么？因為ChangeUrl這個方法是屬于對象WuYouUser的，因此this指的就是WuYouUser本身！

可以運行下邊的代碼試試：

document.write(WuYouUser.Url); // http://www.51js.com
WuYouUser.ChangeUrl();
document.write(WuYouUser.Url); // http://51js.com

明顯ChangeUrl直接修改了WuYouUser.Url的值，因此后邊才能輸出http://51js.com


如果你這一節(jié)看不明白，也不要著急，編程嘛，許多東東都只能意會不能言傳，而且我又沒口才，說不清楚，只要以后多寫寫代碼，多用用類自然而然會體會到這一些，還有可以去看看JSVM的代碼，里邊幾乎每個類都有用到類作為一個對象時的屬性與方法。



>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
后言

首先感謝你能夠有耐心看到這里，我也沒想到寫了這么多才能夠?qū)懙孟駱右稽c，請別介意。

不管是哪種語言，只要是支持類的，類都在這種語言中占了非常重要的地位，但不是誰都能夠掌握它，為了讓無憂還沒學(xué)過類以及對類這個東東還搞不清楚的網(wǎng)友能夠清楚一點了解類的概念以及用法，也為了對無憂做點貢獻(xiàn)，我寫了這篇文章，希望大家能夠喜歡。


下面是wch3116的跟貼：

我們最近常談javascript的OO，但請大家要格外記住，javascript 不是“面向?qū)ο蟆钡恼Z言，最多只能說是“基于對象”。
“面向?qū)ο蟆焙汀盎趯ο蟆敝g的差別，我一時很難找到 簡單且又準(zhǔn)確 的詞匯來描述。
談到 “面向?qū)ο蟆保覀兪紫瓤赡軙氲?c++，其次是 java，后來再就是 dot net ，（其他的偏門語言我們這里不多討論）
其實 c++ 在貫徹 “面向?qū)ο蟆彼枷敕矫?是不及 java 的，因為它還存在大量 “過程”型的東西。 java 放棄了多重繼承，重載算子等“繁索不實用”的東西，把設(shè)計重點放在interface（接口）上，不僅簡化的編程者的工作繁瑣度，而且讓整個框架看上去更加清晰。最重要的是 java 中所有的東西都是以類的形式存在的，沒有第二種形式。至于后來dotnet 中的 c# ，看起來就像是 ms 牌子的 java.

扯遠(yuǎn)了，回到 javascript 上來
說Javascript不是面向?qū)ο?不僅僅是 說 它沒有真正意義上實現(xiàn)：抽象對象、 繼承、重載等等面向?qū)ο蟮墓δ?br />而是說 javascript中的“類” 并不是真正廣義上“類”的概念。類原本是只是一個抽象定義，而javascript中通過“Function” 定義的類，本質(zhì)上卻是一個“對象”！

而且javascript的語法域并不是整個 IE 進(jìn)程，而是以 Window對象為單位的。
不同Window對象下相同的Function定義，并不是同一個“類”。

比如：
a.htm 中你定義了一個 A 類 function A(){} , b.htm 中你也相同定義了這個 A 類 function A(){}

在 a.htm 中你創(chuàng)建了一個實例： var a = new A();
你在 b.htm 中得到了 a.htm 的句柄 winAhandle
然后你得到 a.htm 中 a 實例的引用
var a = winAhandle.a;
你會發(fā)現(xiàn) a instanceof A 是 false，換成 a instanceof winAhandle.A 便是 true 了
原因很簡單，b.htm 中的A 類并不等同于 a.htm 中的A類，這種“類”的語法域只限于 一個相同的 Window 對象下（同一個Window對象并不僅是指同一個頁面）

這顯然是有悖于 類是一個廣義上的抽象定義 這種概念了

會 VB 的人，也應(yīng)該了解：VB4之后，VB.NET之前的 VB（包括VBS）中的類，也是這種情況，雖然它是通過 Class 的方式定義的。
比如你 new A 放到 session 里，下一次從 session 中取出來，便不是原先那個對象了。
其實就是因為語法域不同，前一次定義的類，并不能保留到這一次，解析器不知道他是什么東西，故不能還原了

順便提一下 javascript 中繼承方式是采用的 原型（prototype）繼承，詳細(xì)的介紹，大家可以去找這本書看看

《Design Patterns Elements of Reusable Object Oriented Soffware》
中文版好像叫 《可復(fù)用面向?qū)ο蟮脑O(shè)計模式》
一本好書！！！

javascript中沒有多重繼承。多重繼承在面向?qū)ο笾胁⒉皇潜仨毜摹ｋm然多重繼承的重用性更好，但會導(dǎo)致類之間的關(guān)系過于復(fù)雜。
一般來說，一樣事物，我們通常可以認(rèn)為它主要是某一類事物的衍生物，單一繼承就夠用了，至于其他的特性，我們可以借助接口來定義。
javascript中也沒有接口概念，javascript不需要接口，因為它是一門解釋型的語言，不對實參的類型做預(yù)校驗。作為一個參數(shù)對象，有沒有某個方法，加載過程中并不去檢查，直到運行時，有則調(diào)用，無則異常。不需要強(qiáng)制性聲明繼承了哪個接口才能做為參數(shù)調(diào)用。

但實際中，我們還是需要設(shè)計一些接口，主要是出于view的考慮，整個框架容易被讀懂！