【JavaScript】 そのメソッドはどこにある?プロトタイプチェーンを検索する

更新日:2021/02/24

JavaScriptはオブジェクトのプロパティを参照したとき、オブジェクト内にそのプロパティが無いと、プロトタイプチェーンを参照します。

その様子を観察してみようと思い、今回はネタ記事として簡単な検証コードを作成してみました。

 

プロトタイプを検索するコード

次のコードは、オブジェクト内のメソッドをプロトタイプチェーンを含めて検索しています。


const serchMethod = ( obj , method )=>{

    const parents = new WeakSet();

    let result = "オブジェクト."
    if( obj.hasOwnProperty( method ) ) return  result + method;
    parents.add( obj );

    let parentObj = obj;

    while( true ){
        parentObj = Object.getPrototypeOf( parentObj );
        if( parentObj === null || parents.has(parentObj) ) return `オブジェクトに${ method }はありません`;
        result += "<<prototype>>.";
        if( parentObj.hasOwnProperty( method ) ) return  result + method;
    }

};

console.log( serchMethod( window,"addEventListener" ) );
   // 結果:オブジェクト.<<prototype>>.<<prototype>>.<<prototype>>.addEventListener

console.log( serchMethod( window,"abcdefg" ) );
   // 結果:オブジェクトにabcdefgはありません

windowオブジェクトのaddEventListenerメソッドを検索してみましたが、かなり深い位置にあることがわかりました。
だから何?という感想しかありませんが…

コードについて簡単に解説します。

まずhasOwnPropertyメソッドで、プロパティがメソッドを直接所持しているかどうかチェックしています。

所持していない場合は、Object.getPrototypeOfメソッドでオブジェクトのプロトタイプの参照先を取得し、hasOwnPropertyメソッドで、プロパティがメソッドを直接所持しているかどうかチェックします。

基本的には、これの繰り返しです。

コードの一番最初のWeakSetは、オブジェクトを格納しておけるオブジェクトです。
検索対象のオブジェクトとObject.getPrototypeOfメソッドで取得したプロトタイプ参照先オブジェクトを格納しておくことで、プロトタイプチェーンの循環参照対策をしています。

プロトタイプチェーンが循環することはあまりないと思いますが、もし循環していたら無限ループしてしまうので、一応組み込んであります。

更新日:2021/02/24

書いた人(管理人):けーちゃん

スポンサーリンク

記事の内容について

null

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

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

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

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

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

 

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