以一個最簡單的例子把OO的JavaScript說明白

.一個頗為精簡的例子

只需理解三個關鍵字:
第一個是function ，JS世界裡Class的定義用'function'，function裡面的內容就是建構函式的內容。
第二個是this指標，代表調用這個函數的對象。
第三個是prototype，用它來定義成員函數， 比較規範和保險。

1. //定義Circle類，擁有成員變數r，常量PI和計算面積的成員函數area()   
2. function Circle(radius)    
3. {    
4.     this.r = radius;   
5. }   
6.   
7. Circle.PI = 3.14159;   
8. Circle.prototype.area = function(){   
9.     return Circle.PI * this.r * this.r;   
10. }   
11.   
12. //使用Circle類   
13. var c = new Circle(1.0);    
14. alert(c.area());   

//定義Circle類，擁有成員變數r，常量PI和計算面積的成員函數area()<br />function Circle(radius)<br />{<br />this.r = radius;<br />}<br />Circle.PI = 3.14159;<br />Circle.prototype.area = function(){<br />return Circle.PI * this.r * this.r;<br />}<br />//使用Circle類<br />var c = new Circle(1.0);<br />alert(c.area());

 

另外成員函數定義還可以寫成這樣:

1. function compute_area(){   
2.     return Circle.PI * this.r * this.r;   
3. }   
4. Circle.prototype.area=compute_area;  

function compute_area(){<br />return Circle.PI * this.r * this.r;<br />}<br />Circle.prototype.area=compute_area;

2.繼承

注意兩點
1)定義繼承關係 ChildCircle.prototype=new Circle(0); 其中0是佔位用的
2)調用父類的建構函式

1. this.base=Circle;   
2. this.base(radius);   
3.   
4. //定義ChildCircle子類   
5. function ChildCircle(radius){    
6.     this.base=Circle;   
7.     this.base(radius);   
8. }   
9.   
10. ChildCircle.prototype=new Circle(0);   
11. function Circle_max(a,b){   
12.     if (a.r > b.r) return a;   
13.     else return b;   
14. }   
15.   
16. ChildCircle.max = Circle_max;   
17.   
18. //使用ChildCircle子類   
19. var c = new ChildCircle(1);   
20. var d = new ChildCircle(2);    
21. var bigger = d.max(c,d);    
22. alert(bigger.area());  

this.base=Circle;<br />this.base(radius);<br />//定義ChildCircle子類<br />function ChildCircle(radius){<br />this.base=Circle;<br />this.base(radius);<br />}<br />ChildCircle.prototype=new Circle(0);<br />function Circle_max(a,b){<br />if (a.r > b.r) return a;<br />else return b;<br />}<br />ChildCircle.max = Circle_max;<br />//使用ChildCircle子類<br />var c = new ChildCircle(1);<br />var d = new ChildCircle(2);<br />var bigger = d.max(c,d);<br />alert(bigger.area());
3.var式定義

 

JS還支援一種var Circle={raidus:1.0,PI:3.1415}的形式，文法就如CSS的定義。
因此如果Circle只有一個執行個體，下面的定義方式更簡潔：

1. var newCircle=   
2. {   
3.     r:1.0,   
4.     PI:3.1415,   
5.     area: function(){   
6.         return this.PI * this.r * this.r;   
7.     }   
8. };   
9.   
10. alert(newCircle.area());  

var newCircle=<br />{<br />r:1.0,<br />PI:3.1415,<br />area: function(){<br />return this.PI * this.r * this.r;<br />}<br />};<br />alert(newCircle.area());
可以看看Rails帶的OO Javascript庫--Prototype
其實，Javascript現在的文法真的不適合那麼彆扭的寫成OO模式....