=與Object.defineProperty
為JavaScript對(duì)象新增或者修改屬性，有兩種不同方式：直接使用=賦值或者使用Object.defineProperty()定義。如下：
// 示例1var obj = {};// 直接使用=賦值obj.a = 1;// 使用Object.defineProperty定義Object.defineProperty(obj, "b",{ value: 2});console.log(obj) // 打印"{a: 1, b: 2}"這樣看兩者似乎沒(méi)有區(qū)別，對(duì)吧？但是，如果使用Object.getOwnPropertyDescriptor()查看obj.a與obj.b的屬性的描述描述符(property descriptor)時(shí)，會(huì)發(fā)現(xiàn)=與Object.defineProperty并不一樣：
// 示例2var 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}"可知，使用=賦值時(shí)，屬性的屬性描述符value是可以修改的，而writable、enumerable和configurable都為true。
而使用Object.defineProperty()定義的屬性的屬性描述符writable、enumerable和configurable默認(rèn)值為false，但是都可以修改。對(duì)于writable、enumerable和configurable的含義，從名字就不難猜中，后文也會(huì)詳細(xì)介紹。
使用=賦值，等價(jià)于使用Object.defineProperty()定義時(shí)，同時(shí)將writable、enumerable和configurable設(shè)為true。代碼示例3和4是等價(jià)的：
// 示例3var obj = {};obj.name = "Fundebug";console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: true, enumerable: true, configurable: true}// 示例4var 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()定義時(shí)若只定義value，則writable、enumerable和configurable默認(rèn)值為false。代碼示例5和6是等價(jià)的：
// 示例5var obj = {};Object.defineProperty(obj, "name",{ value: "Fundebug"});console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: false, enumerable: false, configurable: false}// 示例6var 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屬性不能賦值、不能遍歷而且不能刪除：
// 示例7var obj = {};Object.defineProperty(obj, "name",{ value: "Fundebug"});// writable為false，無(wú)法賦值obj.name = "云麒";console.log(obj.name); // 打印"Fundebug"http:// enumerable為false，無(wú)法遍歷console.log(Object.keys(obj)); // 打印"[]"http:// configurable為false，無(wú)法刪除delete obj.name;console.log(obj.name); // 打印"Fundebug"若在嚴(yán)格模式(“use strict”)下，示例7中的代碼會(huì)報(bào)錯(cuò)，下文可見(jiàn)。
writable
writable為false時(shí)，屬性不能再次賦值，嚴(yán)格模式下會(huì)報(bào)錯(cuò)“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 = "云麒"; // 報(bào)錯(cuò)“Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'”writable為true時(shí)，屬性可以賦值，這一點(diǎn)讀者不妨自行測(cè)試。
enumerable
enumerable為false時(shí)，屬性不能遍歷：
// 示例9"use strict"var obj = {};Object.defineProperty(obj, "name",{ value: "Fundebug", writable: true, enumerable: false, configurable: true});console.log(Object.keys(obj)) // 打印"[]"enumerable為true時(shí)，屬性可以遍歷，這一點(diǎn)讀者不妨自行測(cè)試。
configurable
enumerable為false時(shí)，屬性不能刪除，嚴(yán)格模式下會(huì)報(bào)錯(cuò)“Cannot delete property”：
// 示例10"use strict"var obj = {};Object.defineProperty(obj, "name",{ value: "Fundebug", writable: true, enumerable: true, configurable: false});delete obj.name // 報(bào)錯(cuò)“Uncaught TypeError: Cannot delete property 'name' of #<Object>”enumerable為true時(shí)，屬性可以刪除，這一點(diǎn)讀者不妨自行測(cè)試。
writable與configurable
當(dāng)writable與enumerable同時(shí)為false時(shí)，屬性不能重新使用Object.defineProperty()定義，嚴(yán)格模式下會(huì)報(bào)錯(cuò)“Cannot redefine property”：
// 示例11"use strict"var obj = {};Object.defineProperty(obj, "name",{ value: "Fundebug", writable: false, configurable: false})Object.defineProperty(obj, "name",{ value: "云麒"}) // 報(bào)錯(cuò)“Uncaught TypeError: Cannot redefine property: name”當(dāng)writable或者enumerable為true時(shí)，屬性可以重新使用Object.defineProperty()定義，這一點(diǎn)讀者不妨自行測(cè)試。
本文所有代碼示例都在Chrome 67上測(cè)試。
參考
Object.getOwnPropertyDescriptor()
StackOverflow: Why can't I redefine a property in a Javascript object?
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
