JavaScript Notes

JavaScript Prototype Chain – How Property Lookup Works in JavaScript

Deep dive into the JavaScript prototype chain with diagrams, __proto__, Object.getPrototypeOf, property lookup order, null termination, and interview Q&A.

The prototype chain is JavaScript's mechanism for property and method lookup. When you access a property on an object and it's not found directly on that object, JavaScript automatically walks up a chain of linked prototype objects until it either finds the property or reaches null.

This chain is what makes inheritance work in JavaScript — and understanding it deeply is the key to mastering JavaScript OOP.

JavaScript Prototype Chain - Property Lookup through __proto__

📊 Prototype Chain Diagram

Example

┌─────────────────────────────────────────────────┐ │ let dog = new Dog("Bruno") │ │ │ │ dog (instance) │ │ ├── name: "Bruno" ← own property │ │ └── [[Prototype]] ────────────────────┐ │ │ ▼ │ │ Dog.prototype │ │ ├── bark() │ │ └── [[Prototype]] ──┐ │ │ ▼ │ │ Animal.prototype │ │ ├── speak() │ │ └── [[Prototype]] ──┐ │ │ ▼ │ │ Object.prototype │ │ ├── toString() │ │ ├── hasOwnProperty() │ │ ├── valueOf() │ │ └── [[Prototype]] ──► null │ │ │ Property lookup: │ │ dog.name → found on dog (own) │ │ dog.bark() → found on Dog.prototype │ │ dog.speak() → found on Animal.prototype │ │ dog.toString() → found on Object.prototype │ │ dog.fly() → NOT found → returns undefined │ └─────────────────────────────────────────────────┘

💻 Example 1 — Tracing the Prototype Chain

js example

class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}

class Dog extends Animal {
  bark() { return `${this.name} barks!`; }
}

const dog = new Dog("Bruno");

// Own properties — directly on the object
console.log(dog.hasOwnProperty("name"));    // true — set in constructor
console.log(dog.hasOwnProperty("bark"));    // false — on prototype, not instance
console.log(dog.hasOwnProperty("speak"));   // false — on Animal.prototype

// Prototype chain lookup
console.log(dog.bark());     // found on Dog.prototype
console.log(dog.speak());    // found on Animal.prototype
console.log(dog.toString()); // found on Object.prototype

// Walking the chain manually
console.log(Object.getPrototypeOf(dog) === Dog.prototype);
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype);
console.log(Object.getPrototypeOf(Animal.prototype) === Object.prototype);
console.log(Object.getPrototypeOf(Object.prototype) === null);  // chain ends here

Output

true
false
false
Bruno barks!
Bruno makes a sound
[object Object]
true
true
true
true

💻 Example 2 — Property Shadowing

When a child has a property with the same name as one on its prototype, the child's version shadows (hides) the parent's.

Example

class Vehicle { type = "generic vehicle"; // on instance describe() { return this.type; } // method on prototype } class Car extends Vehicle { type = "car"; // shadows Vehicle's type on THIS instance } class Truck extends Vehicle { // no override — uses Vehicle's type } const vehicle = new Vehicle(); const car = new Car(); const truck = new Truck(); console.log(vehicle.describe()); console.log(car.describe()); console.log(truck.describe()); // Prototype chain check console.log(Object.getOwnPropertyNames(car)); // ["type"] — own properties

Output

generic vehicle
car
generic vehicle
[ 'type' ]

💻 Example 3 — Iterating vs Own Properties

Example

class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { return `Hi, I'm ${this.name}`; } } const p = new Person("Riya", 22); // Object.keys → OWN enumerable properties only console.log("Object.keys:", Object.keys(p)); // for...in → includes inherited enumerable properties const allKeys = []; for (const key in p) allKeys.push(key); console.log("for...in:", allKeys); // Check specifically for (const key in p) { if (p.hasOwnProperty(key)) { console.log(`Own: ${key} = ${p[key]}`); } else { console.log(`Inherited: ${key}`); } }

Output

Object.keys: [ 'name', 'age' ]
for...in: [ 'name', 'age' ]
Own: name = Riya
Own: age = 22

Note: greet doesn't appear because class methods are non-enumerable by default.

💻 Example 4 — Object.create() for Direct Prototype Control

Example

// Manual prototype chain without class syntax const animalProto = { speak() { return `${this.name} makes a sound`; }, toString() { return `[${this.type}: ${this.name}]`; } }; const dogProto = Object.create(animalProto); // dogProto inherits from animalProto dogProto.bark = function() { return `${this.name} barks!`; }; // Create an instance directly const dog = Object.create(dogProto); dog.name = "Bruno"; dog.type = "Dog"; console.log(dog.bark()); console.log(dog.speak()); console.log(dog.toString()); // Chain inspection console.log(Object.getPrototypeOf(dog) === dogProto); console.log(Object.getPrototypeOf(dogProto) === animalProto); console.log(Object.getPrototypeOf(animalProto) === Object.prototype);

Output

Bruno barks!
Bruno makes a sound
[Dog: Bruno]
true
true
true

📋 Key Prototype Chain Methods

Method / Property	Purpose
`Object.getPrototypeOf(obj)`	Get the prototype of `obj`
`obj.hasOwnProperty(key)`	Check if `key` is directly on `obj` (not inherited)
`Object.keys(obj)`	Own enumerable keys only
`Object.create(proto)`	Create object with explicit prototype
`instanceof`	Check prototype chain — `obj instanceof Class`
`Object.prototype.isPrototypeOf(obj)`	Check if an object is in another's chain

⚠️ Common Mistakes

❌ Mistake 1 — Mutating `Object.prototype` (Prototype Pollution)

js example

// NEVER DO THIS
Object.prototype.greet = function() { return "hi"; };

const plainObj = {};
console.log(plainObj.greet());  // "hi" — every object now has .greet()!
// This breaks for...in loops and other code

Output

hi

❌ Mistake 2 — Confusing `prototype` and `proto`

js example

function Dog(name) { this.name = name; }

// .prototype is on the CONSTRUCTOR function — what instances inherit FROM
console.log(typeof Dog.prototype);

const d = new Dog("Rex");
// .__proto__ is on the INSTANCE — points UP to constructor's prototype
console.log(d.__proto__ === Dog.prototype);     // true
console.log(Object.getPrototypeOf(d) === Dog.prototype);  // same, preferred

Output

object
true
true

❌ Mistake 3 — Checking Inherited Properties with `hasOwnProperty`

js example

const dog = new Dog("Bruno");
// .bark is on Dog.prototype, not on dog itself
console.log(dog.hasOwnProperty("bark")); // false — use dog.bark !== undefined instead
console.log("bark" in dog);              // true — checks entire chain

Output

false
true

🎯 Key Takeaways

The prototype chain is how JavaScript resolves property and method lookups
Every object has an internal [[Prototype]] link to another object (its prototype)
The chain always ends at Object.prototype, whose [[Prototype]] is null
class extends sets up the prototype chain — super() and super.method() walk it explicitly
hasOwnProperty() tells you if a property is directly on an object vs inherited
Use Object.getPrototypeOf() — not __proto__ — for safe prototype introspection
Avoid mutating Object.prototype — it affects every object in your entire program

❓ Interview Questions

Q1. What is the JavaScript prototype chain? > It is the lookup path JavaScript follows when a property is not found directly on an object. JavaScript walks up the chain of prototype objects, checking each one, until it either finds the property or reaches the end of the chain (null), at which point it returns undefined.

Q2. Where does the prototype chain end? > At Object.prototype. Its [[Prototype]] is null. So: instance → ChildClass.prototype → ParentClass.prototype → Object.prototype → null.

Q3. What is the difference between prototype and __proto__? > Constructor.prototype is the object that new instances get as their prototype. instance.__proto__ (or Object.getPrototypeOf(instance)) is the actual prototype link on an instance. __proto__ was informal — use Object.getPrototypeOf() for production code.

Q4. What is property shadowing? > When an object has a property with the same name as one on its prototype, the object's own property "shadows" the prototype's version. JavaScript always finds the object's own property first and stops searching the chain.

Q5. What does hasOwnProperty do? > Returns true if the specified property is directly on the object (not inherited from a prototype). Use it in for...in loops to filter out inherited properties: if (obj.hasOwnProperty(key)) { ... }.

Q6. What is the difference between in operator and hasOwnProperty? > "key" in obj checks the entire prototype chain — returns true for both own and inherited properties. obj.hasOwnProperty("key") returns true only for own properties.

Q7. How does Object.create(proto) differ from new Constructor()? > Object.create(proto) creates an object whose [[Prototype]] is explicitly set to proto — no constructor function involved. new Constructor() creates an object whose [[Prototype]] is Constructor.prototype and runs the constructor body.

Q8. What is prototype pollution and why is it dangerous? > Prototype pollution is when malicious or careless code adds properties to Object.prototype. Since all objects inherit from it, those properties appear on every plain object in the program, breaking for...in loops, JSON serialization, and creating unexpected behavior or security vulnerabilities.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Prototype Chain – How Property Lookup Works in JavaScript.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, oop, prototype, chain

Continue learning this concept

Oop In JavascriptAbstraction in JavaScript OOP – Hide Complexity, Expose SimplicityLearn abstraction in JavaScript OOP with class examples, private fields, real-world analogies, common mistakes, and interview Q&A. beginner-friendly tutorial.Oop In JavascriptJavaScript Classes Tutorial – ES6 Class Syntax, Inheritance & MoreMaster JavaScript ES6 classes with constructors, methods, static members, inheritance, private fields, and real-world examples. beginner-friendly JS OOP tutorial.Oop In JavascriptJavaScript Constructor Functions – new Keyword, Prototype & OOP PatternsUnderstand JavaScript constructor functions with the new keyword, prototype methods, object creation, comparison with ES6 classes, and interview-ready Q&A.Oop In JavascriptEncapsulation in JavaScript – Private Fields, Getters, Setters & Data ProtectionLearn encapsulation in JavaScript with private class fields, getters, setters, closures, and real-world examples. Protect your data with ES2022 OOP techniques.Oop In JavascriptJavaScript Inheritance – extends, super, and Prototype-Based InheritanceMaster JavaScript inheritance with ES6 extends, super keyword, method overriding, prototype chain, multi-level inheritance, and interview-ready Q&A examples.Oop In JavascriptObject-Oriented Programming in JavaScript – OOP Concepts Complete GuideComplete guide to OOP in JavaScript: classes, objects, the 4 pillars (encapsulation, inheritance, abstraction, polymorphism), prototype chain, and interview Q&A.

PreviousPolymorphism in JavaScript – Method Overriding, Duck Typing & Many Forms NextJavaScript Prototypes – Prototype-Based Inheritance, Object.create & prototype Property

📊 Prototype Chain Diagram

💻 Example 1 — Tracing the Prototype Chain

💻 Example 2 — Property Shadowing

💻 Example 3 — Iterating vs Own Properties

💻 Example 4 — Object.create() for Direct Prototype Control

📋 Key Prototype Chain Methods

⚠️ Common Mistakes

❌ Mistake 1 — Mutating Object.prototype (Prototype Pollution)

❌ Mistake 2 — Confusing prototype and __proto__

❌ Mistake 3 — Checking Inherited Properties with hasOwnProperty

🎯 Key Takeaways

❓ Interview Questions

Continue learning this concept

📊 Prototype Chain Diagram

💻 Example 1 — Tracing the Prototype Chain

💻 Example 2 — Property Shadowing

💻 Example 3 — Iterating vs Own Properties

💻 Example 4 — Object.create() for Direct Prototype Control

📋 Key Prototype Chain Methods

⚠️ Common Mistakes

❌ Mistake 1 — Mutating Object.prototype (Prototype Pollution)

❌ Mistake 2 — Confusing prototype and __proto__

❌ Mistake 3 — Checking Inherited Properties with hasOwnProperty

🎯 Key Takeaways

❓ Interview Questions

Continue learning this concept

❌ Mistake 1 — Mutating `Object.prototype` (Prototype Pollution)

❌ Mistake 2 — Confusing `prototype` and `proto`

❌ Mistake 3 — Checking Inherited Properties with `hasOwnProperty`

❌ Mistake 1 — Mutating `Object.prototype` (Prototype Pollution)

❌ Mistake 2 — Confusing `prototype` and `proto`

❌ Mistake 3 — Checking Inherited Properties with `hasOwnProperty`