◆ プロトタイプチェーンを表示する関数を作ってみた

ときどきプロトタイプチェーンを見たいことがあります
クラス言語でいうクラスの継承関係ですね


コンソールで
> HTMLElement.prototype.__proto__
< Element {Symbol(Symbol.toStringTag): "Element", Symbol(Symbol.unscopables): Object}

こういうことしてひとつひとつ見ていったりもするのですがめんどうです
まとめてみたいということで関数にしました

スニペットにしてすぐに出せるようにすると捗ります

showInherit

function showInherit(obj){
    while(obj = obj.__proto__){
        console.log(obj.constructor)
    }
}
function showInheritFn(fn){
    var obj = fn.prototype
    do{
        console.log(obj.constructor)
    } while(obj = obj.__proto__)
}

使い方

showInherit(document.body)
function HTMLBodyElement() { [native code] }
function HTMLElement() { [native code] }
function Element() { [native code] }
function Node() { [native code] }
function EventTarget() { [native code] }
function Object() { [native code] }
showInheritFn(CSSStyleSheet)
function CSSStyleSheet() { [native code] }
function StyleSheet() { [native code] }
function Object() { [native code] }

オブジェクトに対してなら showInherit で関数に対してなら showInheritFn を使います