JavaScript Prototype & Prototypal Inheritance Interview Questions

Every object has a prototype

In JavaScript, almost every object has an internal slot called [[Prototype]] — a link to another object. Property lookup follows this chain automatically and silently.

const obj = { name: 'Alice' }

// obj's [[Prototype]] is Object.prototype
// You can access it via:
Object.getPrototypeOf(obj)  // Object.prototype — the right way
obj.__proto__               // Object.prototype — works but not recommended

// Object.prototype's [[Prototype]] is null — end of the chain
Object.getPrototypeOf(Object.prototype)  // null

// Property lookup in action:
console.log(obj.name)         // 'Alice' — found on obj directly
console.log(obj.toString())   // works — not on obj, found on Object.prototype
console.log(obj.missing)      // undefined — not found anywhere in the chain

The prototype chain — property lookup step by step

const animal = {
  breathes: true,
  describe() { return `I breathe: ${this.breathes}` }
}

const dog = {
  name: 'Rex',
  bark() { return 'Woof!' }
}

// Set dog's prototype to animal
Object.setPrototypeOf(dog, animal)

// Now the chain is: dog → animal → Object.prototype → null

dog.name       // 'Rex'     — found on dog
dog.bark()     // 'Woof!'   — found on dog
dog.breathes   // true      — NOT on dog, found on animal (prototype)
dog.describe() // 'I breathe: true' — found on animal, but THIS = dog
               // 'this' in prototype methods refers to the calling object, not the prototype

dog.missing    // undefined — not on dog, not on animal, not on Object.prototype
dog.hasOwnProperty('name')      // true  — 'name' is OWN property
dog.hasOwnProperty('breathes')  // false — 'breathes' is inherited

Constructor functions and prototype

Before ES6 classes, constructor functions were the standard way to create objects with shared methods. Understanding them reveals exactly what classes do under the hood.

// Constructor function — called with 'new'
function Person(name, age) {
  // 'this' is the newly created object
  this.name = name   // OWN property — stored on each instance
  this.age  = age    // OWN property — stored on each instance
  // Don't do this — creates a new function for each instance:
  // this.greet = function() { ... }
}

// Methods go on the PROTOTYPE — shared by all instances
Person.prototype.greet = function() {
  return `Hi, I'm ${this.name}, age ${this.age}`
}

Person.prototype.birthday = function() {
  this.age++
}

const alice = new Person('Alice', 30)
const bob   = new Person('Bob', 25)

alice.greet()  // "Hi, I'm Alice, age 30"
bob.greet()    // "Hi, I'm Bob, age 25"

// Both instances share ONE greet function on Person.prototype — not copies
alice.greet === bob.greet  // true — same function reference

// The prototype chain for alice:
// alice → Person.prototype → Object.prototype → null

What 'new' actually does — four steps

// When you call new Person('Alice', 30), JavaScript:
// 1. Creates a new empty object: {}
// 2. Sets its [[Prototype]] to Person.prototype
// 3. Calls Person with 'this' set to the new object
// 4. Returns the new object (unless Person explicitly returns a different object)

// Manual implementation of new:
function myNew(Constructor, ...args) {
  const instance = Object.create(Constructor.prototype)  // steps 1 & 2
  const result   = Constructor.apply(instance, args)     // step 3
  return typeof result === 'object' && result !== null   // step 4
    ? result
    : instance
}

const alice = myNew(Person, 'Alice', 30)
alice.greet()  // "Hi, I'm Alice, age 30" — works identically

Object.create() — prototypal inheritance directly

// Object.create(proto) creates a new object with proto as its [[Prototype]]
const animal = {
  type: 'Animal',
  describe() { return `I am a ${this.type} named ${this.name}` }
}

const dog = Object.create(animal)
dog.type = 'Dog'
dog.name = 'Rex'
dog.bark = function() { return 'Woof!' }

dog.describe()   // 'I am a Dog named Rex' — uses animal's method, dog's data
dog.bark()       // 'Woof!'

// Object.create(null) — object with NO prototype
const pure = Object.create(null)
pure.key = 'value'
pure.toString  // undefined — no Object.prototype in chain
// Safe as a dictionary — no inherited properties that could clash with data keys

ES6 Classes — syntax sugar over prototypes

Classes don't add a new object model. They're a cleaner syntax for the same constructor + prototype pattern.

// ES6 class
class Animal {
  constructor(name, sound) {
    this.name  = name   // own property on each instance
    this.sound = sound  // own property on each instance
  }

  speak() {                       // goes on Animal.prototype
    return `${this.name} says ${this.sound}`
  }

  static create(name, sound) {    // static — on Animal itself, not Animal.prototype
    return new Animal(name, sound)
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name, 'Woof')  // calls Animal's constructor
    this.tricks = []     // own property
  }

  learn(trick) {          // goes on Dog.prototype
    this.tricks.push(trick)
  }

  speak() {               // OVERRIDES Animal.prototype.speak on Dog.prototype
    return `${super.speak()} and knows ${this.tricks.length} tricks`
  }
}

const rex = new Dog('Rex')
rex.learn('sit')
rex.speak()  // 'Rex says Woof and knows 1 tricks'

// Prototype chain for rex:
// rex → Dog.prototype → Animal.prototype → Object.prototype → null

// Exactly equivalent to the pre-class version:
Object.getPrototypeOf(rex)              // Dog.prototype
Object.getPrototypeOf(Dog.prototype)    // Animal.prototype
Object.getPrototypeOf(Animal.prototype) // Object.prototype

hasOwnProperty vs 'in' operator

const parent = { inherited: true }
const child  = Object.create(parent)
child.own    = true

'own'       in child  // true  — checks entire chain
'inherited' in child  // true  — found on parent via chain
'missing'   in child  // false — not anywhere

child.hasOwnProperty('own')       // true  — directly on child
child.hasOwnProperty('inherited') // false — on parent, not child

// for...in iterates ALL enumerable properties including inherited ones
for (const key in child) {
  console.log(key)  // 'own', 'inherited'
}

// Object.keys — own enumerable only
Object.keys(child)  // ['own'] — ignores inherited

Prototype pollution — a real security concern

// Object.prototype is shared by ALL objects
// Modifying it affects every object in your program — and every library

// ❌ Never do this:
Object.prototype.isAdmin = true

const user = {}
user.isAdmin  // true — now every object has isAdmin!

// This is prototype pollution — a real attack vector in security exploits
// User-controlled input like { '__proto__': { 'isAdmin': true } }
// when merged with a target object can inject properties on Object.prototype

// Safe merge patterns:
function safeMerge(target, source) {
  for (const key of Object.keys(source)) {
    if (key !== '__proto__' && key !== 'constructor' && key !== 'prototype') {
      target[key] = source[key]
    }
  }
  return target
}

// Or use Object.assign on a null-prototype object for config parsing:
const config = Object.assign(Object.create(null), userInput)

Performance — prototype chain depth matters

// Property lookup traverses the chain on every access
// Deeply nested prototype chains are slower (though JS engines optimize heavily)

// Shallow is faster — keep inheritance chains short (3-4 levels max)
// Own properties are fastest — direct access, no chain traversal

// V8 optimization: hidden classes
// V8 creates a hidden class for each unique property layout
// Adding properties in a consistent order allows V8 to optimize property access
// Breaking the pattern (adding props in random order or deleting them) degrades performance

// ✓ Consistent property layout:
function Point(x, y) {
  this.x = x  // always added in this order
  this.y = y  // V8 can optimize
}

// ❌ Inconsistent layout:
const p1 = {}; p1.x = 1; p1.y = 2
const p2 = {}; p2.y = 1; p2.x = 2  // different order — different hidden class