JavaScript的Object.defineProperty詳解
=與Object.defineProperty
為JavaScript對象新增或者修改屬性,有兩種不同方式:直接使用=賦值或者使用Object.defineProperty()定義。如下:
// 示例1 var obj = {}; // 直接使用=賦值 obj.a = 1; // 使用Object.defineProperty定義 Object.defineProperty(obj, "b", { value: 2 }); console.log(obj) // 打印"{a: 1, b: 2}"
這樣看兩者似乎沒有區(qū)別,對吧?但是,如果使用Object.getOwnPropertyDescriptor()查看obj.a與obj.b的屬性的描述描述符(property descriptor)時,會發(fā)現(xiàn)=與Object.defineProperty并不一樣:
// 示例2 var obj = {}; obj.a = 1; Object.defineProperty(obj, "b", { value: 2 }); console.log(Object.getOwnPropertyDescriptor(obj, "a")); // 打印"{value: 1, writable: true, enumerable: true, configurable: true}" console.log(Object.getOwnPropertyDescriptor(obj, "b")); // 打印"{value: 2, writable: false, enumerable: false, configurable: false}"
可知,使用=賦值時,屬性的屬性描述符value是可以修改的,而writable、enumerable和configurable都為true。
而使用Object.defineProperty()定義的屬性的屬性描述符writable、enumerable和configurable默認(rèn)值為false,但是都可以修改。對于writable、enumerable和configurable的含義,從名字就不難猜中,后文也會詳細(xì)介紹。
使用=賦值,等價于使用Object.defineProperty()定義時,同時將writable、enumerable和configurable設(shè)為true。代碼示例3和4是等價的:
// 示例3 var obj = {}; obj.name = "Fundebug"; console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: true, enumerable: true, configurable: true}
// 示例4 var obj = {}; Object.defineProperty(obj, "name", { value: "Fundebug", writable: true, enumerable: true, configurable: true }); console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: true, enumerable: true, configurable: true}
Object.defineProperty()
使用Object.defineProperty()定義時若只定義value,則writable、enumerable和configurable默認(rèn)值為false。代碼示例5和6是等價的:
// 示例5 var obj = {}; Object.defineProperty(obj, "name", { value: "Fundebug" }); console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: false, enumerable: false, configurable: false}
// 示例6 var obj = {}; Object.defineProperty(obj, "name", { value: "Fundebug", writable: false, enumerable: false, configurable: false }); console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: false, enumerable: false, configurable: false}
由于writable、enumerable和configurable都是false,導(dǎo)致obj.name屬性不能賦值、不能遍歷而且不能刪除:
// 示例7 var obj = {}; Object.defineProperty(obj, "name", { value: "Fundebug" }); // writable為false,無法賦值 obj.name = "云麒"; console.log(obj.name); // 打印"Fundebug" // enumerable為false,無法遍歷 console.log(Object.keys(obj)); // 打印"[]" // configurable為false,無法刪除 delete obj.name; console.log(obj.name); // 打印"Fundebug"
若在嚴(yán)格模式(“use strict”)下,示例7中的代碼會報錯,下文可見。
writable
writable為false時,屬性不能再次賦值,嚴(yán)格模式下會報錯“Cannot assign to read only property”
// 示例8 "use strict" var obj = {}; Object.defineProperty(obj, "name", { value: "Fundebug", writable: false, enumerable: true, configurable: true }); obj.name = "云麒"; // 報錯“Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'”
writable為true時,屬性可以賦值,這一點讀者不妨自行測試。
enumerable
enumerable為false時,屬性不能遍歷:
// 示例9 "use strict" var obj = {}; Object.defineProperty(obj, "name", { value: "Fundebug", writable: true, enumerable: false, configurable: true }); console.log(Object.keys(obj)) // 打印"[]"
enumerable為true時,屬性可以遍歷,這一點讀者不妨自行測試。
configurable
enumerable為false時,屬性不能刪除,嚴(yán)格模式下會報錯“Cannot delete property”:
// 示例10 "use strict" var obj = {}; Object.defineProperty(obj, "name", { value: "Fundebug", writable: true, enumerable: true, configurable: false }); delete obj.name // 報錯“Uncaught TypeError: Cannot delete property 'name' of #<Object>”
enumerable為true時,屬性可以刪除,這一點讀者不妨自行測試。
writable與configurable
當(dāng)writable與enumerable同時為false時,屬性不能重新使用Object.defineProperty()定義,嚴(yán)格模式下會報錯“Cannot redefine property”:
// 示例11 "use strict" var obj = {}; Object.defineProperty(obj, "name", { value: "Fundebug", writable: false, configurable: false }) Object.defineProperty(obj, "name", { value: "云麒" }) // 報錯“Uncaught TypeError: Cannot redefine property: name”
當(dāng)writable或者enumerable為true時,屬性可以重新使用Object.defineProperty()定義,這一點讀者不妨自行測試。
本文所有代碼示例都在Chrome 67上測試。
參考
Object.getOwnPropertyDescriptor()
StackOverflow: Why can't I redefine a property in a Javascript object?
相關(guān)文章
Javascript腳本實現(xiàn)靜態(tài)網(wǎng)頁加密實例代碼
這篇文章介紹了Javascript腳本實現(xiàn)靜態(tài)網(wǎng)頁加密實例代碼,有需要的朋友可以參考一下2013-11-11DVA框架統(tǒng)一處理所有頁面的loading狀態(tài)
dva 有一個管理 effects 執(zhí)行的 hook,并基于此封裝了 dva-loading 插件。下面通過本文給大家分享DVA框架統(tǒng)一處理所有頁面的loading狀態(tài),感興趣的朋友一起看看吧2017-08-08JavaScript字符串轉(zhuǎn)換數(shù)字的方法
這篇文章主要介紹了JavaScript字符串轉(zhuǎn)換數(shù)字的方法,文章圍繞JavaScript字符串轉(zhuǎn)換數(shù)字的相關(guān)資料展開全文內(nèi)容,需要的小伙伴可以參考一下2021-12-12JS實現(xiàn)隨機顏色的3種方法與顏色格式的轉(zhuǎn)化
隨機顏色和顏色格式是我們在開發(fā)中經(jīng)常要用到的一個小功能,網(wǎng)上相關(guān)的資料也很多,想著有必要總結(jié)一下自己的經(jīng)驗。所以這篇文章主要介紹了JS實現(xiàn)隨機顏色的3種方法與顏色格式的轉(zhuǎn)化,需要的朋友可以參考借鑒,下面來一起看看吧。2017-01-01