深入淺出JS的對象屬性

Carl 發(fā)布于2019-08-21 16:46 / 1966人閱讀

摘要：布爾值，是否能通過循環(huán)或返回屬性。而區(qū)別在于為布爾值的特征的默認(rèn)值，通過屬性訪問器設(shè)置的默認(rèn)都是，而通過定義屬性設(shè)置的默認(rèn)都是。該方法返回被凍結(jié)的對象。

可能很多人都知道最近很火的MVVM（model-view-virtualModel）框架，如Vue/Angular/React，如果你不知道的話，就要抓緊學(xué)習(xí)了，它能夠把你從高頻復(fù)雜的DOM解析中解脫出來。
MVVM框架的最主要的特性就是雙向數(shù)據(jù)綁定，其中使用了ES5的getter/setter函數(shù)，而他們就是對象的訪問器屬性，如果你不清楚它們的具體用法，那就不算是真正了解Javascript的基礎(chǔ)知識對象的屬性，現(xiàn)在讓我們一起回顧和總結(jié)下對象的屬性。

對象

讓我們先看下對象的定義：

無序?qū)傩缘募希鋵傩钥梢园局担瑢ο蠡蛘吆瘮?shù)。   ------ ECMA-262

也就是我們可以定義的對象屬性只能是下面三種：

var person = {
    // 屬性
    name: "Nicholas",
    // 對象
    job: {
        name: "teacher",
        salary: 10000
    },
    // 函數(shù)
    greet: function () {
        alert("hello");
    }
};

對象的屬性

JavaScript中只包含有兩種屬性：數(shù)據(jù)屬性和訪問器屬性，并包含不同的特征。

數(shù)據(jù)屬性包含數(shù)據(jù)值的位置，可以在該位置對其進(jìn)行讀寫。其包含4個特征：

   configurable: 布爾值，表示能否通過delete屬性來刪除屬性或修改屬性的特性。
   enumerable: 布爾值，是否能通過`for-in`循環(huán)或`Object.keys()`返回屬性。
   writable: 布爾值，屬性值是否可以修改。
   value: 屬性的數(shù)據(jù)值，實質(zhì)指向的是讀寫數(shù)據(jù)的位置。默認(rèn)為undefined。

數(shù)據(jù)屬性可以通過屬性訪問器（即點(diǎn)運(yùn)算符和方括號計算表達(dá)式）來設(shè)置屬性，也可以通過Object.defineProperty() 或 Object.defineProperties()設(shè)置（下面統(tǒng)一用defineProperty代指兩者）。而區(qū)別在于為布爾值的特征的默認(rèn)值，通過屬性訪問器設(shè)置的默認(rèn)都是true，而通過定義屬性設(shè)置的默認(rèn)都是false。

訪問器屬性不包含數(shù)據(jù)值，包含一對兒getter/setter函數(shù)（非必須），在讀取訪問器屬性時，調(diào)用getter函數(shù)，負(fù)責(zé)返回有效的值；在寫入屬性時，調(diào)用setter函數(shù)并傳入新值，負(fù)責(zé)決定如何處理數(shù)據(jù)。其包含4個特征：

    configurable: 布爾值，表示能否通過delete屬性來刪除屬性或修改屬性的特性，默認(rèn)為false。
    enumerable: 布爾值，是否能通過`for-in`循環(huán)或`Object.keys()`返回屬性，默認(rèn)為false。
    get: 讀取屬性時調(diào)用的函數(shù)，默認(rèn)為undefined。
    set: 寫入屬性時調(diào)用的函數(shù)，接收唯一參數(shù)，默認(rèn)為undefined。

訪問器屬性只能通過defineProperty來定義。

如果屬性已經(jīng)存在，我們可以用defineProperty再次修改該屬性的特征，也可以通過Object.getOwnpropertyDescriptor() 或 Object.getOwnpropertyDescriptors()來查看其特征列表。對于configurable = true的屬性我們也可以使用delete操作符進(jìn)行刪除，如果設(shè)置成了不可配置的，我們就再也不能把它變回可配置的了。

屬性訪問器

有時我們會通過getter/setter來代理一個屬性的讀取操作，即實現(xiàn)一個偽屬性，但是這個屬性不能與真實屬性重名，否則會覆蓋真實屬性的值，變成動態(tài)獲取，這可能不是你想要的結(jié)果。

// 實例：保存當(dāng)前值變化的日志記錄
var o = {
    set current (str) {
        this.log[this.log.length] = str;
    },
    get current () {
        return this.log.join(",");
    },
    log: []
};

這樣我們就代理current，用于保存實時日志，每次對log的更新也變成了一個操作歷史檔案，方便實時查看我們的所有改動。
同樣我們可以在configurable配置為true的時候刪除該屬性的代理：delete o.current。

關(guān)于delete，如果我們刪除了一個var/let/const屬性，在其聲明的作用域下會返回false，如果是嚴(yán)格模式，則會拋出語法錯誤。刪除一個不可配置的屬性同理會失敗或報錯。
刪除數(shù)組的下標(biāo)時，length并不會變小，遍歷到該下標(biāo)時會跳過執(zhí)行。

影響configurable的方法

另外，存在一些Object的方法會影響到對象屬性的可配置性：

Object.freeze()
該方法可以凍結(jié)一個對象，凍結(jié)指的是不能向這個對象添加新的屬性，不能修改其已有屬性的值，不能刪除已有屬性，以及不能修改該對象已有屬性的可枚舉性、可配置性、可寫性。也就是說，這個對象永遠(yuǎn)是不可變的。該方法返回被凍結(jié)的對象。
凍結(jié)指的是表層屬性的淺凍結(jié)，如果需要凍結(jié)嵌套的屬性，則需要遍歷并遞歸凍結(jié)子屬性。

Object.preventExtensions()
該方法讓一個對象變的不可擴(kuò)展，也就是永遠(yuǎn)不能再添加新的屬性。需要注意的是不可擴(kuò)展的對象的屬性通常仍然可以被刪除，同時會阻止一個對象將__proto__屬性重新指向另一個對象。

Object.seal()
該方法可以讓一個對象密封，并返回被密封后的對象。密封對象將會阻止向?qū)ο筇砑有碌膶傩裕⑶視⑺幸延袑傩缘目膳渲眯裕╟onfigurable）置為不可配置（false），即不可修改屬性的描述或刪除屬性。但是可寫性描述（writable）為可寫（true）的屬性的值仍然被修改。

參考資料

MDN - Object: https://developer.mozilla.org...

JavaScript高級編程 - 對象類型