在介紹js中Object.defineProperty()和defineProperties()之前,我們瞭解下js中對象兩種屬性的類型:數據屬性和訪問器屬性。 數據屬性 數據屬性包含一個數據的位置,在這個位置可以讀取和寫入。其有4個描述其行為的特性 [[Configurable]] 表示能否通過d ...
在介紹js中Object.defineProperty()和defineProperties()之前,我們瞭解下js中對象兩種屬性的類型:數據屬性和訪問器屬性。
數據屬性
數據屬性包含一個數據的位置,在這個位置可以讀取和寫入。其有4個描述其行為的特性[[Configurable]]
表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,能否把屬性修改為訪問器屬性。通過對象字面量創建的屬性,預設為true[[Enumerable]]
表示能否通過for-in迴圈訪問屬性。(或通過Object.keys()獲取)。預設為true[[Writable]]
表示能否修改屬性值。預設為true.[[Value]]
包含這個屬性的數據值。屬性值的讀寫都在這個位置。預設為undefined訪問器屬性
訪問器屬性不包含數據值,它們包含一對getter和setter函數(非必須),getter負責讀取屬性時調用並返回有效值;setter是寫入屬性時調用並負責如何處理該數據。其也有4個特性[[Configurable]]
表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,能否把屬性修改為數據屬性。預設為true[[Enumerable]]
表示能否通過for-in迴圈返回屬性。預設為true[[Get]]
在讀取屬性時調用的函數。預設為undefined[[Set]]
在寫入屬性時調用的函數。預設為undefined 訪問器屬性不能直接定義,必須使用Object.defineProperty();屬性的定義:在js中,給一個對象添加方法很簡單,如
var obj = {}; obj.name = 'lc'; obj.weight = 180;但,這裡我們介紹另外一種兩種方式:
Object.defineProperty()
功能:方法會在對象上定義一個新屬性,或者修改一個對象的現有屬性,比返回這個對象。如果不指定configurable、enumerable、writable,則預設值為false;不指定value、get、set,則預設為undefined語法:Object.defineProperty(obj,prop,descriptor)obj:需要修改的對象。 prop:目標對象需要定義或修改的屬性名稱 descriptor:將被定義或修改的屬性描述符
var book = { // _price: 20 }; //添加name屬性 Object.defineProperty(book, 'name', { value: 'bkk', enumerable: true, configurable: false, writable: true }); console.log(book.name) //bkk
Object.defineProperties()
功能:方法將直接在對象上定義一個或多個新的屬性或修改現有屬性,並返回該對象語法:Object.defineProperties(obj,props)obj:將要被添加屬性或修改屬性的對象 props:該對象的一個或多個鍵值對定義了將要添加或修改的屬性的具體配置。
Object.defineProperties(book,{ test:{}, _year:{ value:2004, writable: true, enumerable:true },edition:{ value:1, writable: true },year:{ //定義訪問器屬性 get :function(){ return this._year; }, set: function(newValue){ if(newValue>2004){ this._year = newValue; this.edition += newValue -2004; } } } })
Object.getOwnPropertyDescriptor()
功能:獲取對象自身屬性的描述符語法:Object.getOwnPropertyDescriptor(obj,prop);obj:需要查找的目標對象 prop:需要查找的屬性名
var desc = Object.getOwnPropertyDescriptor(book,'name'); console.log(desc); //{value: "bkk", writable: true, enumerable: true, configurable: false}
Object.getOwnPropertyDescriptors()
功能:獲取對象自身所有屬性的描述符語法:Object.getOwnPropertyDescriptors(obj);obj:需要查找的目標對象
var descs = Object.getOwnPropertyDescriptors(book); console.log(descs); { "name":{ "value":"bkk", "writable":true, "enumerable":true, "configurable":false }, "test":{ "writable":false, "enumerable":false, "configurable":false }, ... "year":{ "enumerable":false, "configurable":false } }
回到開定用對象字面量定義的對象 obj
var descs = Object.getOwnPropertyDescriptors(obj); console.log(JSON.stringify(descs)) { "name":{ "value":"lc", "writable":true, "enumerable":true, "configurable":true }, "weight":{ "value":180, "writable":true, "enumerable":true, "configurable":true } }可以看到writable、enumerable、configurable的預設值都是true. ----------------------------------------------------------------------------------------------- 在嚴格模式下,刪除一個configurable=false屬性,或給一個writable=false的屬性賦值,都會報錯。