Skip to main content

JavaScript Prototypes - Complete Guide

Table of Contents​

  1. What is Prototype in JavaScript?
  2. __proto__ vs prototype
  3. The new Keyword - Internals Explained
  4. Prototype Chain - Lookup Mechanism
  5. Visual Prototype Chain
  6. Inheritance Using Constructor Functions
  7. Object.create() - Pure Prototypal Inheritance
  8. ES6 Classes - Syntactic Sugar
  9. Prototype vs Instance Members
  10. hasOwnProperty and in Operator
  11. Modifying Prototypes - Dangers
  12. __proto__ vs Object.getPrototypeOf()
  13. Built-in Prototype Chains
  14. Common Interview Traps
  15. Prototype Chain vs Scope Chain
  16. Object.create() vs new
  17. Performance of Prototype Lookup
  18. How instanceof Works Internally
  19. Prototype Pitfalls in Real Apps
  20. Advanced Interview Questions

What is Prototype in JavaScript?​

JavaScript uses prototypal inheritance, not classical inheritance like Java or C++.

Key Concept:​

Every object in JavaScript has a hidden internal property called [[Prototype]]. This property forms the prototype chain that enables inheritance.

Core Principle:​

Objects inherit properties and methods from other objects, not from classes.

Internal Property:​

const obj = {};
// obj has a hidden [[Prototype]] property
// You cannot directly access [[Prototype]]
// But you can access it via __proto__ or Object.getPrototypeOf()

__proto__ vs prototype​

This is the MOST IMPORTANT and MOST CONFUSING concept in JavaScript prototypes.

__proto__ (Dunder Proto)​

  • Property on: Every object instance
  • Points to: The object's [[Prototype]]
  • Used for: Property lookup in the prototype chain
  • Type: Accessor property (getter/setter)
const obj = {};
console.log(obj.__proto__); // Object.prototype

prototype​

  • Property on: Constructor functions only
  • Purpose: Blueprint for instances created with new
  • Used for: Defining shared methods and properties
  • Type: Regular object
function User() {}
User.prototype.sayHi = function() {
  console.log('Hi!');
};

const user = new User();

The Golden Rule (Memorize This):​

object.__proto__ === Constructor.prototype

Visual Comparison:​

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

User.prototype.greet = function() {
  console.log(`Hello, ${this.name}`);
};

const user1 = new User('Alice');

// The relationship:
user1.__proto__ === User.prototype // true

Relationship Diagram:​

Constructor Function (User)
    |
    | Has property
    ↓
User.prototype (object)
    ↑
    | Points to (__proto__)
    |
user1 (instance)

The new Keyword - Internals Explained​

Understanding what happens when you use new is crucial for understanding prototypes.

Example:​

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

const u = new User('Pawan');

What new Does Internally (4 Steps):​

  1. Creates an empty object: const obj = {}
  2. Sets prototype link: obj.__proto__ = User.prototype
  3. Executes constructor: User.call(obj, 'Pawan') (binds this to obj)
  4. Returns the object: Returns obj (unless constructor explicitly returns an object)

Manual Implementation of new:​

function myNew(Constructor, ...args) {
  // Step 1: Create empty object
  const obj = {};

  // Step 2: Set prototype link
  obj.__proto__ = Constructor.prototype;
  // Or: Object.setPrototypeOf(obj, Constructor.prototype);

  // Step 3: Execute constructor with obj as 'this'
  const result = Constructor.apply(obj, args);

  // Step 4: Return object (or constructor's return value if it's an object)
  return typeof result === 'object' && result !== null ? result : obj;
}

// Usage:
function User(name) {
  this.name = name;
}

const user = myNew(User, 'Alice');
console.log(user.name); // 'Alice'

Important Edge Case:​

function User() {
  this.name = 'Alice';
  return { custom: 'object' }; // Explicit object return
}

const u = new User();
console.log(u); // { custom: 'object' }
// The 'this.name' is ignored because constructor returns an object

Prototype Chain - Lookup Mechanism​

When you access a property on an object, JavaScript follows a specific lookup order.

Example:​

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

User.prototype.sayHi = function() {
  console.log(`Hi, ${this.name}`);
};

const u = new User('Pawan');
u.sayHi(); // Where does JS find sayHi()?

Lookup Order:​

1. u (own properties) ❌ not found
   ↓
2. u.__proto__ (User.prototype) ✅ found sayHi

Full Chain Example:​

u.toString(); // Where is toString()?

Lookup order:

1. u (own properties) ❌ not found
   ↓
2. u.__proto__ (User.prototype) ❌ not found
   ↓
3. User.prototype.__proto__ (Object.prototype) ✅ found toString

When Property is Not Found:​

u.nonExistent; // undefined

// Chain:
u → u.__proto__ → Object.prototype → null
// Reaches null, returns undefined

Key Rules:​

  • Search stops at first match
  • Search ends at null
  • Returns undefined if not found

Visual Prototype Chain​

Understanding the visual structure helps tremendously in interviews.

Basic Chain:​

u (instance)
 |
 └── __proto__ → User.prototype
                  |
                  └── __proto__ → Object.prototype
                                   |
                                   └── __proto__ → null

Detailed Example:​

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

Animal.prototype.eat = function() {
  console.log(`${this.name} is eating`);
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log('Woof!');
};

const dog = new Dog('Buddy', 'Golden Retriever');

Chain Visualization:​

dog
 |
 └── __proto__ → Dog.prototype
                  |
                  ├── bark() ✅
                  ├── constructor: Dog
                  |
                  └── __proto__ → Animal.prototype
                                   |
                                   ├── eat() ✅
                                   |
                                   └── __proto__ → Object.prototype
                                                    |
                                                    ├── toString() ✅
                                                    ├── hasOwnProperty() ✅
                                                    |
                                                    └── __proto__ → null

Inheritance Using Constructor Functions​

This is the pre-ES6 way of implementing inheritance.

Complete Example:​

// Parent Constructor
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound`);
};

// Child Constructor
function Dog(name, breed) {
  // Call parent constructor to inherit instance properties
  Animal.call(this, name);
  this.breed = breed;
}

// Set up prototype chain
Dog.prototype = Object.create(Animal.prototype);

// Fix constructor reference
Dog.prototype.constructor = Dog;

// Add child-specific methods
Dog.prototype.bark = function() {
  console.log(`${this.name} barks`);
};

// Usage
const dog = new Dog('Tommy', 'Labrador');
dog.speak(); // 'Tommy makes a sound' (inherited)
dog.bark();  // 'Tommy barks' (own method)

Why Object.create()?​

// ❌ WRONG - Calls parent constructor
Dog.prototype = new Animal();

// ✅ CORRECT - Creates clean prototype link without calling constructor
Dog.prototype = Object.create(Animal.prototype);

Advantages of Object.create():

  • Creates a clean prototype link
  • Avoids calling the parent constructor
  • No unwanted instance properties on prototype

Why Fix constructor?​

Dog.prototype = Object.create(Animal.prototype);
console.log(Dog.prototype.constructor); // Animal ❌

Dog.prototype.constructor = Dog;
console.log(Dog.prototype.constructor); // Dog ✅

Importance:

  • Maintains proper constructor reference
  • Helps with debugging
  • Required for some reflection operations

Object.create() - Pure Prototypal Inheritance​

Object.create() enables pure prototypal inheritance without constructor functions.

Syntax:​

Object.create(proto, [propertiesObject])

Basic Example:​

const parent = {
  greet() {
    console.log('Hello from parent');
  }
};

const child = Object.create(parent);
child.greet(); // 'Hello from parent'

console.log(child.__proto__ === parent); // true

Creating Objects with Properties:​

const parent = {
  greet() {
    return `Hello, ${this.name}`;
  }
};

const child = Object.create(parent, {
  name: {
    value: 'Alice',
    writable: true,
    enumerable: true,
    configurable: true
  }
});

console.log(child.greet()); // 'Hello, Alice'

Creating Object with No Prototype:​

const obj = Object.create(null);
console.log(obj.__proto__); // undefined
console.log(obj.toString); // undefined
// Useful for creating pure dictionaries/maps

ES6 Classes - Syntactic Sugar​

ES6 classes are just syntactic sugar over the prototype system.

Class Syntax:​

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Calls parent constructor
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name} barks`);
  }
}

const dog = new Dog('Max', 'Husky');
dog.speak(); // 'Max makes a sound'
dog.bark();  // 'Max barks'

What Happens Internally:​

// Under the hood, this is still:
Dog.prototype.__proto__ === Animal.prototype // true
dog.__proto__ === Dog.prototype // true

Class vs Constructor Function:​

FeatureClassConstructor Function
SyntaxCleanerMore verbose
HoistingNot hoistedHoisted
Strict modeAlways strictOptional
new requiredYes, throws errorNo, but recommended
PrototypeSame mechanismSame mechanism

Important: Classes are NOT Real Classes​

typeof Animal // 'function' ❗
Animal.prototype.constructor === Animal // true

JavaScript still uses prototypes under the hood!

Prototype vs Instance Members​

Understanding where to place properties is crucial for memory efficiency.

Instance Properties:​

function User(name) {
  this.name = name; // Instance property (unique per object)
  this.greet = function() { // Instance method (duplicated!)
    console.log(`Hi, ${this.name}`);
  };
}

const u1 = new User('Alice');
const u2 = new User('Bob');

console.log(u1.greet === u2.greet); // false ❌ Different functions!

Prototype Properties:​

function User(name) {
  this.name = name; // Instance property (unique per object)
}

User.prototype.greet = function() { // Shared method ✅
  console.log(`Hi, ${this.name}`);
};

const u1 = new User('Alice');
const u2 = new User('Bob');

console.log(u1.greet === u2.greet); // true ✅ Same function!

Memory Comparison:​

// ❌ BAD - 1000 function copies in memory
for (let i = 0; i < 1000; i++) {
  const user = new User('User' + i);
  // Each has its own greet function
}

// ✅ GOOD - 1 shared function in memory
User.prototype.greet = function() { /*...*/ };
for (let i = 0; i < 1000; i++) {
  const user = new User('User' + i);
  // All share the same greet function
}

Best Practice:​

Instance properties → Constructor
Shared methods → Prototype

hasOwnProperty and in Operator​

These methods help distinguish between own and inherited properties.

hasOwnProperty():​

Checks if property exists directly on the object (not in prototype chain).

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

User.prototype.greet = function() {};

const user = new User('Alice');

console.log(user.hasOwnProperty('name'));  // true ✅
console.log(user.hasOwnProperty('greet')); // false ❌ (in prototype)
console.log(user.hasOwnProperty('toString')); // false ❌

in Operator:​

Checks if property exists anywhere in the prototype chain.

console.log('name' in user);     // true ✅
console.log('greet' in user);    // true ✅ (in prototype)
console.log('toString' in user); // true ✅ (in Object.prototype)
console.log('fake' in user);     // false ❌

Comparison Table:​

MethodOwn PropertiesInherited Properties
hasOwnProperty()✅ Yes❌ No
in operator✅ Yes✅ Yes

Iterating Own Properties:​

const user = new User('Alice');

// Only own enumerable properties
for (let key in user) {
  if (user.hasOwnProperty(key)) {
    console.log(key, user[key]);
  }
}

// Modern approach
Object.keys(user); // ['name'] - only own enumerable
Object.getOwnPropertyNames(user); // ['name'] - all own properties

Modifying Prototypes - Dangers​

Modifying prototypes affects all existing and future instances.

Example:​

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

const u1 = new User('Alice');
const u2 = new User('Bob');

// Modify prototype AFTER instances created
User.prototype.age = 30;

console.log(u1.age); // 30 ⚠️ Both affected!
console.log(u2.age); // 30 ⚠️

Dangers:​

// ❌ DANGEROUS - Modifying built-in prototypes
Array.prototype.first = function() {
  return this[0];
};

[1, 2, 3].first(); // 1

// Problems:
// 1. Affects ALL arrays globally
// 2. Can break third-party libraries
// 3. Future JS versions might add same method
// 4. Pollutes for...in loops

Safe Approach:​

// ✅ GOOD - Use utility functions instead
function first(arr) {
  return arr[0];
}

first([1, 2, 3]); // 1

When Prototype Modification is OK:​

// Polyfills for older browsers
if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement) {
    return this.indexOf(searchElement) !== -1;
  };
}

__proto__ vs Object.getPrototypeOf()​

While __proto__ works, it's not the recommended way to access prototypes.

__proto__ (Deprecated Pattern):​

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

// Setting prototype
const parent = { x: 10 };
const child = {};
child.__proto__ = parent;

Issues:

  • Not part of ES6 standard (added for compatibility)
  • Performance issues
  • Deprecated in favor of modern methods
// Get prototype
const proto = Object.getPrototypeOf(obj);

// Set prototype
const parent = { x: 10 };
const child = {};
Object.setPrototypeOf(child, parent);

// Or better: use Object.create()
const child = Object.create(parent);

Performance Note:​

// ❌ BAD - Changing prototype after creation is SLOW
const obj = {};
Object.setPrototypeOf(obj, parent);

// ✅ GOOD - Set prototype during creation
const obj = Object.create(parent);

Comparison Table:​

MethodStatusUse Case
__proto__DeprecatedAvoid in production
Object.getPrototypeOf()✅ RecommendedReading prototype
Object.setPrototypeOf()⚠️ Use carefullyChanging prototype (slow)
Object.create()✅ RecommendedCreating with prototype

Built-in Prototype Chains​

Understanding built-in prototype chains helps with debugging and advanced usage.

Array Prototype Chain:​

const arr = [1, 2, 3];

arr
 └── __proto__ → Array.prototype
                  |
                  ├── map() ✅
                  ├── filter() ✅
                  ├── push() ✅
                  |
                  └── __proto__ → Object.prototype
                                   |
                                   ├── toString() ✅
                                   └── __proto__ → null
console.log(arr.__proto__ === Array.prototype); // true
console.log(Array.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null

Function Prototype Chain:​

function myFunc() {}

myFunc
 └── __proto__ → Function.prototype
                  |
                  ├── call() ✅
                  ├── apply() ✅
                  ├── bind() ✅
                  |
                  └── __proto__ → Object.prototype
                                   |
                                   └── __proto__ → null

String Prototype Chain:​

const str = "hello";

str (primitive)
 |
 └── Wrapped temporarily as String object
      |
      └── __proto__ → String.prototype
                       |
                       ├── toUpperCase() ✅
                       ├── slice() ✅
                       |
                       └── __proto__ → Object.prototype

All Built-in Objects Eventually Lead to Object.prototype:​

Any Object → SpecificType.prototype → Object.prototype → null

Common Interview Traps​

Trap 1: Arrow Functions and Prototype​

const User = (name) => {
  this.name = name;
};

User.prototype.greet = function() {}; // undefined!

const u = new User('Alice'); // ❌ TypeError: User is not a constructor

Why?

  • Arrow functions don't have prototype property
  • Arrow functions cannot be used with new
  • Arrow functions don't have their own this

Trap 2: Changing Prototype After Object Creation​

function User() {}
const u1 = new User();

// Change prototype
User.prototype = { newMethod() {} };

const u2 = new User();

console.log(u1.newMethod); // undefined ❌ (points to old prototype)
console.log(u2.newMethod); // function ✅ (points to new prototype)

Lesson: Existing instances maintain reference to old prototype.

Trap 3: Why Methods Go on Prototype?​

// ❌ BAD - Creates function for each instance
function User(name) {
  this.greet = function() {
    console.log(name);
  };
}

// 1000 instances = 1000 function copies ❌

// ✅ GOOD - Shared method
User.prototype.greet = function() {
  console.log(this.name);
};

// 1000 instances = 1 function ✅

Benefits:

  • Memory efficiency - shared across all instances
  • Faster object creation - less work per instance
  • Easier updates - modify once, affects all instances

Trap 4: Forgetting constructor Fix​

function Parent() {}
function Child() {}

Child.prototype = Object.create(Parent.prototype);
// Forgot: Child.prototype.constructor = Child;

const c = new Child();
console.log(c.constructor); // Parent ❌ Wrong!
console.log(c.constructor === Child); // false ❌

Trap 5: Prototype Property Shadowing​

User.prototype.role = 'user';

const u1 = new User();
console.log(u1.role); // 'user' (from prototype)

u1.role = 'admin'; // Creates OWN property
console.log(u1.role); // 'admin' (own property shadows prototype)

delete u1.role;
console.log(u1.role); // 'user' (back to prototype)

Prototype Chain vs Scope Chain​

These are completely different concepts that students often confuse.

AspectPrototype ChainScope Chain
PurposeProperty/method lookupVariable lookup
CreatedRuntime (object creation)Definition time (lexical)
Basis__proto__ linksNested functions
Lookupthis-basedLexical scope
Related toObjects and inheritanceFunctions and closures
Ends atnullGlobal scope

Example Comparison:​

const parent = {
  x: 10,
  getX() {
    return this.x;
  }
};

const child = Object.create(parent);
child.x = 20;

function outer() {
  const x = 30;

  function inner() {
    console.log(x); // 30 (scope chain)
    console.log(child.getX()); // 20 (prototype chain + this)
  }

  inner();
}

outer();

Explanation:

  • x in inner() → scope chain lookup → finds 30 in outer()
  • child.getX() → prototype chain lookup → finds method in parent
  • this.x inside getX() → this refers to child, so returns 20

Object.create() vs new​

Both create objects but work differently.

Using new:​

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

User.prototype.greet = function() {
  console.log(`Hi, ${this.name}`);
};

const user = new User('Alice');

What happens:

  1. Creates object
  2. Links to User.prototype
  3. Runs constructor with passed arguments
  4. Returns object

Using Object.create():​

const userPrototype = {
  greet() {
    console.log(`Hi, ${this.name}`);
  }
};

const user = Object.create(userPrototype);
user.name = 'Alice'; // Manual assignment

What happens:

  1. Creates object
  2. Links to specified prototype
  3. Does NOT run any constructor
  4. Returns object

Comparison Table:​

Featurenew Constructor()Object.create(proto)
Runs constructor✅ Yes❌ No
Sets prototype✅ Yes (Constructor.prototype)✅ Yes (specified proto)
Passes arguments✅ Yes❌ No
Use caseConstructor patternPure prototypal inheritance
InitializationAutomaticManual

When to Use Each:​

Use new:

  • When you have a constructor function
  • When you need initialization logic
  • When following constructor pattern

Use Object.create():

  • When you want pure prototypal inheritance
  • When setting up inheritance chains
  • When you need an object with specific prototype

Combining Both:​

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

Animal.prototype.speak = function() {};

function Dog(name) {
  Animal.call(this, name); // Borrow constructor
}

Dog.prototype = Object.create(Animal.prototype); // Set prototype
Dog.prototype.constructor = Dog;

const dog = new Dog('Max'); // Use new for final object

Performance of Prototype Lookup​

Prototype lookup has performance implications in real applications.

Lookup Cost:​

const obj = {
  a: 1
};

// Fast - own property (1 lookup)
console.log(obj.a);

// Slower - prototype property (2 lookups)
console.log(obj.toString);

// Even slower - deep in chain (3+ lookups)
obj.__proto__.__proto__.hasOwnProperty;

Lookup Speed:​

Own property:     FAST ⚡ (1 lookup)
Prototype:        MEDIUM 🐢 (2 lookups)
Deep prototype:   SLOW 🐌 (3+ lookups)

Performance Best Practices:​

1. Cache Prototype Properties:​

// ❌ SLOW - Repeated prototype lookups
for (let i = 0; i < 1000000; i++) {
  obj.toString(); // Looks up prototype each time
}

// ✅ FAST - Cache the method
const toString = obj.toString;
for (let i = 0; i < 1000000; i++) {
  toString.call(obj);
}

2. Avoid Deep Prototype Chains:​

// ❌ BAD - 5 levels deep
A → B → C → D → E → Object.prototype → null

// ✅ GOOD - 2 levels deep
Child → Parent → Object.prototype → null

3. Use Own Properties for Frequently Accessed Data:​

// ❌ SLOW - Method accessed millions of times
Class.prototype.criticalMethod = function() {};

// ✅ FAST - Copy to instance if called frequently
this.criticalMethod = Class.prototype.criticalMethod;

Modern Engines Optimize:​

Modern JavaScript engines (V8, SpiderMonkey) use:

  • Inline caching - remembers lookup results
  • Hidden classes - optimizes property access
  • JIT compilation - compiles hot paths

But deep chains still have overhead!

How instanceof Works Internally​

Understanding instanceof helps debug inheritance issues.

Syntax:​

object instanceof Constructor

What It Checks:​

Does Constructor.prototype exist anywhere in object's prototype chain?

Manual Implementation:​

function myInstanceof(obj, Constructor) {
  // Get the prototype of the object
  let proto = Object.getPrototypeOf(obj);

  // Get the prototype property of the constructor
  const prototype = Constructor.prototype;

  // Walk up the prototype chain
  while (proto !== null) {
    if (proto === prototype) {
      return true;
    }
    proto = Object.getPrototypeOf(proto);
  }

  return false;
}

Examples:​

function Animal() {}
function Dog() {}

Dog.prototype = Object.create(Animal.prototype);

const dog = new Dog();

console.log(dog instanceof Dog);     // true ✅
console.log(dog instanceof Animal);  // true ✅
console.log(dog instanceof Object);  // true ✅
console.log(dog instanceof Array);   // false ❌

How It Works:​

dog instanceof Dog:
  dog.__proto__ === Dog.prototype? YES ✅

dog instanceof Animal:
  dog.__proto__ === Animal.prototype? NO
  dog.__proto__.__proto__ === Animal.prototype? YES ✅

dog instanceof Object:
  dog.__proto__ === Object.prototype? NO
  dog.__proto__.__proto__ === Object.prototype? NO
  dog.__proto__.__proto__.__proto__ === Object.prototype? YES ✅

Gotcha - Changing Prototype:​

function User() {}
const user = new User();

console.log(user instanceof User); // true ✅

// Change prototype
User.prototype = {};

console.log(user instanceof User); // false ❌ (different prototype now!)

Cross-Frame Issues:​

// iframe has its own Array constructor
const iframe = document.createElement('iframe');
document.body.appendChild(iframe);
const iframeArray = iframe.contentWindow.Array;

const arr = new iframeArray();
console.log(arr instanceof Array); // false ❌ (different Array)
console.log(Array.isArray(arr));   // true ✅ (reliable check)

Lesson: Use Array.isArray() for arrays, not instanceof.

Prototype Pitfalls in Real Apps​

Real-world problems you'll encounter with prototypes.

Pitfall 1: Shared Mutable State​

function User() {}

User.prototype.friends = []; // ❌ Shared array!

const u1 = new User();
const u2 = new User();

u1.friends.push('Alice');

console.log(u2.friends); // ['Alice'] ⚠️ Affected!

Solution:

function User() {
  this.friends = []; // ✅ Instance property
}

Pitfall 2: Modifying Built-in Prototypes in Libraries​

// Library A
Array.prototype.remove = function(item) {
  const index = this.indexOf(item);
  if (index > -1) this.splice(index, 1);
};

// Library B (conflicts!)
Array.prototype.remove = function(index) {
  this.splice(index, 1);
};

// Your code - which remove() runs? 😱

Solution: Never modify built-in prototypes in libraries.

Pitfall 3: Memory Leaks with Closures​

function User(name) {
  const data = new Array(1000000); // Large data

  this.getName = function() {
    return name; // Closure keeps entire 'data' in memory! ❌
  };
}

// ✅ Better - no closure, no leak
function User(name) {
  this.name = name;
}

User.prototype.getName = function() {
  return this.name;
};

Pitfall 4: Incorrect Inheritance Setup​

// ❌ WRONG - Calls parent constructor during setup
function Child() {}
Child.prototype = new Parent();

// ✅ CORRECT
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

Pitfall 5: Forgetting this Context​

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

User.prototype.greet = function() {
  console.log(this.name);
};

const user = new User('Alice');
const greet = user.greet;

greet(); // undefined ❌ (lost 'this' context)

// ✅ Solutions:
greet.call(user);           // Use call/apply
user.greet.bind(user)();    // Bind this
() => user.greet();         // Arrow function wrapper

Advanced Interview Questions​

Question 1: Explain the output​

function User() {}
User.prototype.name = 'Alice';

const u1 = new User();
const u2 = new User();

u1.name = 'Bob';

console.log(u1.name);
console.log(u2.name);
console.log(User.prototype.name);

delete u1.name;

console.log(u1.name);
Click for answer

Output:

Bob
Alice
Alice
Alice

Explanation:

  1. u1.name = 'Bob' creates an own property on u1 (shadows prototype)
  2. u2.name still reads from prototype → 'Alice'
  3. User.prototype.name unchanged → 'Alice'
  4. After delete u1.name, own property removed, falls back to prototype → 'Alice'

Question 2: What's wrong with this code?​

function Animal() {}
Animal.prototype = {
  speak: function() {
    console.log('sound');
  }
};

function Dog() {}
Dog.prototype = Animal.prototype;

Dog.prototype.bark = function() {
  console.log('woof');
};

const animal = new Animal();
animal.bark(); // What happens?
Click for answer

Output: 'woof'

Problem: Dog.prototype = Animal.prototype creates a reference, not a copy!

Why it's bad:

Dog.prototype === Animal.prototype // true ❌

// When you add bark to Dog.prototype,
// you're also adding it to Animal.prototype!

Fix:

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Question 3: Multiple Inheritance Simulation​

// Can we inherit from multiple prototypes?
function CanEat() {}
CanEat.prototype.eat = function() { console.log('eating'); };

function CanWalk() {}
CanWalk.prototype.walk = function() { console.log('walking'); };

function Animal() {}

// How to make Animal inherit from both?
Click for answer

JavaScript doesn't support multiple inheritance directly, but we can simulate it:

// Solution 1: Mixins
Object.assign(Animal.prototype, CanEat.prototype, CanWalk.prototype);

const animal = new Animal();
animal.eat();  // 'eating'
animal.walk(); // 'walking'

// Solution 2: Manual copying
function mixin(target, ...sources) {
  sources.forEach(source => {
    Object.getOwnPropertyNames(source.prototype).forEach(name => {
      if (name !== 'constructor') {
        target.prototype[name] = source.prototype[name];
      }
    });
  });
}

mixin(Animal, CanEat, CanWalk);

Note: These are shallow copies, not true inheritance chains.

Question 4: Explain new Behavior​

function User(name) {
  this.name = name;

  return { custom: 'object' };
}

const u1 = new User('Alice');
console.log(u1.name);
console.log(u1.custom);

function Admin(name) {
  this.name = name;

  return 42; // primitive
}

const a1 = new Admin('Bob');
console.log(a1.name);
Click for answer

Output:

undefined
object
Bob

Explanation:

  1. If constructor returns an object, that object is returned (ignoring this)
  2. If constructor returns a primitive or nothing, the newly created object is returned
// User case:
// return { custom: 'object' }; → returns this object
// u1 = { custom: 'object' }
// u1.name is undefined

// Admin case:
// return 42; → primitive, ignored
// a1 = { name: 'Bob' } (the object created by new)

Question 5: Prototype Chain Length​

function A() {}
function B() {}
function C() {}

B.prototype = Object.create(A.prototype);
C.prototype = Object.create(B.prototype);

const c = new C();

// How many steps to reach null?
// c → ? → ? → ? → null
Click for answer

Answer: 4 steps

c
 → C.prototype
   → B.prototype
     → A.prototype
       → Object.prototype
         → null

Code to verify:

let proto = c;
let count = 0;

while ((proto = Object.getPrototypeOf(proto)) !== null) {
  count++;
  console.log(`Step ${count}:`, proto.constructor?.name || 'Object');
}

console.log(`Total steps: ${count}`); // 4

Killer Interview One-Liners​

Core Concept:​

"JavaScript objects inherit from other objects via prototype chains, where __proto__ links instances to constructor prototypes, and new wires this chain during object creation."

__proto__ vs prototype:​

"__proto__ is the actual link used for lookup on instances, while prototype is the blueprint property on constructors that __proto__ points to."

Inheritance:​

"Prototypal inheritance creates a chain where property lookup cascades through __proto__ links until the property is found or null is reached."

Memory Efficiency:​

"Prototype methods are shared across all instances for memory efficiency, while instance properties are unique per object."

Key Takeaways​

  1. ✅ Every object has __proto__ (link), only constructor functions have prototype (blueprint)
  2. ✅ object.__proto__ === Constructor.prototype is the fundamental relationship
  3. ✅ new creates objects, links prototypes, runs constructors, and returns the result
  4. ✅ Prototype chain enables inheritance through __proto__ links until null
  5. ✅ Methods on prototype are shared (memory efficient), properties on this are unique
  6. ✅ Object.create() creates pure prototypal inheritance without constructors
  7. ✅ ES6 classes are syntactic sugar over the prototype system
  8. ✅ Never modify built-in prototypes in production code
  9. ✅ Use Object.getPrototypeOf() instead of __proto__ in modern code
  10. ✅ Deep prototype chains have performance costs

Visual Summary​

Complete Prototype System:​

Constructor Function
    |
    | has property 'prototype'
    ↓
Constructor.prototype (object)
    |
    | contains shared methods
    |
    ↑ __proto__ points to
    |
Instance (created with 'new')
    |
    | has own properties
    |
    | can access prototype methods via chain
    |
    └→ lookup: own props → prototype → Object.prototype → null

The Triangle Relationship:​

        Constructor
            |
    has  ___↓___ references
        /        \
   prototype   instance
        \        /
         \__↗__/
          __proto__

Understanding prototypes is fundamental to mastering JavaScript inheritance, performance optimization, and advanced patterns!