• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

ES2017 中的 Object.getOwnPropertyDescriptors()

ES2015(ES6) web前端中文站 2年前 (2017-07-31) 762次浏览 已收录 0个评论

本章介绍了 ECMAScript 2017 的 Object.getOwnPropertyDescriptors() 特性 。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

概述

Object.getOwnPropertyDescriptors(obj) 返回指定对象 obj 上自有属性对应的属性描述符:

 const obj = { [Symbol('foo')]: 123, get bar() { return 'abc' }, }; console.log(Object.getOwnPropertyDescriptors(obj)); // Output: // { [Symbol('foo')]: //    { value: 123, //      writable: true, //      enumerable: true, //      configurable: true }, //   bar: //    { get: [Function: bar], //      set: undefined, //      enumerable: true, //      configurable: true } } 

Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors(obj) 接受一个 obj对象 并返回一个 result 结果对象:

  • 对于 obj 的每个 自有(非继承的)属性,它会添加一个属性,其结果的键是相同的,其值是obj属性的描述符。

属性描述符描述属性的一些 特征(attributes)(其值,是否可写等)。有关更多信息,请参阅 Sect 。“Speaking JavaScript” 中的 “属性 特征(attributes) 和 属性描述符”。

这是使用 Object.getOwnPropertyDescriptors() 的一个例子:

 const obj = { [Symbol('foo')]: 123, get bar() { return 'abc' }, }; console.log(Object.getOwnPropertyDescriptors(obj)); // Output: // { [Symbol('foo')]: //    { value: 123, //      writable: true, //      enumerable: true, //      configurable: true }, //   bar: //    { get: [Function: bar], //      set: undefined, //      enumerable: true, //      configurable: true } }

这是 Object.getOwnPropertyDescriptors() 的实现:

 function getOwnPropertyDescriptors(obj) { const result = {}; for (let key of Reflect.ownKeys(obj)) { result[key] = Object.getOwnPropertyDescriptor(obj, key); } return result; }

Object.getOwnPropertyDescriptors() 的用例

用例:拷贝属性到一个对象中

自 ES6 起,JavaScript 已经有复制属性的工具方法了:Object.assign() 。但是,该方法使用了简单的 getset 操作来复制其键为 key 的属性:

 const value = source[key]; // get target[key] = value; // set

这意味着它不能正确地复制具有非默认特征(attributes)的属性(getter,setter,不可写属性,等)。以下示例说明了此限制。对象 source 有一个 setter ,其键是 foo

 const source = { set foo(value) { console.log(value); } }; console.log(Object.getOwnPropertyDescriptor(source, 'foo')); // { get: undefined, //   set: [Function: foo], //   enumerable: true, //   configurable: true }

使用 Object.assign() 将属性 foo 复制到对象 target 则失败了:

 const target1 = {}; Object.assign(target1, source); console.log(Object.getOwnPropertyDescriptor(target1, 'foo')); // { value: undefined, //   writable: true, //   enumerable: true, //   configurable: true }

幸运的是,使用 Object.getOwnPropertyDescriptors()Object.defineProperties() 可以一起工作:

 const target2 = {}; Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source)); console.log(Object.getOwnPropertyDescriptor(target2, 'foo')); // { get: undefined, //   set: [Function: foo], //   enumerable: true, //   configurable: true }

用例:克隆对象

浅拷贝(浅克隆)类似于复制属性,这里 Object.getOwnPropertyDescriptors() 也是一个很好的选择。

这次,我们使用 Object.create() ,它有两个参数:

  • 第一个参数指定它返回对象的原型。
  • 可选的第二个参数是类似于 Object.getOwnPropertyDescriptors() 返回的属性描述符集合。
 const clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));

用例:带有任意原型的跨平台对象字面量

要使用对象字面量创建带有任意原型 prot 的对象,语法最好的方法是使用特殊属性 __proto__

 const obj = { __proto__: prot, foo: 123, };

遗憾的是,这个特性只能保证在浏览器里运行。 常见的解决方法是 Object.create() 和赋值:

 const obj = Object.create(prot); obj.foo = 123;

但是现在你也可以使用 Object.getOwnPropertyDescriptors()

 const obj = Object.create( prot, Object.getOwnPropertyDescriptors({ foo: 123, }) ); 

另一种方法是使用 Object.assign()

 const obj = Object.assign( Object.create(prot), { foo: 123, } ); 

陷阱:拷贝使用 super 的方法

使用 super 的方法与其 home 对象(存储该方法的对象)是强关联的。目前没有办法将这种方法复制或移动到不同的对象中。

原文链接:http://exploringjs.com/es2016-es2017/ch_object-getownpropertydescriptors.html

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:ES2017 中的 Object.getOwnPropertyDescriptors()
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址