JS中的属性描述符
one. 什么是属性描述符
属性描述符(Property descriptor):这里指定是对象的属性,用于描述一个属性的相关信息,是一个对象。
two. 怎么查看一个对象的属性描述符呢?
通过Object.getOwnPropertyDescriptor(obj,属性)来获取一个对象的属性描述符 Object.getOwnPropertyDescriptors(obj)来获取一个对象所有的属性
const obj = {
name: 'xxx',
age: 20
}
const propertyDes = Object.getOwnPropertyDescriptor(obj,'name');
console.log(propertyDes)
//打印的结果如下
//configurable: true 该属性的描述符属性是否可以被修改 false不可以
//enumerable: true 该属性是否可以被枚举(遍历) false不可以
//value: "xxx" 属性值
//writable: true 该属性的属性值是否可以修改,false为不可以。
//[[Prototype]]: Object
Object.defineProperty(对象,属性,描述符):这个方法用于修改一个对象的属性或者添加一个属性。Vue中v-model底层就是这个方法实现的
const obj = {
name: 'xxx',
age: 20
}
Object.defineProperty(obj,'name',{
configurable: true //该属性的描述符属性是否可以被修改 false不可以
enumerable: true //该属性是否可以被枚举(遍历) false不可以
value: "xxx" //属性值
writable: true //该属性的属性值是否可以修改,false为不可以。
});
这个方法还有两个存取器属性 getter和setter,当设置这两个属性去其中一个属性之后,这个属性就不再是一个普通属性,而是一个存取属性,当调用这个对象的属性值会调用get和set方法而且使用了这两个方法之后就不再允许使用value和writabl属性。
const obj = {
name: 'xxx',
age: 20
}
Object.defineProperty(obj,'name',{
get(){
console.log('获取这个属性的值')
}
set(value){
console.log('设置这个属性的值')
}
});
console.log(obj.name);//不在打印xxx;而是调用get方法打印'获取这个属性的值'。
obj.name = 'xxxxxx';// obj.name是undefined,而且调用了set方法打印出'设置这个属性的值'
'xxxxxx'会作为set的value参数
注意:不能这样使用
const obj = {
name: 'xxx',
age: 20
}
Object.defineProperty(obj,'name',{
get(){
return this.name;
}
set(value){
this.name = value;
}
});
obj.name //那么浏览器就卡死了。
应该是这样的
const obj = {
name: 'xxx',
age: 20
}
Object.defineProperty(obj,'_name',{
get(){
return this.name;
}
set(value){
this.name = value;
}
});
obj.name
//这样就可以了。
今天分享就到这里,如果有什么不明白的私信我,如果文章内容有什么不对的地方,还望大神指教互相促进
再见,下一章再见。