本文已参与[新人创作礼]活动,一起开启掘金创作之路。
defineProperty
一般给对象设置属性的操作,使用这些操作定义的属性可以被枚举、删除、修改。通过defineProperty定义的属性,可以通过设置配置描述符来定义属性是否可以被枚举、删除、修改。
Object.defineProperty()方法可直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,并返回这个对象。
defineProperty有三个参数。
Object.defineProperty(obj, prop, descriptor)
defineProperty参数
1.obj
,需要读取和添加的属性的对象。
2.property
,需要读取或添加的属性。
3.descriptor
,一个对象,里面是一些属性描述(配置),需被定义或修改的属性的描述符。
默认情况下,通过defineProperty参数添加的属性不可枚举、删除、修改。
设置一个对象:
let personList = {
name: '姓名',
address: '上海市'
}
Object.defineProperty(personList,'age',{
})
属性配置
1.value
,设置属性默认值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为undefined。
2.enumerable
,控制属性是否可以枚举,默认值为false。
属性特性 enumerable 定义了对象的属性是否可以在 for…in 循环和 Object.keys() 中被枚举。
3.writable
,控制属性是否可以被修改,默认值为false。
当属性特性(property attribute) writable 设置为false时,表示 non-writable,属性不能被修改。修改一个 non-writable 的属性不会改变属性的值,同时也不会报异常。
4.configurable
,控制属性是否可以被删除,默认值为fasle。
configurable 特性表示对象的属性是否可以被删除,以及除 writable 特性外的其他特性是否可以被修改。
5.get
,当读取对象personList的age属性时,get函数(getter)就会被调用,并且返回值就是age的值。一个给属性提供 getter 的方法,如果没有 getter 则为undefined。该方法返回值被用作属性值。undefined。
6.set
,当修改对象personList的age属性时,set函数(setter)就会被调用,并且会收到修改的具体值。如果没有setter则为undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为undefined。
let objAge = 18;
let personList = {
name: '姓名',
address: '上海市'
}
Object.defineProperty(personList,'age',{
// value: 18,
// enumerable: true,
// writable: true,
// configurable: true,
get(){
// 此时,返回值为设置的objAge的值。该操作时读取age属性的值。
return objAge;
},
set(value){
// 此时,将修改后的值赋值给objAge,这样使用get读取时才是更新后的值。该操作时修改age属性的值。
objAge = value;
}
})
defineProperty将对象personList和objAge关联起来。
vue.js是采用数据劫持结合发布者-订阅者的方式,通过object.defineProperty()来劫持各个属性的setter和getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。
对象存在的属性描述符有数据描述符和存取描述符两种主要方式。数据描述符和存取描述符不能混合使用。
对象是⼀个属性集合,对象的基本特征是属性名(name)和属性值(value)。
对象的属性中属性除了包含属性名和属性值之外,还包含了一些标识它们可写、可枚举、可修改的特性。
可以认为一个属性包含一个名字和4个特性,属性名、value(属性值)、writable(是否可写,默认值为false)、enumerable(是否可枚举,默认值为false)、configurable(是否可修改,默认值为false)。
属性描述:可以更细腻的控制属性的不同操作。属性描述符有 configurable、writable 和 enumerable。
存取描述:存取描述符不具有value和writable,它们的可写性是由setter方法的存在与否决定的,通过getter方法获取对象属性的值。