MENU

JavaScript

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

更新日:2021/02/24

 

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

 

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

■お願い
去年ECMAScript2020を頑張って日本語訳しましたが、誰も見てくれません・・・
誰かみて!!
【JavaScript】 学習のためECMAScript2020を日本語訳してみました

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

 


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メソッドで取得したプロトタイプ参照先オブジェクトを格納しておくことで、プロトタイプチェーンの循環参照対策をしています。

 

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

 

 

記事の内容について

 

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


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

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

そんなときは、ご意見もらえたら嬉しいです。

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

【お願い】

お願い

■このページのURL


■このページのタイトル


■リンクタグ