首頁 >web前端 >js教程 >ECMAScript5中的物件存取器屬性:getter和setter介紹_javascript技巧

ECMAScript5中的物件存取器屬性:getter和setter介紹_javascript技巧

WBOY
WBOY原創
2016-05-16 16:28:161854瀏覽

顯然這是一個無關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,但誰能保證以後不會呢…

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn