1. 程式人生 > >es6 javascript的物件Object.getOwnPropertyDescriptors()

es6 javascript的物件Object.getOwnPropertyDescriptors()

ES5 有一個Object.getOwnPropertyDescriptor方法,返回某個物件屬性的描述物件( descriptor )。

 

 
  1. var obj = { p: 'a' };

  2. Object.getOwnPropertyDescriptor(obj, 'p')

  3. // Object { value: "a",

  4. // writable: true,

  5. // enumerable: true,

  6. // configurable: true

  7. // }

ES7 有一個提案,提出了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: 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: foo],

  11. // enumerable: true,

  12. // configurable: true }

上面程式碼中,將兩個物件合併的邏輯提煉出來,就是下面這樣。

 

 

 
  1. const shallowMerge = (target, source) => Object.defineProperties(

  2. target,

  3. Object.getOwnPropertyDescriptors(source)

  4. );

  5. Object.getOwnPropertyDescriptors方法的另一個用處,是配合Object.create方法,將物件屬性克隆到一個新物件。這屬於淺拷貝。

  6. const clone = Object.create(Object.getPrototypeOf(obj),

  7. Object.getOwnPropertyDescriptors(obj));

  8. // 或者

  9. const shallowClone = (obj) => Object.create(

  10. Object.getPrototypeOf(obj),

  11. Object.getOwnPropertyDescriptors(obj)

  12. );

上面程式碼會克隆物件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. );

  7. Object.getOwnPropertyDescriptors也可以用來實現 Mixin (混入)模式。

  8. let mix = (object) => ({

  9. with: (...mixins) => mixins.reduce(

  10. (c, mixin) => Object.create(c, Object.getOwnPropertyDescriptors(mixin)), object)

  11. });

  12. // multiple mixins example

  13. let a = {a: 'a'};

  14. let b = {b: 'b'};

  15. let c = {c: 'c'};

  16. let d = mix(c).with(a, b);

上面程式碼中,物件a和b被混入了物件c。
出於完整性的考慮,Object.getOwnPropertyDescriptors進入標準以後,還會有Reflect.getOwnPropertyDescriptors方法。