【JavaScript】組み込みやAPIオブジェクトの名前を取得する方法

更新日：2023/04/19

JavaScriptの組み込みオブジェクトやAPIのインスタンスから、元となったコンストラクタの名前を取得してみます。

 

オブジェクトの名前を取得するコード

次の関数は、オブジェクトの名前を取得します。

オブジェクトの名前を取得するコード

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;
};

次のように引数にオブジェクトを渡します。

console.log( getObjectName( {} ) ); // Object
console.log( getObjectName( [1,2,3] ) );  // Array
console.log( getObjectName( new Uint8Array(10) ) );  // Uint8Array
console.log( getObjectName( function(){} ) );  // function
console.log( getObjectName( ()=>{} ) );  // function
console.log( getObjectName( new Promise(()=>{}) ) );  // Promise
console.log( getObjectName( document.getElementById( "id" ) ) ); // HTMLDivElement

DOM要素も指定できます。

console.log( getObjectName( document.getElementById( "id" ) ) ); // HTMLDivElement

プリミティブを指定すると、型が返ります。
プリミティブをオブジェクトに変換したものを関数に適用すると、頭文字が大文字になります。

console.log( getObjectName( 123 ) ); // number
console.log( getObjectName( new Number(123) ) );  // Number

console.log( getObjectName( "abc" ) );  // string
console.log( getObjectName( new String("abc") ) );  // String

 

解説

オブジェクトはプロトタイプチェーン上のconstructorプロパティに、オブジェクトを生成したコンストラクター関数への参照がセットされています。

constructorプロパティのイメージ

オブジェクト{
    プロパティ: 値
    プロパティ: 値
    [[prototype]]:{
        constructor:{ // コンストラクター関数への参照
            length: 0
            name: 名前
        }
    }
}

コンストラクター関数とは関数オブジェクトです。
関数オブジェクトは仕様上、生成時にnameプロパティが作成され、関数の名前がセットされます。
class構文の場合は、クラスの名前です。

これがそのまま、オブジェクトから参照できるわけです。

 

補足：関数の名前

関数は定義時にnameプロパティに関数名がセットされます。

function ABC(){}
const abc = function(){};

console.log( ABC.name );  // ABC
console.log( abc.name );  // abc

関数はオブジェクトなので、定義後に変数に代入してもnameプロパティは変化しません。

const ABC2 = ABC;
const abc2 = abc;

console.log( ABC2.name );  // ABC
console.log( abc2.name );  // abc

new演算子でコンストラクター関数からインスタンスを作成すると、このnameプロパティが取り込まれます。
そのためインスタンスの名前も、同じものになります。

const ABC_i = new ABC();
const abc_i = new abc();

console.log( getObjectName( ABC_i ) );  // ABC
console.log( getObjectName( abc_i ) );  // abc

更新日：2023/04/19

書いた人（管理人）：けーちゃん

関連記事

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。