這篇文章帶給大家的內容是關於JS中Object.defineProperty的用法介紹(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
在JavaScript 中,常透過下面方式,新增或修改物件的屬性:
obj.name = 'John'
除此之外,還能透過 Object.defineProperty() 方法,新增或修改物件的屬性。更重要的是,除了目標物件 obj,屬性名稱 prop 外,方法能傳入屬性描述符 descriptor,以實現更複雜的性質。屬性描述符是一個對象,有兩種形式:一種是資料描述符,另一種是存取描述符。
Object.defineProperty(obj, prop, descriptor)
資料描述子
資料描述子支援下列特性:
enumerable:表示物件是否可以列舉。預設為 false,表示不能列舉,for...in 和 Object.keys()中無法列舉該屬性,對JSON.stringify()也有影響。
configurable:表示物件屬性是否可以被刪除,以及value和writable特性以外的其它特性能否被修改。預設為 false,表示屬性不能刪除,特性不能修改。
value:屬性對應的值,預設為 undefined。
writable:預設為 false,表示唯讀,無法給該屬性賦值。在嚴格模式中,給只讀屬性賦值會報錯。在寬鬆模式中,給只讀屬性賦值不會生效。
// 示例1,等同于 obj.name = 'John' var obj = {} Object.defineProperty(obj, 'name', { value: 'John', writable: true, configerable: true, enumerable: true }) // 示例2,将 name 属性设置为只读 'use strict' var obj = {} Object.defineProperty(obj, 'name', { value: 'John', writable: false, configerable: true, enumerable: true }) obj.name = 'Joy' // TypeError // 示例3,将 name 属性设置为不可枚举 var obj = {} Object.defineProperty(obj, 'name', { value: 'John', writable: true, configerable: true, enumerable: false }) console.log(obj.name) // John console.log(Object.keys(obj)) // [] // 示例4,将 name 属性设置不可配置(不可删除,除value和writable特性外的其它特性不可被修改) var obj = {} Object.defineProperty(obj, 'name', { value: 'John', writable: true, configerable: false, enumerable: true }) delete obj.name // false Object.defineProperty(obj, 'name', { enumerable: false }) // TypeError
儲存描述子
儲存描述子支援下列特性:
enumerable:同上。
configurable:同上。
set:設定 setter 方法,當修改屬性時,會執行方法,新屬性值作為參數。預設值為 undefined。
get:設定 getter 方法,當存取屬性時,會執行方法。預設值為 undefined。
// 示例5,使用 get 和 set,计数属性读写的次数 var obj = {}, name = '', count1 = 0, count2 = 0 Object.defineProperty(obj, 'name', { get: function () { console.log('Read ' + (++count1) + ' times') return name }, set: function (newVal) { console.log('Write ' + (++count2) + ' times') name = newVal } }) obj.name // Read 1 times obj['name'] // Read 2 times obj.name = 'Joy' // Write 1 times obj.name = 'Jack' // Write 2 times
注意事項
另外要注意三點,一是兩種描述符不同的屬性不能共用;二是當新增屬性時,未傳入的特性會被設定成預設值,而修改特性時,未傳入的特性維持原樣;三是如下:
Object.defineProperty(obj, 'name', { value: 'John' }) // 属性是只读,不可配置,且不可枚举的。等同于 Object.defineProperty(obj, 'name', { value: 'John', writable: false, configerable: false, enumerable: false }) obj.name = 'John' // 属性可写的,可配置的,可枚举的。等同于 Object.defineProperty(obj, 'name', { value: 'John', writable: true, configerable: true, enumerable: true })
實際應用
例如有一個物件 Student,具有name 和age 兩個屬性,如果不希望將年齡被設定的太大或太小,該怎麼做?我們可以加入一個setter 和getter 方法,每次要修改age 時,透過setter 方法來修改屬性,透過getter 方法讀取屬性:
function Student (name, age) { this.name = name this.setAge = function (val) { age = val if (age < 0) age = 0 if (age > 100) age = 100 } this.getAge = function () { return age } } var s = new Student('John', 16) s.setAge(25) console.log(s.getAge()) // 25 s.setAge(-5) console.log(s.getAge()) // 0 s.setAge(500) console.log(s.getAge()) // 100
看似很美好,但每次讀取或修改屬性都有呼叫一次setter 或getter 方法,徒增了很多程式碼。使用 Object.defineProperty方法,不需要多餘的程式碼,直接用最原始的方式讀取和修改屬性:
function Student (name, age) { this.name = name var _age = age Object.defineProperty(this, 'age', { get: function () { return _age }, set: function (val) { _age = val if (_age < 0) _age = 0 if (_age > 100) _age = 100 } }) } var s = new Student('John', 16) s.age = 25 console.log(s.age) // 25 s.age = -5 console.log(s.age) // 0 s.age = 500 console.log(s.age) // 100
批次處理
Object.defineProperties()方法可以批次新增或修改屬性:
var obj = {} Object.defineProperties(obj, { name: { value: 'John', emunerable: true }, age: { value: 20, emunerable: true } })
Object.create()方法可以在建立物件時,批次新增屬性:
var obj = Object.create(Object.prototype, { name: { value: 'John', emunerable: true }, age: { value: 20, emunerable: true } })
也可以透過字面量方式,建立包含setter 和getter 屬性的物件:
var obj = { get name() { return 'John' }, set name(val) { console.log(val) }, get age() { return 18 } }
以上是JS中Object.defineProperty的用法介紹(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!