JavaScript 類別物件(10)- 屬性存取器


你可以透過屬性存取器,進行物件屬性的存取,考慮以下的物件設計:

var book = {
book_title : 'HTML5從零開始'

其中的 book_title 可以直接透過 book進行存取如下:

book.book_title

直接引用屬性名稱即可取得屬性值,這是最簡單的屬性設計。除此之外,你可以考慮使用存取器來提供外部程式進行相關的存取。

至於存取器的用途,我們以一個稍微實際一點的案例作說明。或許你會想要在程式存取物件時,加上一些邏輯判斷,避免資料屬性存取的程式錯誤,考慮以下的book物件:

var book = {
book_title: 'HTML5從零開始',
book_price: 980

現在於 book 物件加入 book_price 屬性,表示此 book 物件的價格。假設出版社要作書籍的打折或促銷活動,進透過 book 物件調整書籍價格,若是直接設定book_price屬性,一旦價格設定錯誤將導致營業損失,為了避免類似的情形,我們可以進一步為book物件加入存取器,定義價格設定的控制邏輯,以避免因為價格設定錯誤導致的問題。
以下為調整的內容:

var book = {
            book_title : 'HTML5從零開始' ,
            book_price: 980,
            get price() {
                if (this.book_price < 500)
                    return 500;
                else
                    return this.book_price;
            },
            set price(p) {
                if(p<=980 && p>=0)
                    this.book_price = p;
            }
}

其中以 get 與 set 關鍵字定義兩個類似函式的存取器,名稱相同均為 price() 。

get 存取器並沒有參數,引用此存取器將回傳指定的值,其中回傳目前的 book_price 屬性值,而在回傳之前,先判斷目前的值是否小於 500 ,是的話表此價格的設定出來問題,因此回傳允許的最低值為目前價格,否則的話則回傳 book_price 真正的值。

而 set 存取器則接受一個參數,其中首先判斷 p 是否介於 0~980 之間,是的話表示為一正常數值,因此設定給book_price,否則不進行更新。接下來是設定程式碼,檢視幾種可能的狀況:

console.log(book.price);  // 回傳
book.price = 330;
console.log(book.price);  // 回傳
book.price = 1024;
console.log(book.price);  // 回傳
book.price = 800;
console.log(book.price);  // 回傳

第一行引用 price ,取出目前的值,然後第二行將price 屬性設定為 330 ,由於這個值介於 0~980 之間因此這個值會成功完成設定,但是當下一行將其取出時,由於它小於 500 ,因此被判斷為不正常的價格,所以我們取得的值是 500 而非 330 。


沒有留言: