JavaScript Notes

Prototype in JavaScript — Complete Guide with Examples 2026

Master JavaScript prototypes with deep explanations of prototype chain, __proto__, Object.getPrototypeOf, prototype property, constructor functions, memory diagrams, and interview Q&A.

What is a Prototype?

In JavaScript, every object has an internal link to another object called its prototype. This prototype object has its own prototype, forming a chain known as the prototype chain. When you access a property on an object, JavaScript first looks at the object itself, then follows the prototype chain until it finds the property or reaches null.

Prototypes are the mechanism by which JavaScript objects inherit features from one another. This is fundamentally different from classical inheritance in languages like Java or C++.

Why Prototypes Matter

JavaScript is a prototype-based language, not class-based
All inheritance in JavaScript is built on prototypes
Even ES6 classes are syntactic sugar over prototypes
Understanding prototypes is essential for understanding JavaScript objects

The Prototype Chain

Every object in JavaScript has a hidden [[Prototype]] internal property that points to its prototype object.

Example

PROTOTYPE CHAIN DIAGRAM: myObject | |--[[Prototype]]--> Object.prototype | |--[[Prototype]]--> null (end of chain) Array Example: myArray | |--[[Prototype]]--> Array.prototype (push, pop, map, filter...) | |--[[Prototype]]--> Object.prototype (toString, hasOwnProperty...) | |--[[Prototype]]--> null

Accessing the Prototype

javascript example

const obj = { name: "JavaScript" };

// Three ways to access prototype
console.log(Object.getPrototypeOf(obj)); // Recommended
console.log(obj.__proto__);              // Deprecated but common
console.log(obj.constructor.prototype);  // Via constructor

// All point to Object.prototype
console.log(Object.getPrototypeOf(obj) === Object.prototype); // true

Output

[Object: null prototype] {}
[Object: null prototype] {}
[Object: null prototype] {}
true

Prototype Property vs [[Prototype]]

These are two different things:

[[Prototype]] (accessed via __proto__ or Object.getPrototypeOf) - The internal prototype link every object has
.prototype property - A property that only functions have, used when creating instances with new

Example

function Person(name) { this.name = name; } // .prototype is a property of the function console.log(Person.prototype); // { constructor: Person } const alice = new Person("Alice"); // [[Prototype]] of alice points to Person.prototype console.log(Object.getPrototypeOf(alice) === Person.prototype); // true console.log(alice.__proto__ === Person.prototype); // true

Memory Diagram

Example

Person (function) | +-- .prototype ---> { constructor: Person } ^ | alice (instance) | | | +-- [[Prototype]] --------+ +-- name: "Alice"

Constructor Functions and Prototypes

javascript example

function Animal(name, sound) {
  // Instance properties
  this.name  = name;
  this.sound = sound;
}

// Prototype methods (shared across all instances)
Animal.prototype.speak = function() {
  console.log(`${this.name} says ${this.sound}`);
};

Animal.prototype.info = function() {
  console.log(`I am ${this.name}`);
};

const dog = new Animal("Dog", "Woof");
const cat = new Animal("Cat", "Meow");

dog.speak();
cat.speak();

// Methods are shared (same reference)
console.log(dog.speak === cat.speak); // true

Output

Dog says Woof
Cat says Meow
true

Why Prototype Methods?

Example

WITHOUT PROTOTYPE (wasteful): dog = { name: "Dog", speak: function(){...} } <- own copy cat = { name: "Cat", speak: function(){...} } <- own copy (Each instance has its own copy of the function in memory) WITH PROTOTYPE (efficient): dog = { name: "Dog" } --proto--> { speak: function(){...} } cat = { name: "Cat" } --proto--> { speak: function(){...} } (All instances share ONE copy of the function)

Property Lookup (Shadowing)

javascript example

function Vehicle(type) {
  this.type = type;
}

Vehicle.prototype.wheels   = 4;
Vehicle.prototype.describe = function() {
  return `${this.type} with ${this.wheels} wheels`;
};

const car  = new Vehicle("Car");
const bike = new Vehicle("Bike");
bike.wheels = 2; // Creates OWN property (shadows prototype)

console.log(car.wheels);      // 4 (from prototype)
console.log(bike.wheels);     // 2 (own property)
console.log(car.describe());  // "Car with 4 wheels"
console.log(bike.describe()); // "Bike with 2 wheels"

// Check property ownership
console.log(car.hasOwnProperty("wheels"));  // false
console.log(bike.hasOwnProperty("wheels")); // true
console.log(car.hasOwnProperty("type"));    // true

Output

4
2
Car with 4 wheels
Bike with 2 wheels
false
true
true

Property Lookup Algorithm

Example

Looking up obj.property: 1. Check obj's own properties -> if found, return value 2. Check obj.[[Prototype]]'s properties -> if found, return value 3. Check obj.[[Prototype]].[[Prototype]]'s properties -> ... 4. Continue until null is reached 5. Return undefined (property not found)

Object.create()

Create objects with a specific prototype.

javascript example

const personProto = {
  greet() {
    return `Hello, I am ${this.name}`;
  },
  getAge() {
    return this.age;
  }
};

const alice = Object.create(personProto);
alice.name  = "Alice";
alice.age   = 30;

const bob  = Object.create(personProto);
bob.name   = "Bob";
bob.age    = 25;

console.log(alice.greet());
console.log(bob.greet());
console.log(Object.getPrototypeOf(alice) === personProto); // true

Output

Hello, I am Alice
Hello, I am Bob
true

Object.create(null)

javascript example

// Object with NO prototype
const bareObj = Object.create(null);
bareObj.key = "value";

console.log(bareObj.key);           // "value"
// console.log(bareObj.toString()); // TypeError - no Object.prototype!
console.log("toString" in bareObj); // false

Built-in Prototypes

Example

// Array prototype chain const arr = [1, 2, 3]; console.log(Object.getPrototypeOf(arr) === Array.prototype); // true console.log(Object.getPrototypeOf(Array.prototype) === Object.prototype); // true // String prototype chain const str = "hello"; console.log(Object.getPrototypeOf(Object(str)) === String.prototype); // true // Function prototype chain function fn() {} console.log(Object.getPrototypeOf(fn) === Function.prototype); // true

Built-in Chain Diagram

Example

Modifying Prototypes

Adding Methods to Built-in Prototypes (NOT recommended)

Example

// Adding custom method to Array Array.prototype.first = function() { return this[0]; }; Array.prototype.last = function() { return this[this.length - 1]; }; const nums = [10, 20, 30, 40]; console.log(nums.first()); // 10 console.log(nums.last()); // 40 // WARNING: This affects ALL arrays globally! // This is called "monkey patching" and should be avoided

Safe Way: Using Symbols

Example

const first = Symbol("first"); const last = Symbol("last"); Array.prototype[first] = function() { return this[0]; }; Array.prototype[last] = function() { return this[this.length - 1]; }; const arr = [1, 2, 3]; console.log(arr[first]()); // 1 console.log(arr[last]()); // 3 // Won't conflict with other code

Prototype Methods Reference

javascript example

const parent = { role: "parent", greet() { return "Hello"; } };
const child  = Object.create(parent);
child.name   = "Child";

// Check prototype
console.log(Object.getPrototypeOf(child) === parent); // true

// Set prototype (avoid in performance-critical code)
const newProto = { role: "new parent" };
Object.setPrototypeOf(child, newProto);
console.log(child.role); // "new parent"

// Check if property exists on object itself
console.log(child.hasOwnProperty("name")); // true
console.log(child.hasOwnProperty("role")); // false

// Check if property exists anywhere in chain
console.log("name" in child); // true
console.log("role" in child); // true

// instanceof
function Dog() {}
const rex = new Dog();
console.log(rex instanceof Dog);    // true
console.log(rex instanceof Object); // true

Prototype Pollution (Security)

Example

// DANGEROUS: Modifying Object.prototype // Object.prototype.isAdmin = true; // NEVER DO THIS! // Every object would now have isAdmin = true // Safe patterns: const safeObj = Object.create(null); // No prototype const frozen = Object.freeze({ role: "user" }); // Immutable // Checking for own properties (defense against pollution) function safeGet(obj, key) { if (Object.prototype.hasOwnProperty.call(obj, key)) { return obj[key]; } return undefined; }

Performance Considerations

javascript example

// DON'T: Modify prototype after object creation
function Bad() {}
const obj1 = new Bad();
Bad.prototype.method = function() {}; // Deoptimizes!

// DO: Set up prototype before creating instances
function Good() {}
Good.prototype.method = function() {};
const obj2 = new Good(); // Optimized

// DON'T: Use Object.setPrototypeOf in hot paths
// It invalidates inline caches and deoptimizes

// DO: Use Object.create for prototype setup
const proto    = { shared: true };
const instance = Object.create(proto);

Common Traps 🪤

Trap	Problem	Fix
Reassigning `.prototype`	Breaks link for existing instances	Modify properties on existing prototype
Using `__proto__`	Deprecated, performance issues	Use `Object.getPrototypeOf()`
Modifying `Object.prototype`	Affects every object — prototype pollution	Never do it
Forgetting `hasOwnProperty`	`for...in` iterates inherited keys too	Always filter with `hasOwnProperty`
Checking with `in`	Finds inherited properties	Use `.hasOwnProperty` for own-only check

Interview Questions

Q1: What is the output?

javascript example

function Foo() {}
Foo.prototype.x = 1;

const a = new Foo();
console.log(a.x);

Foo.prototype = { x: 2 };
console.log(a.x);

const b = new Foo();
console.log(b.x);

Answer: 1, 1, 2. Reassigning .prototype doesn't affect existing instances (they still link to old prototype object).

Q2: What is the output?

javascript example

const obj = {};
console.log(obj.__proto__ === Object.prototype);
console.log(Object.prototype.__proto__);

Answer: true, null. Object.prototype is the end of the chain.

Q3: Explain prototype chain for arrays

Answer: [] -> Array.prototype -> Object.prototype -> null. Array methods like push/pop come from Array.prototype, toString/hasOwnProperty from Object.prototype.

Q4: Difference between `proto` and `.prototype`?

Answer: __proto__ is the actual prototype link on every object. .prototype is a property only on functions, used as the prototype for instances created with new.

Q5: What is the output?

javascript example

function A() {}
A.prototype.x = 10;
const a = new A();
A.prototype.x = 20;
console.log(a.x);

Answer: 20. Modifying a property on the existing prototype object is reflected in all instances (they share the reference).

Summary

Concept	Description
`[[Prototype]]`	Internal link to parent object
`.prototype`	Function property, used with `new`
Prototype chain	Linked list of prototypes ending at `null`
Property lookup	Own → prototype → prototype → ... → null
`Object.create()`	Create object with specific prototype
`hasOwnProperty`	Check if property is directly on object
Shadowing	Own property hides prototype property

Practice Exercises

Build a prototype chain with 3 levels
Implement a polyfill using prototype extension
Create objects using Object.create with methods
Demonstrate property shadowing and deletion
Build a simple class system using only prototypes

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for Prototype in JavaScript — Complete Guide with Examples 2026.

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, advanced, prototype, prototype in javascript — complete guide with examples 2026

Continue learning this concept

Advanced ConceptsClosures in JavaScript — Complete Guide with Examples 2026Master JavaScript closures with deep conceptual explanations, memory diagrams, practical examples, interview questions, and real-world use cases. IIFE, memoize, debounce, module pattern.Advanced ConceptsHoisting in JavaScript — Complete Guide with Examples 2026Master JavaScript hoisting with deep explanations of variable hoisting, function hoisting, temporal dead zone, execution context phases, and interview questions with outputs.Advanced ConceptsScope in JavaScript — Complete Guide with Examples 2026Deep dive into JavaScript scope: global scope, function scope, block scope, lexical scope, scope chain, TDZ, variable shadowing. With memory diagrams, examples, and interview Q&A.Advanced JavascriptJavaScript apply() Method - Complete Guide with ExamplesMaster JavaScript apply() method with syntax, this binding, array arguments, function borrowing, real-world use cases, common mistakes, and interview Q&A.Advanced JavascriptJavaScript bind() Method - Complete Guide with ExamplesMaster JavaScript bind() with permanent this binding, partial application, event handlers, currying patterns, common mistakes, and top interview Q&A.Advanced JavascriptJavaScript call() Method - Complete Guide with ExamplesMaster JavaScript call() method: this binding, syntax, constructor inheritance, function borrowing, strict mode differences, and top interview Q&A.

PreviousHoisting in JavaScript — Complete Guide with Examples 2026 NextScope in JavaScript — Complete Guide with Examples 2026

What is a Prototype?

Why Prototypes Matter

The Prototype Chain

Accessing the Prototype

Prototype Property vs [[Prototype]]

Memory Diagram

Constructor Functions and Prototypes

Why Prototype Methods?

Property Lookup (Shadowing)

Property Lookup Algorithm

Object.create()

Object.create(null)

Built-in Prototypes

Built-in Chain Diagram

Modifying Prototypes

Adding Methods to Built-in Prototypes (NOT recommended)

Safe Way: Using Symbols

Prototype Methods Reference

Prototype Pollution (Security)

Performance Considerations

Common Traps 🪤

Interview Questions

Q1: What is the output?

Q2: What is the output?

Q3: Explain prototype chain for arrays

Q4: Difference between __proto__ and .prototype?

Q5: What is the output?

Summary

Practice Exercises

Continue learning this concept

What is a Prototype?

Why Prototypes Matter

The Prototype Chain

Accessing the Prototype

Prototype Property vs [[Prototype]]

Memory Diagram

Constructor Functions and Prototypes

Why Prototype Methods?

Property Lookup (Shadowing)

Property Lookup Algorithm

Object.create()

Object.create(null)

Built-in Prototypes

Built-in Chain Diagram

Modifying Prototypes

Adding Methods to Built-in Prototypes (NOT recommended)

Safe Way: Using Symbols

Prototype Methods Reference

Prototype Pollution (Security)

Performance Considerations

Common Traps 🪤

Interview Questions

Q1: What is the output?

Q2: What is the output?

Q3: Explain prototype chain for arrays

Q4: Difference between __proto__ and .prototype?

Q5: What is the output?

Summary

Practice Exercises

Continue learning this concept

Q4: Difference between `proto` and `.prototype`?

Q4: Difference between `proto` and `.prototype`?