返回

JS中的 Object.defineProperty

发布时间:2023-08-25 18:16:12 282

Object.defineProperty

​​Object.defineProperty()​​ 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。


语法:

Object.defineProperty(obj,prop,descriptor);

obj,要定义属性的对象;

prop,要定义或修改的属性的名称;

descriptor,要定义或修改的属性描述符,{} 形式,有6个描述符,如下:

-- value, 是当前属性的值,可为任意有效JS值;默认值:undefined; 

-- configurable,为 true 时,当前属性可被删除;默认值: false;

-- enumerable,为 true 时,当前属性可被枚举;默认值: false; 

-- writable,为 true 时,当前属性的 value 才能被修改;默认值:false;

-- get,属性的 getter 函数,不传参,会传入 this 对象,函数返回值是当前属性的值;默认值:undefined; 

-- set, 属性的 setter 函数,调用此函数修改当前属性的值,接受参数,会传入赋值时的 this 对象;

返回值:被传递给函数的对象;


和 “=” 相比较

为 javascript 对象新增或修改属性有两种方式:

1) 使用 “ = ” ;

2) 使用 Object.defineProperty();

let person = {};
person.name = 'Jack';
Object.defineProperty(person,'gender',{
value: 'male'
});
console.log(person); // {name: 'Jack', age: 18, gender: 'male'}

JS中的 Object.defineProperty_javascript

使用 "=" 赋值的 name 属性颜色深,使用 Object.defineProperty() 方法赋值的 gender 颜色浅,必有鬼(颜色浅表示不参与遍历);

使用 ​​Object.getOwnPropertyDescriptors()​​ 查看 person.name 和 person.gender 这两属性的属性描述符时,会发现不一样; 

Object.getOwnPerpertyDescriptors() 方法,获取一个对象的所有自身属性的描述符

console.log(Object.getOwnPropertyDescriptors(person));

JS中的 Object.defineProperty_对象属性修改_02

使用 “=” 赋值时:

属性的 ​​writable​​​、​​enumerable​​​、​​configurable ​​ 这三个属性描述符都是 true ,分别代表:可被修改、可被枚举和可被删除;

使用 Object.defineProperty() 方法赋值时:

属性的这三个属性描述符都是 false,也就是说当前属性不能被修改、不可被枚举(遍历)也不可被删除;但属性描述符的状态都是可以修改的;

1)试验一下:修改属性,确实不能修改;

JS中的 Object.defineProperty_对象属性修改_03

2)试验一下:枚举属性,确实不能枚举,只显示了可被枚举的 name 属性;

JS中的 Object.defineProperty_对象属性修改_04

3)试验一下:删除属性,确实不能删除;

JS中的 Object.defineProperty_对象属性修改_05


等价写法:

let person = {};
person.name = 'Jack';
Object.defineProperty(person,'gender',{
value: 'male',
writable:true,
enumerable:true,
configurable:true
});
console.log(person);
console.log(Object.getOwnPropertyDescriptors(person));

JS中的 Object.defineProperty_javascript_06

同时,也可以被修改、被枚举和可以被删除了。

JS中的 Object.defineProperty_对象属性修改_07






特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像
精选文章
thumb 中国研究员首次曝光美国国安局顶级后门—“方程式组织”
thumb 俄乌线上战争,网络攻击弥漫着数字硝烟
thumb 从网络安全角度了解俄罗斯入侵乌克兰的相关事件时间线
下一篇
Django-4.5验证码-笔记 2023-08-25 14:56:34