【无标题】

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
//这样就可以了。

今天分享就到这里,如果有什么不明白的私信我,如果文章内容有什么不对的地方,还望大神指教互相促进

再见,下一章再见。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值