[JavaScript] 靜態類別與成員

2012-06-28

前面的幾篇文章大概介紹了常用的 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>

它的執行結果為：

如何？不需要特別去 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>

執行的結果是：

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

Reference:

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

回首頁

小朱® 的技術隨手寫

本部落格不吹捧、不自戀、不造神，也絕不用技術文偷渡政治文，請各位朋友安心服用。

[JavaScript] 靜態類別與成員

標籤雲