定义新属性或修改原有属性
语法
obj // 目标对象
prop // 需要修改的属性
descriptor // 目标属性所拥有的特性
//descriptor 以对象形式书写{}
//value:属性值,默认undefined
//writable:值是否可重写,默认false
//enumerable:目标属性是否可以被枚举 默认false
//configurable:目标属性是否可以被删除或是否可以再次修改特性 默认false
// get:function(){} 属性的 getter 函数 当访问该属性(prop)时 会调用该函数
// set:function(){} 属性的 setter 函数 当修改该属性(prop)时 会调用该函数 该方法接受一个参数(也就是被赋予的新值),会传入赋值时的 this 对象
Object.defineProperty(obj, prop, descriptor)
api使用
修改添加属性
var obj = {
id:1,
name:"obj",
age:""
}
// 以前修改属性和对象方式
// obj.name = "dd"
// 修改添加属性 返回修改后的对象
let newObj = Object.defineProperty(obj, 'name', {
value:"defineProperty"
})
// newObj === obj
// 设置属性 id 不能修改
Object.defineProperty(obj, 'id', {
value:2,
writable:false
})
设置属性不能遍历
Object.defineProperty(obj, 'age', {
value:18,
writable:false,
enumerable:false
})
Object.keys(obj)
设置属性不能 删除
Object.defineProperty(obj, 'name', {
value:"defineProperty",
configurable:false
})
delete obj.name //false
监控属性变化
监听属性 访问修改
监听obj对象的属性的修改访问
var obj = {
id:1,
name:"obj",
age:""
}
Object.keys(obj).forEach(key=>{
let value = obj[key]
Object.defineProperty(obj,key,{
get:function(){
console.log("访问属性 name 触发")
return value // 定义访问该属性的返回值
},
set:function(newValue){
console.log("设置属性 name",newValue)
value = newValue // 修改该属性的值
}
})
})
// 在浏览器 console 区域运行
obj.name
obj.name = 2
set 返回值
var obj = {
id:1,
name:"obj",
age:""
}
Object.defineProperty(obj,'name',{
get:function(){
console.log("访问属性 name 触发")
return '返回'//返回 调用 obj.name 的结果
},
set:function(newValue){
console.log("设置属性 name",newValue)
}
})
获取设置的属性
指定对象所有自身属性的描述对象
Object.getOwnPropertyDescriptors(obj)