打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
JavaScript中的getOwnPropertyDescriptors方法
方法是ECMAScript 2017 JavaScript规范的新功能之一getOwnPropertyDescriptors。简而言之,此方法返回给定对象的所有属性的信息,包括有关getter和setter的信息。它允许我们创建对象的副本并在复制所有属性(包括getter和setter)时克隆它。
在JavaScript中,我们可以创建特殊的属性,它们充当对象内部的方法,并充当对象外部的属性。它们被称为get和set。
// object with get and set properties
const gator = {
name: 'Ben',
type: 'reptilian',
get fullName(){
return `${this.name}${this.type}`;
},
set gatorName(name){
this.name = name;
}
};
如果这样做,console.log(gator)我们只会得到名称和类型。但是,尽管它在控制台中不可见,但我们仍然可以访问getter fullName。
console.log(gator) // {name: 'Ben', type: 'reptilian',}
console.log(gator.fullName) // 'Benreptilian'
请注意,我们将getter称为普通属性,而不是方法。
克隆对象
我们用于Object.assign()克隆javaScript中的对象。如果您不熟悉Object.assign方法,请阅读有关如何在JavaScript中管理对象文章。这种方法的主要问题是,当我们克隆对象时,结果与我们期望的并不完全相同。该方法不适用于getter和setter。
const cayman = {Object.assign({}, gator};
console.log(cayman) // {name: 'Ben', type: 'reptilian', fullName: Benreptilian, gatorName: undefined }
因此,getter和setter成为常规值。如果getter是一个计数器值,则setter将是未定义的。
让我们用getOwnPropertyDescriptors方法克隆对象。
const crocodilian = Object.defineProperties({}, Object.getOwnPropertyDescriptors(gator)));
现在,让我们比较一下我们拥有的每个对象的描述符:
console.log(Object.getOwnPropertyDescriptors(gator));
/* name: {value:'Ben', writable: true, enumerable: true, configurable: true},
type: {value:'reptilian', writable: true, enumerable: true, configurable: true},
fullName: {get: f, set: undefined, enumerable: '', configurable: ''},
gatorName: {get: undefined, set: f, enumerable: '', configurable: ''},
*/
console.log(Object.getOwnPropertyDescriptors(cayman));
/* name: {value:'Ben', writable: true, enumerable: true, configurable: true},
type: {value:'reptilian', writable: true, enumerable: true, configurable: true},
fullName: {value: 'Benreptilian', writable: true, enumerable: '', configurable: ''},
gatorName: {value: undefined, writable: true, enumerable: '', configurable: ''},
*/
console.log(Object.getOwnPropertyDescriptors(crocodilian));
/* name: {value:'Ben', writable: true, enumerable: true, configurable: true},
type: {value:'reptilian', writable: true, enumerable: true, configurable: true},
fullName: {get: f, set: undefined, enumerable: '', configurable: ''},
gatorName: {get: undefined, set: f, enumerable: '', configurable: ''},
*/
gator的对象属性name和type定义为常规属性,但是fullName和gatorName定义为getter和setter。他们没有value字段,但是有get和set字段。cayman现在将对象的getter和setter描述为常规值。并与crocodilian对象,我们设法其getter和setter,由于保存getOwnPropertyDescriptors。
该getOwnPropertyDescriptors方法有助于避免数据丢失,有了它,我们可以创建对象的深层副本,而无需依赖其他实用程序功能。
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
JavaScript中的对象
ECMA
JavaScript 对象的创建和操作
详解JavaScript之神奇的Object.defineProperty | Fundebug博客
详解javascript,ES5标准中新增的几种高效Object操作方法
JavaScript 数据属性和访问器属性
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服