【JavaScript】オブジェクトの階層（継承）を視覚的に表示してみる

const getObjectName = obj =>{
  if( typeof obj !=="object" ) return typeof obj;
  const proto = Object.getPrototypeOf(obj);

  return typeof proto?.constructor !== "function" || proto.constructor.name === undefined 
          ? "object" : proto.constructor.name;
};

const getObjectInheritance = obj =>{
  const loopCheck = new WeakSet( [Object.prototype] ); // ループ監視＆最終階層は除外
  const result = [];

  do{
    loopCheck.add( obj );               // WeakSetに追加
    result.push( getObjectName(obj) );  // 階層名を取得して配列に追加
    obj = Object.getPrototypeOf( obj ); // プロトタイプを取得

  }while( !loopCheck.has( obj ) // ループしていない？
      && obj !== null 
      && typeof obj === "object" // 取得したプロトタイプはオブジェクト？
  );

  return result;
};

const B = class{
  propB = 1;
};
const A = class extends B{
  propA = "A";
};
const a = new A();

console.log( getObjectInheritance(a) );
 // 結果: [ "A", "B", "Object" ]