ECMAScript 2021 中的 Object.getOwnPropertyDescriptors 方法详解
在 ECMAScript 2021 新增的 Object.getOwnPropertyDescriptors 方法可以方便地获取对象所有自身属性的描述符。
在 ES5 中,我们可以使用 Object.getOwnPropertyDescriptor 方法获取对象的单个属性的描述符,但是如果想获取对象所有属性的描述符,我们需要循环对象的键并分别获取每个属性的描述符。
而 Object.getOwnPropertyDescriptors 方法则可以返回对象所有属性的描述符,它接收一个参数——一个对象——并返回该对象的所有自身属性的描述符的对象。
下面是该方法的语法:
Object.getOwnPropertyDescriptors(obj)
其中,obj 表示要获取属性描述符的对象。
返回值是一个对象,该对象的每个属性名都是 obj 对象的属性名,每个属性值都是对应属性的描述符对象。
属性描述符对象具有以下属性:
- configurable:表示该属性是否可配置。(布尔值)
- enumerable:表示该属性是否可枚举。(布尔值)
- value:表示该属性对应的值。(任意类型)
- writable:表示该属性是否可写。(布尔值)
- get:表示该属性的访问器 getter 函数。(函数)
- set:表示该属性的访问器 setter 函数。(函数)
下面是一个例子:
// www.javascriptcn.com code example
const obj = {
name: 'Tom',
age: 20,
sayHi() {
console.log('Hi');
},
get gender() {
return 'male';
},
};
const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);输出:
// www.javascriptcn.com code example
{
name: {
value: "Tom",
writable: true,
enumerable: true,
configurable: true
},
age: {
value: 20,
writable: true,
enumerable: true,
configurable: true
},
sayHi: {
value: [Function: sayHi],
writable: true,
enumerable: true,
configurable: true
},
gender: {
get: [Function: get gender],
set: undefined,
enumerable: true,
configurable: true
}
}通过上述代码我们可以清楚地看到每个属性的描述符对象的所有属性。
除了获取对象的所有自身属性的描述符外,Object.getOwnPropertyDescriptors 方法还可以利用属性描述符来批量操作对象。比如:
通过循环将对象的所有可写属性设为只读:
for (const property in obj) {
const descriptor = Object.getOwnPropertyDescriptor(obj, property);
if (descriptor.writable) {
descriptor.writable = false;
Object.defineProperty(obj, property, descriptor);
}
}我们可以使用 Object.getOwnPropertyDescriptors 来简化这个操作:
const descriptors = Object.getOwnPropertyDescriptors(obj);
for (const property in descriptors) {
const descriptor = descriptors[property];
if (descriptor.writable) {
descriptor.writable = false;
}
}
Object.defineProperties(obj, descriptors);这里使用了 Object.defineProperties 方法,它可以通过属性描述符对象批量修改对象的属性。
总之,Object.getOwnPropertyDescriptors 是一个非常实用的方法,可以使我们更加方便地获取和修改对象的属性。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d62540a941bf7134bcd265