Object.defineProperty()
方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
语法:
Object.defineProperty(obj, prop, descriptor)
obj
:要定义属性的对象
prop
:要定义或修改的属性的名称或 Symbol
descriptor
:要定义或修改的属性描述符
数据描述符:
let obj = {}
Object.defineProperty(obj, 'name', {
value: 1,
})
console.log(obj.name)//1
obj.name = 'zqf'
console.log(obj.name)//1
let obj = {}
Object.defineProperty(obj, 'name', {
value: 1,
writable: true
})
console.log(obj.name)//1
obj.name = 'zqf'
console.log(obj.name)//zqf
存取描述符:
let obj = {
initValue: '1',
}
Object.defineProperty(obj, 'name', {
get(){
return obj.initValue
},
set(value) {
obj.initValue = value
}
})
console.log(obj.name)
obj.name = 'zqf'
console.log(obj.name)
使用存取描述符遇到的问题:
当Object.defineProperty设置的prop和obj原有的prop相同时会造成死循环,如下面的initValue属性
let obj = {
initValue: '1',
}
Object.defineProperty(obj, 'initValue', {
get(){
return obj.initValue
},
set(value) {
obj.initValue = value
}
})
console.log(obj.initValue)
obj.initValue = 'zqf'
console.log(obj.initValue)
原因:
console.log(obj.initValue)
触发get方法,return obj.initValue
再次触发get方法
obj.initValue = 'zqf'
触发set方法,obj.initValue = value
再次触发set方法
详细的说明请看MDN文档