JavaScript Objects

Prototype Chain

Understand how JavaScript finds properties and methods through the prototype chain.

Learn how objects inherit from other objects, how property lookup works, why everything ultimately inherits from Object.prototype, and how JavaScript uses prototypes instead of traditional class inheritance.

Estimated Time

15 minutes

Difficulty

Intermediate

Progress

0% Complete

What is the Prototype Chain?

The Prototype Chain is JavaScript's inheritance mechanism. It lets an object inherit properties and methods from another object through a hidden prototype link.

Unlike Java or C#, JavaScript uses prototype-based inheritance. The modern class syntax is still built on top of prototypes.

What the Prototype Chain is

How JavaScript searches for properties

Why objects can use methods they do not own

How arrays, strings, and functions get built-in methods

Why Object.prototype and null matter

How prototype-based inheritance differs from Java or C# classes

How to explain prototypes in interviews

Common prototype mistakes

Beginner Mental Model

Think of Prototypes Like a Family Tree

When JavaScript cannot find something on the current object, it asks the parent prototype, then the next one, until it reaches null.

Family Tree Analogy

Grandfather
     ^
Father
     ^
Son

Grandfather owns a house.
Father owns a car.
Son owns a laptop.

If the son needs something:
1. Does the son have it?
2. If not, check the father.
3. If not, check the grandfather.
4. If nobody has it, return undefined.

Son

Current object

JavaScript checks here first.

Father

Prototype

Checked only if the property is missing.

Grandfather

Next prototype

JavaScript keeps walking upward.

undefined

Not found

Returned when the chain ends without a match.

Example 1: Basic Prototype Chain

1const animal = {
2  eat() {
3    console.log("Eating...");
4  }
5};
6 
7const dog = {
8  bark() {
9    console.log("Woof!");
10  }
11};
12 
13Object.setPrototypeOf(dog, animal);
14 
15dog.bark();
16dog.eat();

Output

Woof!

Eating...

dog owns bark(), but it does not own eat(). JavaScript follows dog's prototype link to animal and finds eat() there.

Example 2: Property Lookup

1const person = {
2  country: "Pakistan"
3};
4 
5const employee = {
6  name: "Zubair"
7};
8 
9Object.setPrototypeOf(employee, person);
10 
11console.log(employee.name);
12console.log(employee.country);

Output

Zubair

Pakistan

name is found directly on employee. country is not found on employee, so JavaScript checks person and returns Pakistan.

Example 3: Multiple Prototype Levels

1const grandParent = {
2  city: "Lahore"
3};
4 
5const parent = {
6  car: "Honda"
7};
8 
9const child = {
10  laptop: "MacBook"
11};
12 
13Object.setPrototypeOf(parent, grandParent);
14Object.setPrototypeOf(child, parent);
15 
16console.log(child.city);

Output

Lahore

city is not on child or parent. JavaScript keeps walking upward and finds city on grandParent.

Visual Representation

The Lookup Path from Object to null

This is the shape to remember for interviews and debugging.

Prototype Chain

child Object
      |
      v
Parent Prototype
      |
      v
Grandparent Prototype
      |
      v
Object.prototype
      |
      v
null

How JavaScript Searches

Suppose we access:

1child.city;

1.Does child have city?

2.Check prototype

3.Check next prototype

4.Return value

Company Hierarchy Example

Imagine a developer object linked to a manager object, and the manager linked to a CEO object. If you ask for developer.company, JavaScript checks Developer, then Manager, then CEO, and returns the company when it finds it.

CEO

company: Systems Limited

Manager

department: Commerce

Developer

name: Zubair

Property Lookup Animation

Own Object First, Prototype Second

Lookup stops as soon as JavaScript finds the property.

person

Search name

Found

person has its own name property, so lookup stops immediately.

Interactive Prototype Visualizer

Follow the Lookup Chain

Step through source code, current object, prototype, chain, memory, and console output.

Source Code

1const animal = {
2  eat() {
3    return "Eating";
4  }
5};
6 
7const dog = Object.create(animal);
8dog.name = "Tom";
9 
10console.log(dog.eat());

Current Object

animal.eat: Function()

Prototype

Object.prototype

Prototype Chain

animal

Object.prototype

null

Memory

animal -> { eat() }

Console

(empty)

Create animal

The animal object owns the shared eat method.

Prototype Chain Explorer

dog -> animal -> Object.prototype -> null

Animate each link in the chain and see where lookup travels.

Constructor + Class

Two Syntaxes, Same Prototype Engine

Constructor functions and ES6 classes both use prototypes for shared methods.

Constructor Function

1function Person(name) {
2  this.name = name;
3}
4 
5Person.prototype.sayHello = function() {
6  return "Hello";
7};
8 
9const user = new Person("Zubair");
10user.sayHello();

Constructor

Prototype

Object

Method Lookup

ES6 Class

1class Person {
2  constructor(name) {
3    this.name = name;
4  }
5 
6  sayHello() {
7    return "Hello";
8  }
9}
10 
11const user = new Person("Zubair");

Classes are syntactic sugar over prototypes. Methods still live on the class prototype.

prototype vs __proto__

Three Names That Get Mixed Up

Keep these roles separate and prototype questions become much easier.

prototype

Belongs to constructor functions and contains methods shared by objects created with new.

Constructor property

Used when creating objects

Contains shared methods

proto

Belongs to objects and points to the next object in the prototype chain.

Object link

Used during lookup

Points to prototype

constructor

A reference commonly available through the prototype back to the constructor function.

Reference to constructor

Useful for inspection

Not the lookup chain itself

Memory + Inheritance

Shared Memory, Linked Objects

Prototype methods are referenced through links instead of being copied into every object.

Objects

Prototype

Methods

References

Memory links

Shared memory

Animal

Dog

Golden Retriever

inherits methods upward through Dog and Animal

Built-in Prototype Chain

Arrays, Strings, and Functions Use Prototypes Too

Built-in methods like push(), toUpperCase(), and call() are found through the same prototype lookup process.

Array

1const numbers = [10, 20, 30];
2 
3numbers.push(40);

Where does push() come from?

It comes from Array.prototype. The array instance does not store a separate copy of push().

Array chain

numbers

|
v

Array.prototype

|
v

Object.prototype

|
v

null

String

1const name = "Zubair";
2 
3console.log(name.toUpperCase());

Where does toUpperCase() come from?

JavaScript temporarily wraps the primitive string and looks up toUpperCase() on String.prototype.

String chain

name

|
v

String.prototype

|
v

Object.prototype

|
v

null

Function

1function greet() {}
2 
3greet.call(null);

Where does call() come from?

Functions are objects too. call() is found through Function.prototype.

Function chain

greet

|
v

Function.prototype

|
v

Object.prototype

|
v

null

Every Object Eventually Ends Here

Universal ending

Object

|
v

Object.prototype

|
v

null

If JavaScript reaches null, it stops searching. At that point, a missing property returns undefined.

Interview Ready

Why the Prototype Chain Matters

This concept explains inheritance, shared methods, and many built-in JavaScript APIs.

It Enables

Code reuse

Inheritance through object links

Shared methods instead of duplicate methods on every object

Efficient memory usage

Built-in methods like map(), filter(), push(), toUpperCase(), and call()

30-second answer

The Prototype Chain is JavaScript's inheritance mechanism. Every object has an internal reference to another object called its prototype. When a property or method is accessed, JavaScript first looks for it on the object itself. If it is not found, JavaScript follows the prototype chain, checking each prototype until it either finds the property or reaches null. This allows objects to inherit shared properties and methods efficiently without duplicating them.

Code Playground

Prototype Examples You Can Step Through

Run, reset, copy, and step through prototype lookup examples with memory notes.

Object.create()

1const animal = {
2  eat() {
3    return "Eating";
4  }
5};
6 
7const dog = Object.create(animal);
8dog.eat();

Console

Click Run to see output.

Memory

dog -> animal

animal.eat shared

Object.create() creates a new object with the parent object as its prototype.

Real World Examples