1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptでクラスのGetterを含めたオブジェクトの値を列挙する

Last updated at Posted at 2020-04-09

マルチウィンドウ間でデータのやり取りをする際に、クラスに定義された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"]

以上

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?