JavaScript的寫類方式（1）

 從這篇起，會由淺到深的分析JS OO之寫類方式，大概會有5-8篇。後面陸續會分析流行庫（架構）的寫類方式。一些寫類工具函數或架構的寫類方式本質上都是 建構函式+原型。只有理解這一點才能真正明白如何用JavaScript寫出物件導向的代碼。或者說組織代碼的方式使用物件導向方式。當然用JS也可寫出函數式的代碼，它是多泛型的。

為了討論的單一性，暫不考慮類的繼承，(私人,受保護)屬性或方法。EMCAScript中實際沒有類(class)的概念，但可以把它理解為更廣義的概念。

 

1、建構函式方式

view sourceprint?01 /** 

02  * Person類：定義一個人，有個屬性name，和一個getName方法 

03  * @param {String} name 

04  */

05 function Person(name) { 

06     this.name = name; 

07     this.getName = function() { 

08         return this.name; 

09     } 

10 } 

這種風格讓寫過Java的有點親切在於構造一個對象需要配置一些參數，參數要賦值給類裡面this。但與Java的區別是JS用function來代替class，參數也無需定義類型。

類寫好了，我們造幾個對象：

view sourceprint?1 var p1 = new Person("Jack"); 

2 var p2 = new Person("Tom"); 

3 console.log(p1 instanceof Person);//true 

4 console.log(p2 instanceof Person);//true

控制台輸出也證明了p1，p2的確是類Person的對象執行個體。

這種方式的優點是：可以根據參數來構造不同的對象執行個體 ，缺點是構造時每個執行個體對象都會產生getName方法版本，造成了記憶體的浪費 。

經驗豐富的程式員用一個外部函數來代替類方法，達到了每個對象共用同一個方法。改寫後的類如下

view sourceprint?1 //外部函數 

2 function getName() { 

3     return this.name; 

4 } 

5   

6 function Person(name) { 

7     this.name = name; 

8     this.getName = getName;//注意這裡 

9 }

  有人可能覺得代碼風格有點差強人意，怎麼看也沒有Java那麼緊湊。但的確可以減少記憶體的消耗。

2、原型方式

view sourceprint?1 /** 

2  * Person類：定義一個人，有個屬性name，和一個getName方法 

3  */

4 function Person(){} 

5 Person.prototype.name = "jack"; 

6 Person.prototype.getName = function() { return this.name;}

把類的屬性（欄位），方法都掛在prototype上。造幾個對象測試下

view sourceprint?1 var p1 = new Person(); 

2 var p2 = new Person(); 

3 console.log(p1.getName());//jack 

4 console.log(p2.getName());//jack

可以看出輸出的都是jack，原型方式的缺點就是不能通過參數來構造對象執行個體 (一般每個對象的屬性是不相同的) ，優點是所有對象執行個體都共用getName方法（相對於建構函式方式），沒有造成記憶體浪費 。

 

3、建構函式+原型

取前面兩種的優點：
a、用建構函式來定義類屬性（欄位）。
b、用原型方式來定義類的方法。

view sourceprint?01 /** 

02  * Person類：定義一個人，有個屬性name，和一個getName方法 

03  * @param {String} name 

04  */

05 function Person(name) { 

06     this.name = name; 

07 } 

08 Person.prototype.getName = function() { 

09     return this.name; 

10 }

這樣，即可通過建構函式構造不同name的人，對象執行個體也都共用getName方法，不會造成記憶體浪費。
但似乎這樣的代碼風格似乎仍然沒有Java的類那麼緊湊，把屬性，構造方法（函數），方法都包在大括弧內。

view sourceprint?01 public class Person { 

02   

03     //屬性（欄位） 

04     String name;     

05     //構造方法（函數） 

06     Person(String name) { 

07         this.name = name; 

08     }    

09     //方法 

10     String getName() { 

11         return this.name; 

12     } 

13 }

為了讓JS代碼風格更緊湊，把掛在prototype的方法代碼移到function Person的大括弧內。

view sourceprint?1 function Person(name) { 

2     this.name = name; 

3     Person.prototype.getName = function() { 

4         return this.name; 

5     } 

6 }

似乎很神奇，還能這麼寫啊！驗證一下

view sourceprint?1 var p1 = new Person("Jack"); 

2 var p2 = new Person("Tom"); 

3 console.log(p1.getName());//Jack 

4 console.log(p2.getName());//Tom

沒有報錯，控制台也正確輸出了。說明可以這麼寫，似乎很完美。
a 、可以通過傳參構造對象執行個體
b 、對象執行個體都共用同一份方法不造成記憶體浪費
c 、代碼風格也比較緊湊

但每次new一個對象的時候都會執行

view sourceprint?1 Person.prototype.getName = function() { 

2         return this.name; 

3 }

造成了不必要的重複的運算。因為getName方法掛在prototype上只需執行一次即可。只需稍微改造下

view sourceprint?01 function Person(name) { 

02     this.name = name; 

03   

04     if(Person._init==undefined) { 

05         alert("我只執行一次！"); 

06         Person.prototype.getName = function() { 

07             return this.name; 

08         } 

09         Person._init = 1;    

10     }    

11 }

new兩個對象，

view sourceprint?1 var p1 = new Person("Andy");//第一次new會彈出我只執行一次！ 

2 var p2 = new Person("Lily");//以後new的對象不會再執行了