マルチウィンドウ間でデータのやり取りをする際に、クラスに定義されたgetterの値(返り値)も含めてやり取りしたかったので、クラスに定義されたgetterを含めたオブジェクトの値を列挙する方法を調べた
基本的には以下を参考にした
https://qiita.com/yu0819ki/items/2bc8ba7e46d6ded63f4e
実装は以下のような感じ、
今回は、対象のクラスが他のクラスを継承している場合にそのクラスのgetterも含めて出力したかったので、ちょっと改造している
.js
const listupGetter = (obj) => {
if (obj.constructor.name === 'Object') return [];
let parentKeys = [];
// 親クラスを持っている場合には、そのクラスのgetterのキーも取得する
if (Object.getPrototypeOf(obj).constructor.name !== 'Object') {
parentKeys =listupGetter(Object.getPrototypeOf(obj));
}
// プロトタイプ(クラス)取得
const proto = Object.getPrototypeOf(obj);
// Object.getOwnPropertyNames: プロトタイプ(クラス)で定義されているプロパティを全部取得
const ownKeys = Object.getOwnPropertyNames(proto).filter((v) => {
// そのうち、デスクリプタとして get があるものだけフィルタリング
const descriptor = Object.getOwnPropertyDescriptor(proto, v);
return descriptor.get instanceof Function && v !== '__proto__';
});
return [...parentKeys, ...ownKeys];
}
/**
* クラスのGetterを含めた、オブジェクトのすべての値のキーの一覧を取得する
* functionは無視される
* @param obj 対象のobject
* @return {(string)[]} オブジェクトのすべての値のキーの一覧
*/
const getPropertyList = (obj) => {
return [...Object.keys(obj), ...listupGetter(obj)];
}
// 以下サンプルコード
class Polygon {
name = "Polygon";
get test (){
return 1
}
}
class Poly2 extends Polygon {
get test2(){
return 5
}
}
const poly1 = new Polygon();
const poly2 = new Poly2();
const obj = {
get test(){
return aaa
},
ccc: 1
}
console.log(getPropertyList(obj)); // => Array ["test", "ccc"]
console.log(getPropertyList(poly1)); // => Array ["name", "test"]
console.log(getPropertyList(poly2)); // => Array ["name", "test", "test2"]
以上