JavaScript 建立類/物件的幾種方式

jiestyle21發表於2011-11-08
JavaScript物件

在JS中，建立物件（Create Object）並不完全是我們時常說的建立類物件，JS中的物件強調的是一種複合型別，JS中建立物件及對物件的訪問是極其靈活的。

JS物件是一種複合型別，它允許你通過變數名儲存和訪問，換一種思路，物件是一個無序的屬性集合，集合中的每一項都由名稱和值組成（聽起來是不是很像我們常聽說的HASH表、字典、健/值對？），而其中的值型別可能是內建型別(如number,string)，也可能是物件。

var emptyObj = {};
    var myObj =
    {
        'id': 1,        //屬性名用引號括起來，屬性間由逗號隔開
        'name': 'myName'
    };
    //var m = new myObj(); //不支援

　　不知你注意到物件都是用 var 宣告的沒有，像上面的程式碼，就只是簡單的宣告一個物件，它只有一份拷貝，你不能像例項化類物件一樣對它採用new操作，像上面程式碼的註釋部分。這樣就極大的限制了物件的重用，除非你建立的物件只需要一份拷貝，否則考慮用其他方法建立物件。
　　下面一起看看如何訪問物件的屬性和方法。
 var myObj =
    {
        'id': 1,
        'fun': function() {
            document.writeln(this.id + '-' + this.name);//以"物件.屬性"方式訪問
        },
        'name': 'myObj',
        'fun1': function() {
            document.writeln(this['id'] + '+' + this['name']);//以集合方式訪問
        }
    };
    myObj.fun();
    myObj.fun1();
    // 結果
    // 1-myObj 1+myObj

二、用 function 關鍵字模擬 class
在 function 中用 this 引用當前物件，通過對屬性的賦值來宣告屬性。如果用var宣告變數，則該變數為區域性變數，只允許在類定義中呼叫。
        function myClass() {
            this.id = 5;
            this.name = 'myclass';
            this.getName = function() {
                return this.name;
            }
        }
        var my = new myClass();
        alert(my.id);
        alert(my.getName());
        // 結果
        // 5
        // myclass

三、在函式體中建立一個物件，宣告其屬性再返回
在函式體中建立物件可利用第一點的方法，或先 new Object(); 再為各屬性賦值。
不過用這種方式建立的物件在VS2008 SP1中是沒有智慧提示的。（這個到是無所謂反正我不用這個的~哈哈。。）
        function myClass() {
            var obj =
            {
                'id':2,
                'name':'myclass'
            };
            return obj;
        }
        function _myClass() {
            var obj = new Object();
            obj.id = 1;
            obj.name = '_myclass';
            return obj;
        }
        var my = new myClass();
        var _my = new _myClass();
        alert(my.id);
        alert(my.name);
        alert(_my.id);
        alert(_my.name);

        // 結果
        // 2
        // myclass
        // 1
        // _myclass


相關文章