DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> ECMAScript5中的對象存取器屬性:getter和setter介紹
ECMAScript5中的對象存取器屬性:getter和setter介紹
編輯:關於JavaScript     

顯然這是一個無關IE(高級IE除外)的話題,盡管如此,有興趣的同學還是一起來認識一下ECMAScript5標准中getter和setter的實現。在一個對象中,操作其中的屬性或方法,通常運用最多的就是讀(引用)和寫了,譬如說o.get,這就是一個讀的操作,而o.set = 1則是一個寫的操作。事實上在除ie外最新主流浏覽器的實現中,任何一個對象的鍵值都可以被getter和setter方法所取代,這被稱之為“存取器屬性”。

毫無疑問,getter負責查詢值,它不帶任何參數,setter則負責設置鍵值,值是以參數的形式傳遞,在他的函數體中,一切的return都是無效的。和普通屬性不同的是,存儲器屬性在只聲明了get或set時,對於讀和寫是兩者不可兼得的,當它只擁有了getter方法,那麼它僅僅只讀,同樣的,當它只有setter方法,那麼您讀到的永遠都是undefined。如何聲明對象存儲器屬性呢? 最快捷的途徑就是利用對象字面量的語法來寫了,請看下述一段代碼:

復制代碼 代碼如下:
var oo = {
    name : '賢心',
    get sex(){
        return 'man';
    }
};
//顯然這是不允許的,因為賢心並不希望外界去改變他是男性的事實,所以對於sex只設置了只讀功能
oo.sex = 'woman';
console.log(oo.sex); //結果依然是man

有意思的是,這顛覆了我們以往的理解,就是在方法定義時並未用function關鍵字。事實上這裡的get或set,你可以理解為兩種不同狀態下的function:包容的一面(寫),安全的一面(讀),當一種整體被肢解為不同的形態,意味著我們可能不再需要在表現形式上遵循傳統,所以我們並沒有使用冒號將鍵和值分開。那麼,繼續上面的例子。你將如何在存儲器屬性的基礎上變得讀寫兼備呢,也許下面的一段會給你帶來答案:

復制代碼 代碼如下:
var oo = {
    name : '賢心',
    get sex(){
        if(this.sexx){
            return this.sexx;
        }else{
            return 'man';
        }
    }, set sex(val){
        this.sexx = val;
    }
};
//噢,他如此包容,乃至於人們改變他的性別,他也接受
oo.sex = 'woman';
console.log(oo.sex); //結果woman

或許你會覺得這是多此一舉的,因為我們完全可以忽視get和set,直接讓sex方法具備兩種權限。 但之所以我們將get和set單獨拿出來,是為了更加清晰地理解ECMAScript5對javascript對象鍵值操作中,一個更為嚴謹的诠釋。 當然,在IE污染的中國,新型的主流技術總是顯得格格不入,在實際的項目開發中,也許你永遠不會用到get和set,但誰又能保證以後不會呢……

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved