摘要:與當與同時為時,屬性不能重新使用定義,嚴格模式下會報錯示例云麒報錯當或者為時,屬性可以重新使用定義,這一點讀者不妨自行測試。
摘要: 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}"
這樣看兩者似乎沒有區別,對吧?但是,如果使用Object.getOwnPropertyDescriptor()查看obj.a與obj.b的屬性的描述描述符(property descriptor)時,會發現=與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默認值為false,但是都可以修改。對于writable、enumerable和configurable的含義,從名字就不難猜中,后文也會詳細介紹。
使用=賦值,等價于使用Object.defineProperty()定義時,同時將writable、enumerable和configurable設為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默認值為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,導致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"
若在嚴格模式("use strict")下,示例7中的代碼會報錯,下文可見。
writablewritable為false時,屬性不能再次賦值,嚴格模式下會報錯“Cannot assign to read only property”(如果你希望實時監控類似的應用錯誤的話,歡迎免費試用Fundebug,我們支持前端網頁、微信小程序、微信小游戲,Node.js以及Java錯誤監控!):
// 示例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 "#
writable為true時,屬性可以賦值,這一點讀者不妨自行測試。
enumerableenumerable為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時,屬性可以遍歷,這一點讀者不妨自行測試。
configurableenumerable為false時,屬性不能刪除,嚴格模式下會報錯“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 #
enumerable為true時,屬性可以刪除,這一點讀者不妨自行測試。
writable與configurable當writable與enumerable同時為false時,屬性不能重新使用Object.defineProperty()定義,嚴格模式下會報錯“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”
當writable或者enumerable為true時,屬性可以重新使用Object.defineProperty()定義,這一點讀者不妨自行測試。
本文所有代碼示例都在Chrome 67上測試。
參考Object.defineProperty()
Object.getOwnPropertyDescriptor()
StackOverflow: Why can"t I redefine a property in a Javascript object?
關于FundebugFundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線,Fundebug累計處理了6億+錯誤事件,得到了Google、360、金山軟件等眾多知名用戶的認可。歡迎免費試用!
版權聲明轉載時請注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2018/07/05/javascript-object-defineproperty/
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/110146.html
摘要:我們通過一個簡單的例子與圖示,來了解構造函數,實例與原型三者之間的關系。而原型對象的指向構造函數。于是根據構造函數與原型的特性,我們就可以將在構造函數中,通過聲明的屬性與方法稱為私有變量與方法,它們被當前被某一個實例對象所獨有。 showImg(https://segmentfault.com/img/remote/1460000008593382); 如果要我總結一下學習前端以來我遇...
摘要:屬性描述符升級打怪必備技能對象有自己的屬性和方法,對于我們對象的屬性來講,屬性還有自己的屬性,又稱為屬性描述符。這個方法接受三個參數,第一個是指定的對象,第二個是指定的對象參數,第三個當然是要修改的屬性描述符了。 對象的聲明有倆種: 字面量 通過new一個構造函數Object 兩者唯一的區別就是,字面量形式,可以一次賦值多個,通過new Object就得一個一個賦值 數據類型 ...
摘要:是通過它實現雙向綁定的。。而且也被草案發起人撤回了。。傳入參數第一個參數目標對象第二個參數需要定義的屬性或方法的名字。第三個參數目標屬性所擁有的特性。打印沒有錯誤拋出在嚴格模式下會拋出,即使之前已經有相同的值打印,賦值不起作用。 這個方法了不起啊。。vue.js是通過它實現雙向綁定的。。而且Object.observe也被草案發起人撤回了。。所以defineProperty更有必要了解...
摘要:創建對象創建一個普通對象創建一個沒有原型的新對象不繼承任何屬性和方法返回對象中可枚舉的自我屬性的名稱的數組返回對象中所有自我屬性的名稱的數組屬性的特性屬性有兩種特性數據屬性和存取器屬性數據屬性存取器屬性可以獲得某個對象特定自有屬性的屬性描述 Object.create(o) 創建對象 Object.create({x: 1}) //創建一個普通對象 Object.create(null...
摘要:和的作用一樣,區別在于寫法語法對象對象作用判斷對象是否在對象的原型鏈上語法對象構造函數作用判斷構造函數的屬性是否在對象的原型鏈上,如果在,就返回屬性是否可枚舉用于檢查給定的屬性是否能夠使用語句。 ## javascript對象原型成員詳解 ## ECMAScript 中的對象就是一組數據和功能的集合,對象可以通過 new 操作符后跟要創建的對象名稱來...
閱讀 3045·2021-10-12 10:12
閱讀 5349·2021-09-26 10:20
閱讀 1515·2021-07-26 23:38
閱讀 2807·2019-08-30 15:54
閱讀 1636·2019-08-30 13:45
閱讀 1953·2019-08-30 11:23
閱讀 3078·2019-08-29 13:49
閱讀 819·2019-08-26 18:23