JS Prototype Chain Visualizer

Every JavaScript object has an internal link called [[Prototype]] that points to another object (or null). When you access a property that doesn't exist directly on an object, the engine walks up this chain of linked objects until it finds the property or reaches null. This is the prototype chain — the foundation of JavaScript's inheritance model.

[[Prototype]] is the internal slot on every object that links it to its parent in the chain. It can be read with Object.getPrototypeOf(obj) or the non-standard __proto__ accessor. The .prototype property is different — it only exists on functions and defines the [[Prototype]] that will be assigned to objects created with new ThatFunction(). So MyClass.prototype is the object that instances will inherit from, while an instance's [[Prototype]] points to MyClass.prototype.

Object.create(proto) creates a brand-new object whose [[Prototype]] is set to proto. This lets you set up inheritance relationships explicitly, without using classes or constructor functions. For example, Object.create(Animal.prototype) creates an object that inherits all of Animal's prototype methods. It is also how older code implemented classical inheritance before the class keyword was introduced in ES2015.

When you write class Dog extends Animal, two prototype links are created. First, Dog.prototype.[[Prototype]] is set to Animal.prototype — so instances of Dog inherit Animal's instance methods. Second, Dog.[[Prototype]] is set to Animal itself — so Dog inherits Animal's static methods. Using extends with class is syntactic sugar over the same Object.setPrototypeOf calls you would make manually in ES5.

obj.hasOwnProperty(key) returns true only if key is defined directly on obj — not anywhere up the prototype chain. Use it when iterating with for...in (which walks the chain) to skip inherited properties. In modern code, prefer Object.hasOwn(obj, key) which does the same thing but works even if hasOwnProperty is shadowed on the object. You can also use Object.keys() which only returns own enumerable properties.

Object.prototype is at the top of every prototype chain for regular objects. It provides universal methods like toString(), valueOf(), and hasOwnProperty(). Its own [[Prototype]] is null, which is the sentinel that tells the property lookup engine to stop searching. If a property is not found before reaching null, the result is undefined (for property access) or a TypeError (for method calls).