es6 Object.getOwnPropertyDescriptors()
Object.getOwnPropertyDescriptors()
前面说过,Object.getOwnPropertyDescriptor()
方法会返回某个对象属性的描述对象(descriptor)。ES2017 引入了Object.getOwnPropertyDescriptors
方法,返回指定对象所有自身属性(非继承属性)的描述对象。
const obj = {
foo: 123,
get bar() { return 'abc' }
};
Object.getOwnPropertyDescriptors(obj)
// { foo:
// { value: 123,
// writable: true,
// enumerable: true,
// configurable: true },
// bar:
// { get: [Function: get 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.assign()
无法正确拷贝get
属性和set
属性的问题。
const source = {
set foo(value) {
console.log(value);
}
};
const target1 = {};
Object.assign(target1, source);
Object.getOwnPropertyDescriptor(target1, 'foo')
// { value: undefined,
// writable: true,
// enumerable: true,
// configurable: true }
上面代码中,source
对象的foo
属性的值是一个赋值函数,Object.assign
方法将这个属性拷贝给target1
对象,结果该属性的值变成了undefined
。这是因为Object.assign
方法总是拷贝一个属性的值,而不会拷贝它背后的赋值方法或取值方法。
这时,Object.getOwnPropertyDescriptors
方法配合Object.defineProperties
方法,就可以实现正确拷贝。
const source = {
set foo(value) {
console.log(value);
}
};
const target2 = {};
Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
Object.getOwnPropertyDescriptor(target2, 'foo')
// { get: undefined,
// set: [Function: set foo],
// enumerable: true,
// configurable: true }
上面代码中,两个对象合并的逻辑可以写成一个函数。
const shallowMerge = (target, source) => Object.defineProperties(
target,
Object.getOwnPropertyDescriptors(source)
);
Object.getOwnPropertyDescriptors
方法的另一个用处,是配合Object.create
方法,将对象属性克隆到一个新对象。这属于浅拷贝。
const clone = Object.create(Object.getPrototypeOf(obj),
Object.getOwnPropertyDescriptors(obj));
// 或者
const shallowClone = (obj) => Object.create(
Object.getPrototypeOf(obj),
Object.getOwnPropertyDescriptors(obj)
);
上面代码会克隆对象obj
。
另外,Object.getOwnPropertyDescriptors
方法可以实现一个对象继承另一个对象。以前,继承另一个对象,常常写成下面这样。
const obj = {
__proto__: prot,
foo: 123,
};
ES6 规定__proto__
只有浏览器要部署,其他环境不用部署。如果去除__proto__
,上面代码就要改成下面这样。
const obj = Object.create(prot);
obj.foo = 123;
// 或者
const obj = Object.assign(
Object.create(prot),
{
foo: 123,
}
);
有了Object.getOwnPropertyDescriptors
,我们就有了另一种写法。
const obj = Object.create(
prot,
Object.getOwnPropertyDescriptors({
foo: 123,
})
);
Object.getOwnPropertyDescriptors
也可以用来实现 Mixin(混入)模式。
let mix = (object) => ({
with: (...mixins) => mixins.reduce(
(c, mixin) => Object.create(
c, Object.getOwnPropertyDescriptors(mixin)
), object)
});
// multiple mixins example
let a = {a: 'a'};
let b = {b: 'b'};
let c = {c: 'c'};
let d = mix(c).with(a, b);
d.c // "c"
d.b // "b"
d.a // "a"
上面代码返回一个新的对象d
,代表了对象a
和b
被混入了对象c
的操作。
出于完整性的考虑,Object.getOwnPropertyDescriptors
进入标准以后,以后还会新增Reflect.getOwnPropertyDescriptors
方法。
es6 Object.getOwnPropertyDescriptors()相关推荐
- es6 Object.getPrototypeOf()方法
Object.getPrototypeOf()方法 ES6 Object.getPrototypeOf方法可以用来从子类上获取父类. Object.getPrototypeOf(ColorPoint) ...
- es6 Object.is()方法
Object.is()方法 ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===).它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0.J ...
- es6 Object.keys(),Object.values(),Object.entries()
Object.keys(),Object.values(),Object.entries() Object.keys() ES5 引入了Object.keys()方法,返回一个数组,成员是参数对象自身 ...
- es6 Object.assign()方法
Object.assign()方法 基本用法 Object.assign()方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). const target = ...
- ES6 Object.assign()的用法
1.Object.assign()基本用法: Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target).它至少需要两个对象作为参数,第一个参数是目标对 ...
- 【ES6基础】Object的新方法
Object对象可谓是JS的重要核心内容,在你使用JS的过程中,你会发现自己的工作大部分都是在操作对象,ES6.ES7.ES8引入了不少新的方法,本篇文章笔者将带着大家一起熟悉下重点的新方法. 本篇文 ...
- 【ES8(2017)】Object 扩展 values() / entries() / getOwnPropertyDescriptors()
文章目录 Object.values() Object.entries() Object.getOwnPropertyDescriptors() ES8之前获取对象的每个属性的value值: cons ...
- ES6之Object.assign()用法,Object.assign()到底是浅拷贝还是深拷贝?
基本用法 Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). const target = { a: 1 }; const sou ...
- object.create()
语法: Object.create(proto, [propertiesObject]) //方法创建一个新对象,使用现有的对象来提供新创建的对象的proto. 参数: proto : 必须.表示新建 ...
最新文章
- 写缓冲器 + 无效队列,优化MESI协议的性能
- Python__数据结构与算法——查找与排序
- OpenCASCADE:Foundation Classes内存管理
- java jedis sadd_Java实现Redis的集合(set)命令操作
- 光伏电价下调幅度大 短期内市场不明朗
- 学大数据找IT十八掌
- 百年 IBM 终于 All In 人工智能和混合云!
- Redhat Linux配置远程桌面
- 基于jquery的全局ajax函数处理session过期后的ajax操作
- 弹性地基梁板的计算理论_第八章 弹性地基梁的计算理论
- Markdown - Markdown 引用图片太大怎么办 md控制图片的大小 对齐方式
- 中线提取算法_一种应用VisualGraph算法提取道路中线的方法与流程
- javascript事件流的原理
- 微信小程序之电子商场的设计以及实现
- 优化问题-Lagrange函数和共轭函数
- windows 2000/XP/2003服务全集
- mysql MMM架构
- 使用ghost 快速安装操作系统
- 【泰迪杯-数据分析-1】matplotlib
- 大淘客的index.php,大淘客配置教程