JavaScript 物件導向程式設計（上）——封裝

 

JavaScript 是一種非常靈活的物件導向程式設計語言，它與傳統的強型別的物件導向程式設計語言（如 C++，Java，C# 等）有很大不同，所以要實現如 C++、java、C# 當中的一些特性就需要換一種思考方式來解決。今天主要討論如何在 JavaScript 指令碼中實現資料的封裝（encapsulation）。

資料封裝說的簡單點就是把不希望調用者看見的內容隱藏起來。它是物件導向程式設計的三要素之首，其它兩個是繼承和多態，關於它們的內容在後面再討論。

關於資料封裝的實現，在 C++、Java、C# 等語言中是通過 public、private、static 等關鍵字實現的。在 JavaScript 則採用了另外一種截然不同的形式。在討論如何具體實現某種方式的資料封裝前，我們先說幾個簡單的，大家所熟知卻又容易忽略的 JavaScript 的概念。

1 幾個基本概念
1.1 變數定義
在 JavaScript 語言中，是通過 var 關鍵字來定義變數的。

但是如果我們直接給一個沒有使用 var 定義的變數賦值，那麼這個變數就會成為全域變數。

一般情況下，我們應該避免使用沒有用 var 定義的變數，主要原因是它會影響程式的執行效率，因為存取全域變數速度比局部變數要慢得多。

但是這種用法可以保證我們的變數一定是全域變數。

另外，為了保證速度，我們在使用全域變數時，可以通過 var 定義一個局部變數，然後將全域變數賦予之，由此可以得到一個全域變數的局部引用。

1.2 變數類型
沒有定義的變數，類型為 undefined。

變數的值可以是函數。

函數在 JavaScript 中可以充當類的角色。

1.3 變數範圍
變數範圍是指變數生存周期的有效範圍。

單純用 { } 建立的塊不能建立範圍。

with 將它包含的對象範圍添加到當前範圍鏈中，但 with 不建立新的範圍。with 塊結束後，會將對象範圍從當前範圍鏈中刪除。

try-catch 中，catch 的錯誤對象只在 catch 塊中有效，但 catch 塊中定義的變數屬於當前範圍。

其它如 if、for、for-in、while、do-while、switch 等控制語句建立的塊不能建立範圍。

用 function 建立的函數，會建立一個新的範圍添加到當前範圍中。

2 封裝
下面我們就來討論具體的封裝。首先說一下大家最熟悉的幾種封裝：私人執行個體成員、公有執行個體成員和公有靜態成員。最後會討論一下大家所不熟悉的私人靜態成員和靜態類的封裝辦法。因為下面要討論的是物件導向編程，所有當函數作為類來定義和使用時，我們暫且將其成為類。

2.1 私人執行個體成員
私人執行個體成員在 JavaScript 中實際上可以用函數內的局部變數來實現，它相當於類的私人執行個體成員。例如：

class1 = function() {
    // private fields
    var m_first = 1;
    var m_second = 2;
    // private methods
    function method1() {
        alert(m_first);
    }
    var method2 = function() {
        alert(m_second);
    }
    // constructor
    {
        method1();
        method2();
    }
}
var o = new class1();
// error
alert(o.m_first);
o.method1();
這裡 m_first 和 m_second 是 class1 的兩個私人執行個體欄位，method1 和 method2 是兩個私人執行個體方法。他們只能在該類的對象內部被使用，在對象外無法使用。

這裡大家會發現建立私人方法有兩種方式，一種是直接在類中定義方法，另一種是先定義一個局部變數（私人執行個體欄位），然後定義一個匿名方法賦值給它。

直接在類中定義方法，則該方法的範圍就是這個類，因此這個方法在此類外不能夠被訪問，而它又可以存取類中所有的私人執行個體欄位，這就保證了這是個私人執行個體方法。

第二種建立私人執行個體方法的方式跟第一種方式的效果是一樣的，但是第二種方式更靈活一些。

你應該還會注意到，class1 中把構造器代碼用 { } 括起來了，這樣做雖然沒有必要，但是代碼看上去更加清晰。

關於這段構造器代碼，還有兩點需要說明的地方：

1、構造器代碼必須放在整個類定義的最後，這樣做是為了保證在它當中被調用的方法都已經被定義了。因為 JavaScript 是解釋型語言，所以，它會按照從上到下的順序執行，因此，如果構造器代碼放在其它方法定義的前面，則執行到調用語句時找不到要調用的方法，就會出錯。

2、我們已經知道 { } 建立的塊不會改變範圍，因此如果在這樣的構造器代碼中建立局部變數，實際上是在整個類中建立私人執行個體成員，所以，如果需要用到局部變數，應當定義一個私人執行個體方法，例如可以命名為 constructor()，在 constructor() 這個私人執行個體方法中定義局部變數和原來 { } 構造器中要執行的代碼，然後在類的最後直接調用它就可以了。所以更好的寫法是這樣的：

class1 = function() {
    // private fields
    var m_first = 1;
    var m_second = 2;
    // private methods
    function constructor() {
        method1();
        method2();
    }
    function method1() {
        alert(m_first);
    }
    var method2 = function() {
        alert(m_second);
    }
    constructor();
}
var o = new class1();
// error
alert(o.m_first);
o.method1();
最後，你可能還會發現 class1 的定義我們沒有用 var，這樣做我們就可以保證它是個全域的類了。

2.2 公有執行個體成員
公有執行個體成員可以通過兩種方式來建立，我們先來看下面這個例子：

class2 = function() {
    // private fields
    var m_first = 1;
    var m_second = 2;
    // private methods
    function method1() {
        alert(m_first);
    }
    var method2 = function() {
        alert(m_second);
    }
    // public fields
    this.first = "first";
    this.second = ['s','e','c','o','n','d'];
 
    // public methods
    this.method1 = method2;
 
    this.method2 = function() {
        alert(this.second);
    }
 
    // constructor
    {
        method1();
        method2();
    }
}
// public method
class1.prototype.method3 = function() {
    alert(this.first);
}
 
var o = new class2();
 
o.method1();
o.method2();
o.method3();
alert(o.first);
我們發現這個例子是在 class1 的例子上做了一些補充。給它添加了公有執行個體欄位和公有執行個體方法，我們把它們通稱為公有執行個體成員。

我們應該已經發現，建立公有執行個體成員其實很簡單，一種方式是通過在類中給 this.memberName 來賦值，如果值是函數之外的類型，那就是個公有執行個體欄位，如果值是函數類型，那就是公有執行個體方法。另外一種方式則是通過給 className.prototype.memberName 賦值，可賦值的類型跟 this.memberName 是相同的。

到底是通過 this 方式定義好呢，還是通過 prototype 方式定義好呢？

其實它們各有各的用途，它們之間不是誰比誰更好的關係。在某些情況下，我們只能用其中特定的一種方式來定義公有執行個體成員，而不能夠使用另一種方式。原因在於它們實際上是有區別的：

1、prototype 方式只應該在類外定義。this 方式只能在類中定義。

2、prototype 方式如果在類中定義時，則存取私人執行個體成員時，總是存取最後一個對象執行個體中的私人執行個體成員。

3、prototype 方式定義的公有執行個體成員是建立在類的原型之上的成員。this 方式定義的公有執行個體成員，是直接建立在類的執行個體對象上的成員。

基於前兩點區別，我們可以得到這樣的結論：如果要在公有執行個體方法中存取私人執行個體成員，那麼必須用 this 方式定義。

關於第三點區別，我們後面在討論繼承時再對它進行更深入的剖析。這裡只要知道有這個區別就可以了。

我們還會發現，公有執行個體成員和私人執行個體成員名字是可以相同的，這樣不會有衝突嗎？

當然不會。原因在於它們的存取方式不同，公有執行個體成員在類中存取時，必須要用 this. 首碼來引用。而私人執行個體成員在類中存取時，不使用也不能夠使用 this. 首碼來存取。而在類外存取時，只有公有成員是可以通過類的執行個體對象存取的，私人成員無法存取。

2.3 公有靜態成員
公有靜態成員的定義很簡單，例如：

class3 = function() {
    // private fields
    var m_first = 1;
    var m_second = 2;
    // private methods
    function method1() {
        alert(m_first);
    }
    var method2 = function() {
        alert(m_second);
    }
    // constructor
    {
        method1();
        method2();
    }
}
 
// public static field
class3.field1 = 1;
 
// public static method
class3.method1 = function() {
    alert(class3.field1);
}
 
class3.method1();
這個例子的 class3 跟 class1 很像。不同的是 class3 的外面，我們又給 class3 定義了一個靜態欄位和靜態方法。

定義的方式就是給 className.memberName 直接賦值。

這裡定義的靜態欄位和靜態方法都是可以被直接通過類名引用來存取的，而不需要建立對象。因此它們是公有靜態成員。

不過有點要記住，一定不要將公有靜態成員定義在它所在的類的內部，否則你會得到非你所期望的結果。我們可以看下面這個例子：

class4 = function() {
    // private fields
    var m_first = 1;
    var m_second = 2;
 
    var s_second = 2;
 
    // private methods
    function method1() {
        alert(m_first);
    }
    var method2 = function() {
        alert(m_second);
    }
    class4.method1 = function() {
        s_second++;
    }
    class4.method2 = function() {
        alert(s_second);
    }
}
var o1 = new class4();
class4.method2();          // 2
class4.method1();
class4.method2();          // 3
var o2 = new class4();
class4.method2();          // 2
class4.method1();
class4.method2();          // 3
這個例子中，我們期望 s_second 能夠扮演一個私人靜態成員的角色，但是輸出結果卻不是我們所期望的。我們會發現 s_second 實際上是 class4 的一個私人執行個體成員，而不是私人靜態成員。而 class4 的 method1 和 method2 所存取的私人成員總是類的最後一個執行個體對象中的這個私人執行個體成員。

問題出在哪兒呢？

問題出在每次通過 new class4() 建立一個對象執行個體時，class4 中的所有語句都會重新執行，因此，s_second 被重設，並成為新對象中的一個私人執行個體成員。而 class4.method1 和 class4.method2 也被重新定義了，而這個定義也將它們的變數範圍切換到了最後一個對象上來。這與把通過 prototype 方式建立的公有執行個體方法定義在類的內部而產生的錯誤是一樣的。

所以，一定不要將公有靜態成員定義在它所在的類的內部！也不要把通過 prototype 方式建立的公有執行個體方法定義在類的內部！

那如何定義一個私人靜態成員呢？

2.4 私人靜態成員
前面在基本概念裡我們已經清楚了，只有用 function 建立函數，才能建立一個新的範圍，而要建立私人成員（不論是靜態成員，還是執行個體成員），都需要通過建立新的範圍才能夠起到資料隱藏的目的。下面所採用的方法就是基於這一點來實現的。

實現私人靜態成員是通過建立一個匿名函數函數來建立一個新的範圍來實現的。

通常我們使用匿名函數時都是將它賦值給一個變數，然後通過這個變數引用該匿名函數。這種情況下，該匿名函數可以被反覆調用或者作為類去建立對象。而這裡，我們建立的匿名函數不賦值給任何變數，在它建立後立即執行，或者立即執行個體化為一個對象，並且該對象也不賦值給任何變數，這種情況下，該函數本身或者它執行個體化後的對象都不能夠被再次存取，因此它唯一的作用就是建立了一個新的範圍，並隔離了它內部的所有局部變數和函數。因此，這些局部變數和函數就成了我們所需要的私人靜態成員。而這個立即執行的匿名函數或者立即執行個體化的匿名函數我們稱它為靜態封裝環境。

下面我們先來看通過直接調用匿名函數方式來建立帶有私人靜態成員的類的例子：

class5 = (function() {
    // private static fields
    var s_first = 1;
    var s_second = 2;
 
    // private static methods
    function s_method1() {
        s_first++;
    }
    var s_second = 2;
 
    function constructor() {
        // private fields
        var m_first = 1;
        var m_second = 2;
 
        // private methods
        function method1() {
            alert(m_first);
        }
        var method2 = function() {
            alert(m_second);
        }
 
        // public fields
        this.first = "first";
        this.second = ['s','e','c','o','n','d'];
 
        // public methods
        this.method1 = function() {
            s_second--;
        }
 
        this.method2 = function() {
            alert(this.second);
        }
 
        // constructor
        {
            s_method1();
            this.method1();
        }
    }
    // public static methods
    constructor.method1 = function() {
        s_first++;
        alert(s_first);
    }
    constructor.method2 = function() {
        alert(s_second);
    }
 
    return constructor;
})();
 
var o1 = new class5();
class5.method1();
class5.method2();
o1.method2();
var o2 = new class5();
class5.method1();
class5.method2();
o2.method2();
這個例子中，通過

(function() {
    ...
    function contructor () {
        ...
    }
    return constructor;
})();
來建立了一個靜態封裝環境，實際的類是在這個環境中定義的，並且在最後通過 return 語句將最後的類返回給我們的全域變數 class5，然後我們就可以通過 class5 來引用這個帶有靜態私人成員的類了。

為了區分私人靜態成員和私人執行個體成員，我們在私人靜態成員前面用了 s_ 首碼，在私人執行個體成員前面加了 m_ 首碼，這樣避免了重名，因此在對象中總是可以存取私人靜態成員的。

但是這種命名方式不是必須的，只是推薦的，私人靜態成員可以跟私人執行個體成員同名，在重名的情況下，在類構造器和在類中定義的執行個體方法中存取的都是私人執行個體成員，在靜態方法（不論是公有靜態方法還是私人靜態方法）中存取的都是私人靜態成員。

在類外並且在靜態封裝環境中通過 prototype 方式定義的公有執行個體方法存取的是私人靜態成員。

在靜態封裝環境外定義的公有靜態方法和通過 prototype 方式定義的公有執行個體方法無法直接存取私人靜態成員。

另外一種方式通過直接執行個體化匿名函數方式來建立帶有私人靜態成員的類的例子跟上面的例子很相似：

new function() {
    // private static fields
    var s_first = 1;
    var s_second = 2;
 
    // private static methods
    function s_method1() {
        s_first++;
    }
    var s_second = 2;
 
    class6 = function() {
        // private fields
        var m_first = 1;
        var m_second = 2;
 
        // private methods
        function method1() {
            alert(m_first);
        }
        var method2 = function() {
            alert(m_second);
        }
 
        // public fields
        this.first = "first";
        this.second = ['s','e','c','o','n','d'];
 
        // public methods
        this.method1 = function() {
            s_second--;
        }
 
        this.method2 = function() {
            alert(this.second);
        }
 
        // constructor
        {
            s_method1();
            this.method1();
        }
    }
    // public static methods
    class6.method1 = function() {
        s_first++;
        alert(s_first);
    }
    class6.method2 = function() {
        alert(s_second);
    }
};
 
var o1 = new class6();
class6.method1();
class6.method2();
o1.method2();
var o2 = new class6();
class6.method1();
class6.method2();
o2.method2();
這個例子的結果跟通過第一種方式建立的例子是相同的。只不過它的靜態封裝環境是這樣的：

new function() {
   ...
};
在這裡，該函數沒有傳回值，並且對於 class5 的定義是直接在靜態封裝環境內部通過給一個沒有用 var 定義的變數賦值的方式實現的。

當然，也完全可以在

(function() {
   ...
})();
這種方式中，不給該函數定義傳回值，而直接在靜態封裝環境內部通過給一個沒有用 var 定義的變數賦值的方式來實現帶有私人靜態成員的類的定義。

這兩種方式在這裡是等價的。

2.5 靜態類
所謂的靜態類，是一種不能夠被執行個體化，並且只包含有靜態成員的類。

在 JavaScript 中我們通過直接執行個體化一個匿名函數的對象，就可以實現靜態類了。例如：

class7 = new function() {
    // private static fields
    var s_first = 1;
    var s_second = 2;
    // private static method
    function method1() {
        alert(s_first);
    }
    // public static method
    this.method1 = function() {
        method1();
        alert(s_second);
    }
}
class7.method1();
大家會發現，class7 其實就是個對象，只不過這個對象所屬的是匿名類，該類在建立完 class7 這個對象後，就不能再被使用了。而 class7 不是一個 function，所以不能夠作為一個類被執行個體化，因此，這裡它就相當於一個靜態類了。