es6 javascript的物件Object.getOwnPropertyDescriptors()
ES5 有一個Object.getOwnPropertyDescriptor方法,返回某個物件屬性的描述物件( descriptor )。
-
var obj = { p: 'a' };
-
Object.getOwnPropertyDescriptor(obj, 'p')
-
// Object { value: "a",
-
// writable: true,
-
// enumerable: true,
-
// configurable: true
-
// }
ES7 有一個提案,提出了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: 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: 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);
上面程式碼中,物件a和b被混入了物件c。
出於完整性的考慮,Object.getOwnPropertyDescriptors進入標準以後,還會有Reflect.getOwnPropertyDescriptors方法。