1
JavaScript類
2
類是什麼？
3
許多剛接觸程式設計的朋友都可能了解不了類，其實類是對我們這個現實世界的模拟，把它說成“類别”或者“類型”可能會更容易了解一些。比如“人”這種動物就是一個類，而具體某一個人就是“人”這個類的一個執行個體，“人”可以有許多執行個體（地球人超過六十億了），但“人”這個類隻有一個。你或許會說那男人和女人不也是人麼？怎麼隻能有一個？其實這裡要談到一個繼承的東西，後邊才講，請繼續看下去。
4
如何建立一個類？
5
在C
++
中是以class來聲明一個類的，JavaScript與C
++
不同，它使用了與函數一樣的function來聲明，這就讓許多學Jscript的朋友把類與函數混在一起了，在Jscript中函數與類确實有些混，但使用久了自然而然會了解，這篇文章是針對想進攻面向對象程式設計的朋友而寫，就不打算一下子讨論得太深了。
6
請看下邊這個類的定義：
7
function
WuYouUser()
8
{
9
this
.Name;
//
名字
10
}
11
上邊的代碼定義了一個WuYouUser（無憂使用者）類，它有個屬性：Name（名字）。Name就是WuYouUser類的一個屬性。
12
一個類有固定的屬性，但類的執行個體卻有不同的屬性值，就像我是屬于“人”這個類的，性别是男，而我有一個女同學，她也屬于“人”類，但她的性别屬性值卻為女。
13
那麼如何聲明某個類的一個執行個體呢？非常簡單：
14
var
Wo
=
new
WuYouUser();
//
執行個體一：“我”
15
var
Biyuan
=
new
WuYouUser();
//
執行個體二：“碧原”（Biyuan哥，不好意思。。。嘿嘿）
16
類的屬性
17
這個Wo（我）就是WuYouUser類的一個執行個體，它擁有WuYouUser給它的一切：Name屬性、Sex屬性以及Age屬性，我們可以這樣子來設定它的屬性：
18
Wo.Name
=
"
泣紅亭
"
;
19
很簡單是不是？試着運作
20
window.document.write(Wo.Name);
21
看看，是不是輸出了我的名字：泣紅亭？
22
同樣設定一下碧原兄的屬性
23
Biyuan.Name
=
"
碧原
"
;
24
運作
25
window.document.write(Biyuan.Name);
26
可以看到輸出了
"
碧原
"
，也就說明了Biyuan與Wo同樣是WuYouUser類的執行個體，但卻是不同的實體，具有不同的屬性值。
27
屬性是可以設定預設值的，無憂裡都有記錄大家各自發了多少貼子，我們也同樣給WuYouUser類添加一個發貼數量的屬性ArticleCount
28
function
WuYouUser()
29
{
30
this
.Name;
//
名字
31
this
.ArticleCount
=
;
32
}
33
一個無憂新使用者剛注冊完之後他的發貼數量為0，在上邊的代碼中可以看到直接給屬性ArticleCount設定值為0。
34
可以運作一下這樣的代碼：
35
var
Wo
=
new
WuYouUser();
36
window.document.write(Wo.ArticleCount);
37
可以看到輸出了0，說明ArticleCount屬性被我們成功設定預設值為0
38
類的方法
39
方法這個詞不大好了解，我覺得說成行為會更容易了解。一個人具有許多共同的行為，比如睡覺、吃飯、走路等等，現在我們給WuYouUser類添加一個發貼的方法。
40
function
WuYouUser()
41
{
42
this
.Name;
43
this
.ArticleCount
=
;
44
this
.NewArticle
=
function
()
45
{
46
/*
47
*
48
* 具體如何發貼我們大家都知道，不就是打打字，加加圖檔再按一下儲存之類的按鈕麼？
49
* 關于具體如何發貼的代碼沒有必要在這裡寫出來，我們要了解的僅僅是方法的定義與使用
50
* 我們在這裡實作一個最簡單的功能，也是很重要的功能：給我們的發貼數量加上1！
51
* 注意：恐龍等級就是這樣加出來的，是以呀……大家狂發貼吧。。。
52
*/
53
this
.ArticleCount
++
;
54
}
55
}
56
既然定義好了這個方法，我們來試試效果如何：
57
var
Wo
=
new
WuYouUser();
58
Wo.NewArticle();
59
document.write(Wo.ArticleCount);
60
可以看到輸出了1，說明我們發貼成功了！真是有曆史紀念意義的一刻，離恐龍等級又近一步了。
61
靜态屬性
62
靜态屬性又稱公共屬性，它不屬于某個類的執行個體，而是直接屬于某個類。
63
比如說無憂使用者有一個屬性：注冊使用者的數量，它是屬于整個無憂使用者的，而不是屬于泣紅亭或者誰的
64
靜态屬性的聲明方法是：
65
類名.prototype.屬性名
=
屬性值;
66
比如給WuYouUser類定義一個注冊使用者的數量Count：
67
WuYouUser.prototype.Count
=
;
68
那麼如何讀取它呢？有兩種方法：
69
1
. 直接用 WuYouUser.prototype.Count
70
2
. 使用Wo.Count
71
這兩者沒有差別，都是得到0
72
雖然讀取方法可以有兩種，但在改變它的時候卻得特别小心了，請看下邊代碼
73
var
Biyuan
=
new
WuYouUser();
74
WuYouUser.prototype.Count
++
;
75
document.write(Wo.Count);
76
document.write(Biyuan.Count);
77
你會發現兩者的Count屬性都是1，也就是說WuYouUser.prototype.Count改變了會影響到各個執行個體的相應屬性，其實原理就是Wo、Biyuan的Count屬性與WuYouUser.prototype.Count根本就是同一個！
78
現在來看另外一段代碼：
79
var
Biyuan
=
new
WuYouUser();
80
Biyuan.Count
++
;
//
特别注意一下這裡，這是直接改變Biyuan的Count屬性
81
document.write(Biyuan.Count);
//
輸出 1
82
document.write(WuYouUser.prototype.Count);
//
輸出 0
83
document.write(Wo.Count);
//
同樣輸出0，為什麼？
84
可以看到如果直接修改執行個體的靜态屬性值，那麼會出現其它執行個體甚至類的靜态屬性與它不同步了？這是因為直接修改的時候，該執行個體會生成一個屬于該執行個體的屬性Count，這個時候Biyuan.Count不再與WuYouUser.prototype.Count是同一個了，也不與Wo.Count是同一個，這個Count屬性是屬于Biyuan自己所有的，以後改變了它也隻是影響它自己而已。
85
是以如果不是特别的需要，建議不管在讀取還是指派的時候，都統一使用WuYouUser.prototype.Count這樣的方式，以做到萬無一失！
86
靜态方法
87
與靜态屬性相似，它也有個另稱：公共方法，同樣屬于類本身的。
88
靜态方法的定義方式是：
89
類名.方法名
=
function
(參數1,參數2
參數n)
90
{
91
//
方法代碼
92
}
93
我們現在就來定義一個無憂使用者類的注冊新使用者靜态方法：
94
WuYouUser.prototype.AddOne
=
function
()
95
{
96
//
*** 同樣具體代碼不寫出來，給靜态屬性Count增加1，表示注冊使用者數量又多一個
97
WuYouUser.prototype.Count
++
;
98
}
99
現在我們來看看如何用它，同樣有兩種方法：
100
1
.直接使用WuYouUser.prototype.AddOne()
101
2
.使用某執行個體的AddOne()
102
103
這兩種方法沒有什麼不同：
104
105
var
Wo
=
new
WuYouUser();
106
var
Biyuan
=
new
WuYouUser();
107
document.write(WuYouUser.prototype.Count);
//
108
109
Wo.AddOne();
110
document.write(WuYouUser.prototype.Count);
//
1
111
document.write(Wo.Count);
//
1
112
document.write(Biyuan.Count);
//
1
113
114
WuYouUser.prototype.AddOne();
115
document.write(WuYouUser.prototype.Count);
//
2
116
document.write(Wo.Count);
//
2
117
document.write(Biyuan.Count);
//
2
118
119
可以看出不管是使用Wo.AddOne()還是WuYouUser.prototype.AddOne()效果都是一樣的，都是給WuYouUser.prototype.Count加上1
120
121
現在再看一段代碼：
122
function
NewClass()
//
由于上邊的WuYouUser類不合适當這個例子的代碼，我聲明了一個新類NewClass
123
{
124
this
.Name
=
"
泣紅亭
"
;
//
這裡預設值為我的名字
125
}
126
127
NewClass.prototype.ChangeName
=
function
(NewName)
128
{
129
this
.Name
=
NewName;
130
}
131
132
var
Wo
=
new
NewClass();
133
Wo.ChangeName(
"
鄭運濤
"
);
//
我的真名
134
135
可以看到Wo.Name确實已經變成了
"
鄭運濤
"
，這個方法似乎是可以用的，但裡邊是不是内有天機呢？
136
再看下邊的代碼，類的定義以及ChangeName的定義我們照樣，但改變一下下邊的代碼：
137
138
NewClass.prototype.ChangeName(
"
鄭運濤
"
);
139
document.write(NewClass.Name);
//
undefined，即未定義
140
document.write(NewClass.prototype.Name);
//
鄭運濤
141
var
Wo
=
new
NewClass();
142
document.write(Wo.Name);
//
泣紅亭
143
144
可以看到我們并沒有定義NewClass.prototype.Name這個靜态屬性，但編譯器給我們自己加了一個。
145
可是再看下邊輸出Wo.Name，它并不是為
"
鄭運濤
"
，而是原來的預設值
"
泣紅亭
"
，說明了什麼？
146
其實很簡單，看一下NewClass的定義裡已經有Name這個屬性，是以Wo也有自己的Name屬性，它跟NewClass.prototype.Name并不是同一個的，是以就還是那樣子。
147
148
那為什麼前一個例子運作了Wo.ChangeName(
"
鄭運濤
"
)卻能夠實作改變Wo.Name屬性呢？其實在這裡跟改變Wo.Count的值是同一個道理，編譯器自動給Wo增加了一個方法ChangeName，這個方法代碼與NewClass.prototype.ChangeName一樣，但Wo.ChangeName是Wo這個執行個體所特有的，而非NewClass.prototype.ChangeName！
149
150
分析可知道在靜态方法裡盡量不要使用this這樣的關鍵字來引用執行個體本身的屬性，除非你有特别的目的，而且能夠清楚地明白這裡邊的運作機制！
151
152
如果真的需要在靜态方法裡使用this，可以直接把this當作參數傳進去：
153
154
NewClass.ChangeName
=
function
(This,NewName)
//
注意這裡是This,不是this
155
{
156
This.Name
=
NewName;
157
}
158
構造函數
159
一個類在初始化的時候其實也是一個函數的執行過程，這個函數就是構造函數，我們看一下下邊的代碼：
160
161
function
WuYouUser()
162
{
163
this
.Name
=
"
泣紅亭
"
;
//
預設定義為泣紅亭
164
alert(
this
.Name);
165
}
166
var
Wo
=
new
WuYouUser();
//
可以看到出現一個視窗顯示泣紅亭三個字
167
168
可以看出類的定義不僅僅是定義了它的屬性與方法，還同時可以加入一些代碼，而這些代碼就是該類的構造函數的代碼，在執行個體聲明過程中被執行！
169
其實說起來，類的屬性與類的方法都是在構造函數裡執行定義的，看下邊的代碼：
170
171
function
WuYouUser()
172
{
173
this
.Name
=
"
泣紅亭
"
;
174
return
;
175
this
.Sex
=
"
男
"
;
176
}
177
var
Wo
=
new
WuYouUser();
178
document.write(Wo.Name);
//
泣紅亭
179
document.write(Wo.Sex);
//
undefined，即未定義
180
181
看得出什麼？Sex屬性是在return;之後的，而WuYouUser類的構造函數遇到return即停止運作，換句話說this.Sex
=
"
男
"
;這一行是沒有被執行，即Sex屬性根本沒有被定義！
182
183
構造函數可以有參數，參數值在聲明執行個體的時候被傳入：
184
function
WuYouUser(Name)
185
{
186
this
.Name
=
Name;
187
}
188
var
Wo
=
new
WuYouUser(
"
泣紅亭
"
);
189
document.write(Wo.Name);
//
泣紅亭
190
191
構造函數不需要傳回值，但如果你設定了傳回值，可以把它當成一個函數來使用。
192
function
Sum(a, b)
193
{
194
this
.a
=
a;
195
this
.b
=
b;
196
return
this
.a
+
this
.b;
197
}
198
document.write(Sum(
12
,
23
));
//
輸出的是12與23的和35
199
var
Obj
=
new
Sum(
12
,
23
);
200
document.write(Obj.a)
//
12
201
document.write(Obj.b)
//
23
202
203
感覺挺奇妙，對吧？我寫這文章寫着寫着也覺得挺奇妙的，呵呵！
204
205
但強烈建議不要把一個類當成一個函數來使用！如果你需要的是一個函數，請直接寫成函數而不要寫成類，以免搞混了。
206
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::繼承:::::::::::::::::::::::::::::::::::::::::::::::::::
207
繼承這個詞在面向對象的程式設計裡是非常重要的，雖然JavaScript并不是真正面向對象的語言，而是跟VB一樣是基于對象的語言，它同樣提供了繼承機制。
208
文章開頭時談到了男人與女人，這也同樣是兩個不同的類，但卻具有相同的一些屬性以及方法，而這些相同的特性是來自“人”這個類的，換句話說男人與女人繼承了“人”的所有特性！但是男人與女人卻有其不同的地方，程式設計語言裡的繼承也一樣，一個類A繼承了另一個類B，那麼類B就是類A的父類，類A就是類B的派生類，也稱為子類。比如男人就是人的派生類，而人就是男人的父類。最高一級的類稱為基類，想象一下就可以明白，男人繼承自人，男孩繼承自男人，人就是男孩的基類，男人就是男孩的父類。
209
>>>>>>>>>>>>>>>>>>>>
210
題外：多重繼承
211
212
這裡再涉及一個多重繼承的話題，但如果你僅僅是學JavaScript的話就沒有必要看下去，因為JavaScript不提供多重繼承，準确一點說沒有一種簡單而标準的方法來實作多重繼承（其實是有辦法實作的，隻不過麻煩了一點，而且确實沒有必要）。
213
214
在C
++
中是有多重繼承的概念的，這裡是讨論JavaScript，是以不打算講，隻是說說它的一點點思想以供參考。
215
216
在上邊男孩的繼承問題中，男孩其實不僅僅是繼承自男人，還繼承自孩子（有男孩子，也有女孩子）這個類，是以，它同時繼承了兩個類：男人與男孩，這就是所謂的多重繼承。
217
218
好，這個問題打住，我們還是回歸主題。
219
>>>>>>>>>>>>>>>>>>>>
220
221
先看第一個類的定義：
222
223
function
A()
224
{
225
this
.Name
=
"
泣紅亭
"
;
226
alert(
this
.Name);
227
}
228
229
這個類定義了一個屬性Name，預設值為
"
泣紅亭
"
230
231
現在看第二個類的定義：
232
233
function
B()
234
{
235
this
.Sex
=
"
男
"
;
236
alert(
this
.Sex);
237
}
238
239
定義了一個屬性Sex,預設值為
"
男
"
240
241
繼承的方式就是 子類.prototype
=
new
父類();
242
現在我們來讓B類繼承A類：
243
244
B.prototype
=
new
A();
245
246
247
248
運作這一段代碼：
249
250
var
Obj
=
new
B();
//
首先打開警告視窗顯示"泣紅亭",再顯示"男"
251
252
可以從上邊的結果看出B類繼承了A類，擁有了A類的屬性Name，并且執行了A類的構造函數，而且A類的構造函數在B類的構造函數執行之前執行。是以我們利用這個可以實作重寫父類的方法以及重設定父類某屬性的預設值：
253
254
function
A()
255
{
256
this
.Name
=
"
泣紅亭
"
;
257
this
.Show
=
function
()
258
{
259
alert(
"
這是A類的Show方法
"
);
260
}
261
alert(
this
.Name);
262
}
263
264
function
B()
265
{
266
this
.Name
=
"
鄭運濤
"
;
267
this
.Show
=
function
()
268
{
269
alert(
"
這是B類的Show方法
"
);
270
}
271
alert(
this
.Name);
272
}
273
274
var
Obj
=
new
B();
275
Obj.Show();
276
277
結果出現了三次警告視窗，第一個内容為泣紅亭,是執行A類的構造函數裡的alert(
this
.Name)，那時候Name屬性值還為
"
泣紅亭
"
,因為B類的構造函數還沒執行，第二次内容為
"
鄭運濤
"
,這是B類裡的alert(
this
.Name)，因為B類的構造函數裡給Name重指派為
"
鄭運濤
"
。最後是調用了Obj.Show()，執行了不是A類的Show方法裡的Show（顯示
"
這是A類的Show方法
"
），而是執行了B類的Show（顯示
"
這是B類的Show方法
"
），很明顯Show方法被重寫了。
278
279
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
280
類作為一個對象時的屬性與方法（不知道如何簡潔地表達，是以用了這麼長的題目）
281
282
不知道在這裡談這個話題是否有點混人耳目，但又覺得不談這篇文章就不算完整，因為文章目的就是要讓人搞清楚類的方方面面。
283
284
看了這一小節的題目，或許你會覺得奇怪，類就是類，怎麼會“作為一個對象”呢？在JavaScript裡，一切都是對象，包括類！對象可以有屬性，可以有方法，類也同樣可以有，但這個非常容易跟前邊說到的靜态屬性與靜态方法搞混了，是以要仔細看清楚兩者的分别！
285
286
定義一個類：
287
function
WuYouUser()
288
{
289
this
.Name
=
"
泣紅亭
"
;
290
}
291
292
定義類作為一個對象時的屬性：
293
294
WuYouUser.Url
=
"
http://www.51js.com
"
;
//
靜态屬性的定義是：WuYouUser.prototype.Url = "http://www.51js.com";
295
var
Wo
=
new
WuYouUser();
296
document.write(WuYouUser.Url);
//
http://www.51js.com
297
document.write(Wo.Url);
//
undefined,即未定義！注意這裡的未定義
298
299
從這裡可以看出Url這個屬性是WuYouUser自個所有，改變了它與其它類以及它的子類完全無關！
300
301
引用類的屬性隻有一個辦法，就是類名.屬性名，改變它也一樣。
302
303
定義類作為一個對象時的方法：
304
305
WuYouUser.ChangeUrl
=
function
()
306
{
307
this
.Url
=
"
http://51js.com
"
;
308
}
309
310
你或許會覺得奇怪，這裡的this是什麼？因為ChangeUrl這個方法是屬于對象WuYouUser的，是以this指的就是WuYouUser本身！
311
312
可以運作下邊的代碼試試：
313
314
document.write(WuYouUser.Url);
315
WuYouUser.ChangeUrl();
316
document.write(WuYouUser.Url);
317
明顯ChangeUrl直接修改了WuYouUser.Url的值，是以後邊才能輸出http:
//
51js.com
318
319