一、基本概念
Object.defineProperty()
方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
Object.defineProperty()可以为对象的属性添加特性,每一个被添加过的属性
,都会拥有属于自己的getter和setter
。 正是有了getter和setter
,可以实现数据驱动视图,数据实时绑定的效果
。
二、语法:
Object.defineProperty(obj, prop, descriptor)
obj 要定义属性的对象(目标对象)
prop 要定义或修改的属性的名称
descriptor 目标对象属性的一些特征(是一个对象)
descriptor 下有6个参数
参数1:
value:属性值
参数2:
writable:对象属性值是否可以被修改 true允许 false不允许
参数3:
configurable:对象属性是否可以被删除 true允许 false不允许
参数4:
enumerable:对象属性是否可被枚举
参数5:
get():给一个属性提供getter方法,当访问这个对象的属性值得时候触发该方法
参数6:
set():给一个属性提供setter方法,当设置属性值得时候触发该方法
三、案例
object1对象里
面添加 property1 为 42
的属性
const object1 = {};
Object.defineProperty(object1, 'property1', {
value: 42
});
console.log(object1.property1);//42
四、descriptor 详解
4.1、value
该属性对应的值,可以是任何有效的 JavaScript 值(数值,对象,函数等)。
默认为undefined
var obj = {};
Object.defineProperty(obj,"name",{
value:"张三"
})
Object.defineProperty(obj,"age",{
value:"23"
})
console.log(obj) //{name:'张三',age:'23'}
4.2、writable
当且仅当该属性的writable
键值为true
时,属性的值,也就是上面的value
,才能被赋值运算符
改变。
默认为false
。
var obj = {};
Object.defineProperty(obj,"name",{
value:"张三",
writable:false//当设置为false的时候当前对象的属性值不允许被修改
})
4.3、configurable
对象属性是否可以被删除
true允许 false不允许
configurable为false时删除后返回的是 undefined
configurable为true时删除后返回的是 true
默认为false。
4.4、enumerable
当且仅当该属性的enumerable键值为true时,该属性才会出现在对象的枚举属性中
。
默认为false。
var obj = {name:"张三",age:"李四"}
Object.defineProperty(obj,"name",{
enumerable:true//当设置为true的时候对象的属性可被枚举
})
console.log(Object.keys(obj))//["name",age]
var obj = {name:"张三",age:"李四"}
Object.defineProperty(obj,"name",{
enumerable:false//当设置为false的时候对象的属性不可被枚举
})
console.log(Object.keys(obj))//["age"]
4.5、get() && set()
当使用了get()方法或者set()方法的时候就不能使用value和writable中的任何一个属性
否则会报错
var obj = {name:"张三"}
Object.defineProperty(obj,"name",{
get(){
console.log("被访问了")//当被访问的时候会触发get()方法
},
set(newVal){
console.log("被设置了"+newVal)//当被设置的时候会触发set()方法
}
})
obj.name//输出:被访问了
obj.name="李四";//输出:被设置了李四
4.5.1、get函数(getter)何时触发?
当有人访问了name属性
时,get函数(getter)
就会被调用
,且返回值就是name的值
4.5.2、set函数(setter)何时触发?
当有人修改了name属性
时,set函数(setter)
就会被调用
,且会收到具体值(修改的值)
网友评论