[JavaScript] 靜態類別與成員

前面的幾篇文章大概介紹了常用的 JavaScript 物件導向的功能,包含物件的宣告,屬性,方法,事件等特性,也介紹了多型的部份,這次要介紹的是在 Design Pattern 中很常用的功能-靜態類別 (static class) 和成員。

富奸太久了,真不好意思 …

前面的幾篇文章大概介紹了常用的 JavaScript 物件導向的功能,包含物件的宣告,屬性,方法,事件等特性,也介紹了多型的部份,這次要介紹的是在 Design Pattern 中很常用的功能-靜態類別 (static class) 和成員。

靜態類別顧名思義,是在程式生成時就存在的物件,不必特別對它 new 即可直接使用,在一些應用上很重要,它可以在大量存取時,節省記憶體的需求,而且它可以用來做 Single Instance Pattern。

靜態類別的宣告實在是有夠簡單,只要這樣:

// static object declaration.
function myStaticObject() {
}

而它的成員,不能直接在物件內宣告,而要在物件外宣告:

// static object declaration.
function myStaticObject() {
}

// static object member.
myStaticObject.add = function (x, y) {
    return x + y;
};

而呼叫的方法就像在 C#, VB 中使用靜態類別一樣,直接看範例網頁,請注意 run() 方法的內容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        // static object declaration.
        function myStaticObject() {
        }

        // static object member.
        myStaticObject.add = function (x, y) {
            return x + y;
        };

        function run() {

            alert(myStaticObject.add(1, 2));
          
        }
    
    </script>
</head>
<body>

    <input type="button" value=" Click Me " onclick="run()" />

</body>
</html>

它的執行結果為:

image

 

如何?不需要特別去 new 方法出來,就能得到結果,這正是靜態類別和成員的優點。

而利用這個優點,我們可以進一步實作 Single Instance Pattern,例如下列程式碼:

<script type="text/javascript">

    var _instance = null;

    function myObject(instanceName) {

        var _instanceName = instanceName;
        var _createdDate = new Date();

        this.getInstanceName = function () {
            return _instanceName;
        };

        this.getCreatedDate = function () {
            return _createdDate;
        }

    }

    // static object declaration.
    function myStaticObject() {
    }

    // static object member.
    myStaticObject.getInstance = function () {

        if (_instance == null)
            _instance = new myObject("instance1");

        return _instance;

    };

    function run() {

        alert(myStaticObject.getInstance().getInstanceName());
        alert(myStaticObject.getInstance().getCreatedDate());
          
    }
    
</script>

執行的結果是:

image

image

 

而且不管按幾次,結果都相同,代表 myStaticObject.getInstance() 回傳的都是相同的物件,也表示 Single Instance Pattern 是成立的。

 

Reference:

http://stackoverflow.com/questions/1535631/static-variables-in-javascript