本篇文章為大家帶來了關於javascript的相關知識,其中主要介紹了關於物件導向的相關問題,包括了屬性描述符、資料描述符、訪問描述符等等內容,下面一起來看一下,希望對大家有幫助。
【相關推薦:javascript影片教學、web前端】
JavaScript其實支出多種程式設計範式的,包括函數式程式設計和物件導向程式設計:
var obj = new Object() obj.name = 'why' console.log(obj.name, obj) // why { name: 'why' }
// 字面量方式 var obj2 = { name: 'jam', age: '8' } console.log(obj) // { name: 'jam', age: '8' }
在之前我們的屬性都是直接定義在物件內部,或是直接加入物件內部;
但是這樣我們就不能對這個屬性做一些限制:例如這個屬性是否可以透過delect
刪除,是否可以在for-in
遍歷的時候被遍歷出來呢?
如果我們想要對一個屬性進行比較精準的操作控制,那麼我就可以使用 屬性描述子。透過屬性描述符可以精確的新增或修改物件的屬性;
屬性描述子需要使用 Object.defineProperty
來對屬性進行新增或修改。
屬性描述符分為兩種:資料描述符和存取描述符
#資料描述符是一個具有值的屬性,該值可能是可寫的,也可能是不可寫的。資料描述符具有以下可選鍵值:
Object.getOwnPropertyDescriptor()方法傳回指定物件上一個自有屬性對應的屬性描述符。
Object.getOwnPropertyDescriptor(obj,prop)
注意:如果該方法的第一個參數不是對象,會報錯(TypeError)。
#Object.defineProperty() 方法會直接在一個物件上定義一個新屬性,或者修改一個物件的現有屬性, 並傳回這個物件。
Object.defineProperty(obj,prop,descriptor)
如下示例代码展示了属性描述符的设置和获取 var obj = { name: 'jam', age: 8 } Object.defineProperty(obj, 'job', { value: '律师' }) console.log(Object.getOwnPropertyDescriptor(obj, 'age')) // { value: 8, writable: true, enumerable: true, configurable: true } console.log(obj.job) // 律师 // 通过defineProperty新增的属性,该新属性是不可修改、不可删除以及不可枚举的 console.log(Object.getOwnPropertyDescriptor(obj, 'job')) // {value: '律师',writable: false,enumerable: false,configurable: false}
注意:透過defineProperty新增的屬性,該新屬性是不可修改、不可刪除以及不可列舉的
var obj = { name: 'jam', age: 8 } Object.defineProperty(obj, 'address', { value: '河北', // configurable 该属性不可删除,更不可再次使用defineProperty修改属性描述符 configurable: false, }) delete obj.address // 想使用delete删除该属性 obj.address = '广州' // 想修改obj中的属性address值为广州 console.log(obj.address) // 输出结果:河北
因為屬性描述符configurable值為false 不可刪除和修改,所以delete和修改都沒生效
var obj = { name: 'jam', age: 8}Object.defineProperty(obj, 'sex ', { value: '男', // enumerable 配置该属性是否可以枚举 enumerable: true})for (i in obj) { console.log(i)}
當enumerable: false時,輸出結果為name age
當enumerable: true時,輸出結果為name age sex
var obj = { name: 'jam', age: 8}Object.defineProperty(obj, 'score', { value: 80, // writable: true writable: false})obj.score = 100 console.log(obj.score) // 80
因為writeable的值為false,所以修改score為100時,並沒有修改成功,最終輸出80
是不是感觉每次只能设置一个属性的属性描述符很繁琐,Object.defineProperties可以帮你解决问题。
Object.defineProperties()方法为对象定义一个或多个新属性或修改现有属性,并返回该对象。
Object.defineProperties(obj,props)
示例代码如下:
var obj = { name: 'jam',}Object.defineProperties(obj, { 'age': { value: 28, writable: true, configurable: false, enumerable: true }, 'job': { value: '律师', writable: true, configurable: false, enumerable: true }, 'sex': { value: '男', writable: false, configurable: false, enumerable: true }, 'height': { value: '1.8 m', writable: false, configurable: false, enumerable: true }})console.log(obj) // name: 'jam', age: 28, job: '律师', sex: '男', height: '1.8m' }
存取描述符是由getter-setter函数对描述的属性。存取描述符具有以下可选键值:
configurable 和 enurnerable 的使用与数据描述符中的一致,这里就不过多讲解了。
主要讲一下get 和 set 方法的使用
var obj = { name: 'jam', age: 8, _address: '河北' } // 存取描述符的使用场景 // 1.隐藏某一个私有属性被希望直接被外界使用和赋值 // 2.如果我们希望解惑某一个属性它访问和设置值的过程时,也会使用存储属性描述符 Object.defineProperty(obj, 'address', { enumerable: true, configurable: true, get: function () { foo() return this._address }, set: function (value) { bar() this._address = value } }) function foo () { console.log("截获了一次address的值") } function bar () { console.log("设置了一次address的值") }
上述示例代码控制台打印结果如下:
【相关推荐:javascript视频教程、web前端】
以上是JavaScript物件導向詳細解析之屬性描述符的詳細內容。更多資訊請關注PHP中文網其他相關文章!