Object walker

How to use it

1. Choose a starting object from the menu: a literal, an array, a function, a class instance, a Date or a DOM button. The code that made it appears below the menu.
2. Read the chain from the top. Each level is what Object.getPrototypeOf returned for the level above it, and the last is always null. Open a level to list its own properties, each marked as a value, a function or an accessor.
3. Type a name, or press one of the suggested names. The tool opens the level where a read of that name would stop and says which levels further up have the same name, shadowed. A symbol key is typed in brackets, as in [Symbol.iterator]. A name found on no level reaches null, and reading it gives undefined.

Try addEventListener on the button, then on the array. The button's chain goes through HTMLButtonElement, HTMLElement, Element, Node and EventTarget before it joins the same Object.prototype that a literal has. The language and the DOM use one mechanism for inheritance.

The tool reads property descriptors and never reads through an accessor, so it runs no getters. A name is compared with property names as text and is never evaluated. The logic is in object-walker.js, which you can read and reuse.

Learn more

• Prototypes and classes: constructors, [[Prototype]] and .prototype, shadowing, extending built-ins, and class.
• The DOM: what the objects at the top of the button's chain do.
• The JavaScript section.