網站製作學習誌

記錄學習製作網站的一切

如何自製 JavaScript 物件類別？

對 JavaScript 而言，我們可以把 function 看成是一種物件類別。這裡介紹一個簡單的方法，來建立自己的類別。

以下是一個自訂的 JavaScript 物件類別的建構函式，我們稱之為 constructor 。

1
2
3
4
5
6
7
8
9
10
11
12

物件類別名稱 = function([參數]) {
    this.屬性1 = null;
    this.屬性2 = new Array();
    this.方法1 = function([參數]) {
        // 方法1程式碼
        this.屬性1 = 'DEF';
    }
    this.方法2 = function([參數]) {
        // 方法2程式碼
        this.屬性2 = new Array(4, 5, 6);
    }
}

在 function 的 constructor 以及屬於這個物件類別的方法函式中，我們可以把 this 當成是這個物件類別自己。不過有一種狀況是例外的，以後再說。

我們在 function 的 constructor 一開始建立的屬性，可以給它們預設值；這樣在 new 這個物件類別時，這些屬性就會自動指定成這些預設值。要注意一點的是，這些預設值會保留到你去變更它們或是這個網頁被關閉後才會消失。

我們也可以在 function 的 constructor 外，利用 JavaScript 內建的 prototype 屬性來動態加入物件類別的屬性：

1

物件類別名稱.prototype.屬性3 = null;

或是動態新增方法：

1
2
3
4
5

function 新函式(參數1) {
    this.屬性4 = 參數1;
    // ...
}
物件類別名稱.prototype.方法3 = 新函式;

接下來我們來看看如何使用這個物件類別：

1
2
3
4
5
6
7

var 變數名稱 = new 物件類別名稱();
變數名稱.屬性1 = 'ABC';
變數名稱.屬性2 = new Array(1, 2, 3);
變數名稱.屬性3 = 123;
變數名稱.方法1();
變數名稱.方法2();
變數名稱.方法3(999);

如同操作網頁 DOM 物件一樣，我們也可以很輕易地操作我們自訂的物件類別了。

Comments