Object.getOwnPropertyDescriptors()

语法

getOwnPropertyDescriptors<T>(o: T): {[P in keyof T]: TypedPropertyDescriptor<T[P]>} & { [x: string]: PropertyDescriptor };

描述

用来获取一个对象所有自有属性的描述符,如果没有任何自身属性,则返回空对象。

示例

下面的代码创建一个 obj 对象,该对象有三个属性 firstName, lastName, age 和一个方法 greeting. 其中 lastName 被重定义成访问器属性,age 属性不可写、不可配置、不可枚举。

const obj = {
firstName: 'Yancey',
lastName: 'Leo',
greeting() {
return `Hello, ${this.firstName}!`
},
}
Object.defineProperties(obj, {
age: {
value: 18,
enumerable: false,
},
lastName: {
get() {
return 'Yancey'
},
},
})
obj.__proto__ = {
somePrototypeKey: 'somrthing...',
}

通过 Object.getOwnPropertyDescriptors() 可获取一个对象所有自有属性的描述符,但不会输出原型上的属性。

TIP

观察下面代码,我们很容易看出 Object.getOwnPropertyDescriptors() 的返回值其实就是 Object.defineProperties() 的 第二个参数

Object.getOwnPropertyDescriptors(obj);
// 输出如下:
{
firstName: {
value: 'Yancey',
writable: true,
enumerable: true,
configurable: true
},
lastName: {
get: [Function: get],
set: undefined,
enumerable: true,
configurable: true
},
greeting: {
value: [Function: greeting],
writable: true,
enumerable: true,
configurable: true
},
age: {
value: 18,
writable: false,
enumerable: false,
configurable: false
}
}

如果没有任何自身属性,则返回空对象。

Object.getOwnPropertyDescriptors({}) // {}

扩展

解决 Object.assign() 浅拷贝问题

Object.assign() 浅拷贝一个对象时存在以下问题:

  • 只能拷贝源对象的可枚举的自身属性

  • 无法拷贝属性的特性们

  • 访问器属性会被转换成数据属性

  • 无法拷贝源对象的原型

我们仍然使用 obj 对象,并使用 Object.assign() 克隆出一个新的对象。

const newObj = Object.assign({}, obj);
Object.getOwnPropertyDescriptors(newObj);
// 输出:
{
firstName: {
value: 'Yancey',
writable: true,
enumerable: true,
configurable: true
},
// lastName 从访问器属性变成了数据属性
lastName: {
value: 'Yancey',
writable: true,
enumerable: true,
configurable: true
},
greeting: {
value: [Function: greeting],
writable: true,
enumerable: true,
configurable: true
}
// age因为不可枚举,所以没有被拷贝
}
// 原型也没有被拷贝
newObj.__proto__; // {}

所以我们可以使用 Object.getOwnPropertyDescriptors() 配合 Object.create() 和 Object.getPropertyOf() 来解决这个问题。

Object.create() 接收两个参数:

  • 第一个是新创建对象的原型对象,这里我们通过 Object.getPrototypeOf(obj) 获取

  • 第二个参数可选,需要传入属性描述符以及相应的属性名称,这些属性对应 Object.defineProperties() 的第二个参数,其中 Object.defineProperties() 的第二个参数 又可以通过 Object.getOwnPropertyDescriptors(obj) 获取。

const newObj = Object.create(
Object.getPrototypeOf(obj),
Object.getOwnPropertyDescriptors(obj),
);
// 描述符被正确拷贝
Object.getOwnPropertyDescriptors(newObj);
// 输出:
{ firstName:
{ value: 'Yancey',
writable: true,
enumerable: true,
configurable: true },
lastName:
{ get: [Function: get],
set: undefined,
enumerable: true,
configurable: true },
greeting:
{ value: [Function: greeting],
writable: true,
enumerable: true,
configurable: true },
age:
{ value: 18,
writable: false,
enumerable: false,
configurable: false } }
// 原型属性也被拷贝
newObj.__proto__; // { somePrototypeKey: 'somrthing...' }

继承新思路

创建子类的典型方法是定义子类,将其原型设置为超类的实例,然后在该实例上定义属性。下面是一种新的思路可以尝试。

function superclass() {}
superclass.prototype = {
// 在这里定义方法和属性
}
function subclass() {}
subclass.prototype = Object.create(
superclass.prototype,
Object.getOwnPropertyDescriptors({
// 在这里定义方法和属性
}),
)
Last updated on by YanceyOfficial