Lesson 6 · JavaScript Prototype Lab

JavaScript objects and DOM objects use the same rules.

An array, a function, a date, a button, and the document all look different. Underneath, JavaScript searches every one of them in the same way: check the object, then follow its hidden prototype link to the next object. This page lets you change the objects and watch that search happen.

Trace one property lookup

Choose an object and ask for a property. Then walk the exact path JavaScript walks.

Choose an object Look for this property

Change a prototype chain yourself

This safe sandbox contains one object called student and its backup object, studentPrototype. Add the same property at different levels to see shadowing.

Property name Property value

Explore the JavaScript and browser object universe

Pick a built-in JavaScript value, constructor, DOM node, event, or browser object. Every member below is discovered live. Click a chain level to see only what it contributes.

Object to inspect Find a property or method

Properties and methods

method property getter/setter

The four ideas to keep

1.Properties live on objects. Methods are just properties whose value is a function.

2.If a property is missing, JavaScript follows [[Prototype]] and keeps searching.

3.An own property wins over an inherited property with the same name. This is shadowing.

4.DOM objects are JavaScript objects supplied by the browser. They follow the same lookup rules.