JavaScript的寫類方式（1）

從這篇起，會由淺到深的分析JS OO之寫類方式，大概會有5-8篇。後面陸續會分析流行庫（架構）的寫類方式。

 

一些寫類工具函數或架構的寫類方式本質上都是 建構函式+原型。只有理解這一點才能真正明白如何用JavaScript寫出物件導向的代碼，或者說組織代碼的方式使用物件導向方式。當然用JS也可寫出函數式的代碼，它是多泛型的。

 

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

 

1、建構函式方式

/** * Person類：定義一個人，有個屬性name，和一個getName方法 * @param {String} name */function Person(name) {this.name = name;this.getName = function() {return this.name;}} 

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

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

var p1 = new Person("Jack");var p2 = new Person("Tom");console.log(p1 instanceof Person);//trueconsole.log(p2 instanceof Person);//true

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

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

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

//外部函數function getName() {return this.name;}function Person(name) {this.name = name;this.getName = getName;//注意這裡}

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

2、原型方式

/** * Person類：定義一個人，有個屬性name，和一個getName方法 */function Person(){}Person.prototype.name = "jack";Person.prototype.getName = function() { return this.name;}

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

var p1 = new Person();var p2 = new Person();console.log(p1.getName());//jackconsole.log(p2.getName());//jack

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

 

3、建構函式+原型

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

/** * Person類：定義一個人，有個屬性name，和一個getName方法 * @param {String} name */function Person(name) {this.name = name;}Person.prototype.getName = function() {return this.name;}

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

public class Person {//屬性（欄位）String name;//構造方法（函數）Person(String name) {this.name = name;}//方法String getName() {return this.name;}}

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

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

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

var p1 = new Person("Jack");var p2 = new Person("Tom");console.log(p1.getName());//Jackconsole.log(p2.getName());//Tom

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

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

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

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

function Person(name) {this.name = name;if(Person._init==undefined) {alert("我只執行一次！");Person.prototype.getName = function() {return this.name;}Person._init = 1;}}

new兩個對象，

var p1 = new Person("Andy");//第一次new會彈出'我只執行一次！'var p2 = new Person("Lily");//以後new的對象不會再執行了

 

相關：

JavaScript的寫類方式（2）JavaScript的寫類方式（3）JavaScript的寫類方式（4）JavaScript的寫類方式（5）