Object.getOwnPropertyDescriptors()

ES5 的Object.getOwnPropertyDescriptor()方法会返回某个对象属性的描述对象(descriptor)。ES2017 引入了Object.getOwnPropertyDescriptors()方法,返回指定对象所有自身属性(非继承属性)的描述对象。

  1. const obj = {
  2. foo: 123,
  3. get bar() { return 'abc' }
  4. };
  5. Object.getOwnPropertyDescriptors(obj)
  6. // { foo:
  7. // { value: 123,
  8. // writable: true,
  9. // enumerable: true,
  10. // configurable: true },
  11. // bar:
  12. // { get: [Function: get bar],
  13. // set: undefined,
  14. // enumerable: true,
  15. // configurable: true } }

上面代码中,Object.getOwnPropertyDescriptors()方法返回一个对象,所有原对象的属性名都是该对象的属性名,对应的属性值就是该属性的描述对象。

该方法的实现非常容易。

  1. function getOwnPropertyDescriptors(obj) {
  2. const result = {};
  3. for (let key of Reflect.ownKeys(obj)) {
  4. result[key] = Object.getOwnPropertyDescriptor(obj, key);
  5. }
  6. return result;
  7. }

该方法的引入目的,主要是为了解决Object.assign()无法正确拷贝get属性和set属性的问题。

  1. const source = {
  2. set foo(value) {
  3. console.log(value);
  4. }
  5. };
  6. const target1 = {};
  7. Object.assign(target1, source);
  8. Object.getOwnPropertyDescriptor(target1, 'foo')
  9. // { value: undefined,
  10. // writable: true,
  11. // enumerable: true,
  12. // configurable: true }

上面代码中,source对象的foo属性的值是一个赋值函数,Object.assign方法将这个属性拷贝给target1对象,结果该属性的值变成了undefined。这是因为Object.assign方法总是拷贝一个属性的值,而不会拷贝它背后的赋值方法或取值方法。

这时,Object.getOwnPropertyDescriptors()方法配合Object.defineProperties()方法,就可以实现正确拷贝。

  1. const source = {
  2. set foo(value) {
  3. console.log(value);
  4. }
  5. };
  6. const target2 = {};
  7. Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
  8. Object.getOwnPropertyDescriptor(target2, 'foo')
  9. // { get: undefined,
  10. // set: [Function: set foo],
  11. // enumerable: true,
  12. // configurable: true }

上面代码中,两个对象合并的逻辑可以写成一个函数。

  1. const shallowMerge = (target, source) => Object.defineProperties(
  2. target,
  3. Object.getOwnPropertyDescriptors(source)
  4. );

Object.getOwnPropertyDescriptors()方法的另一个用处,是配合Object.create()方法,将对象属性克隆到一个新对象。这属于浅拷贝。

  1. const clone = Object.create(Object.getPrototypeOf(obj),
  2. Object.getOwnPropertyDescriptors(obj));
  3. // 或者
  4. const shallowClone = (obj) => Object.create(
  5. Object.getPrototypeOf(obj),
  6. Object.getOwnPropertyDescriptors(obj)
  7. );

上面代码会克隆对象obj

另外,Object.getOwnPropertyDescriptors()方法可以实现一个对象继承另一个对象。以前,继承另一个对象,常常写成下面这样。

  1. const obj = {
  2. __proto__: prot,
  3. foo: 123,
  4. };

ES6 规定__proto__只有浏览器要部署,其他环境不用部署。如果去除__proto__,上面代码就要改成下面这样。

  1. const obj = Object.create(prot);
  2. obj.foo = 123;
  3. // 或者
  4. const obj = Object.assign(
  5. Object.create(prot),
  6. {
  7. foo: 123,
  8. }
  9. );

有了Object.getOwnPropertyDescriptors(),我们就有了另一种写法。

  1. const obj = Object.create(
  2. prot,
  3. Object.getOwnPropertyDescriptors({
  4. foo: 123,
  5. })
  6. );

Object.getOwnPropertyDescriptors()也可以用来实现 Mixin(混入)模式。

  1. let mix = (object) => ({
  2. with: (...mixins) => mixins.reduce(
  3. (c, mixin) => Object.create(
  4. c, Object.getOwnPropertyDescriptors(mixin)
  5. ), object)
  6. });
  7. // multiple mixins example
  8. let a = {a: 'a'};
  9. let b = {b: 'b'};
  10. let c = {c: 'c'};
  11. let d = mix(c).with(a, b);
  12. d.c // "c"
  13. d.b // "b"
  14. d.a // "a"

上面代码返回一个新的对象d,代表了对象ab被混入了对象c的操作。

出于完整性的考虑,Object.getOwnPropertyDescriptors()进入标准以后,以后还会新增Reflect.getOwnPropertyDescriptors()方法。