JavaScript でプロトタイプチェーンをみたい
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ プロトタイプチェーンを表示する関数を作ってみた
ときどきプロトタイプチェーンを見たいことがあります
クラス言語でいうクラスの継承関係ですね
コンソールで
こういうことしてひとつひとつ見ていったりもするのですがめんどうです
まとめてみたいということで関数にしました
スニペットにしてすぐに出せるようにすると捗ります
オブジェクトに対してなら showInherit で関数に対してなら showInheritFn を使います
クラス言語でいうクラスの継承関係ですね
コンソールで
> HTMLElement.prototype.__proto__
< Element {Symbol(Symbol.toStringTag): "Element", Symbol(Symbol.unscopables): Object}
< 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__)
}
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] }
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] }
function StyleSheet() { [native code] }
function Object() { [native code] }
オブジェクトに対してなら showInherit で関数に対してなら showInheritFn を使います