=與Object.defineProperty
為JavaScript對象新增或者修改屬性,有兩種不同方式:直接使用=賦值或者使用Object.defineProperty()定義。如下:
// 示例1var obj = {};// 直接使用=賦值obj.a = 1;// 使用Object.defineProperty定義Object.defineProperty(obj, "b",{ value: 2});console.log(obj) // 打印"{a: 1, b: 2}"這樣看兩者似乎沒有區別,對吧?但是,如果使用Object.getOwnPropertyDescriptor()查看obj.a與obj.b的屬性的描述描述符(property descriptor)時,會發現=與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}"可知,使用=賦值時,屬性的屬性描述符value是可以修改的,而writable、enumerable和configurable都為true。
而使用Object.defineProperty()定義的屬性的屬性描述符writable、enumerable和configurable默認值為false,但是都可以修改。對于writable、enumerable和configurable的含義,從名字就不難猜中,后文也會詳細介紹。
使用=賦值,等價于使用Object.defineProperty()定義時,同時將writable、enumerable和configurable設為true。代碼示例3和4是等價的:
// 示例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()定義時若只定義value,則writable、enumerable和configurable默認值為false。代碼示例5和6是等價的:
// 示例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,導致obj.name屬性不能賦值、不能遍歷而且不能刪除:
// 示例7var obj = {};Object.defineProperty(obj, "name",{ value: "Fundebug"});// writable為false,無法賦值obj.name = "云麒";console.log(obj.name); // 打印"Fundebug"http:// enumerable為false,無法遍歷console.log(Object.keys(obj)); // 打印"[]"http:// configurable為false,無法刪除delete obj.name;console.log(obj.name); // 打印"Fundebug"
新聞熱點
疑難解答
圖片精選