JavaScript Prototypes & the Prototype Chain (Interview-Ready)

Prototypes are one of the most important under-the-hood concepts in JavaScript.

If you can clearly explain the prototype chain, you’ll handle a lot of senior frontend interview questions easily.

30‑second interview answer

Every object has an internal link to another object called its prototype. When you access a property, JavaScript looks on the object first, then walks up the prototype chain until it finds the property or reaches null. The new keyword sets up this chain by creating an object whose prototype points to the constructor’s prototype.

Key points

• Property lookup walks the prototype chain.
• __proto__ is legacy; prefer Object.getPrototypeOf.
• function Foo(){} has Foo.prototype used for instances.
• new links instance → Foo.prototype.

1) The core idea

In JavaScript, objects can inherit properties from other objects.

That inheritance happens via an internal link commonly exposed as:

• obj.__proto__ (legacy)
• Object.getPrototypeOf(obj) (preferred)

When you access obj.someProp, JS looks:

1. on obj itself
2. then on its prototype
3. then on the prototype’s prototype …until it reaches null

That lookup path is the prototype chain.

2) Simple prototype chain example

const parent = { role: 'admin' };
const child = Object.create(parent);
child.name = 'Rajesh';
 
console.log(child.name); // Rajesh (own)
console.log(child.role); // admin (inherited)

Here:

• child does not have role
• JS finds role on parent via the prototype link

Check the link:

Object.getPrototypeOf(child) === parent; // true

3) __proto__ vs prototype (classic confusion)

__proto__

• exists on objects
• points to the object’s prototype

prototype

• exists on functions (that are used as constructors)
• it is the object that becomes the prototype of instances created with new

Example:

function Person(name) {
  this.name = name;
}
 
Person.prototype.sayHi = function () {
  return `Hi, I'm ${this.name}`;
};
 
const p = new Person('Rajesh');
 
console.log(p.sayHi()); // Hi, I'm Rajesh
 
// relationship:
Object.getPrototypeOf(p) === Person.prototype; // true

4) What new does (interview favorite)

function Person(name) {
  this.name = name;
}
 
const p = new Person('Rajesh');

Conceptually, new does:

1. create an empty object {}
2. set its prototype to Person.prototype
3. call Person with this bound to that object
4. return the object (unless the constructor explicitly returns an object)

5) Why prototypes matter (real-world)

A) Shared methods (memory efficient)

If you put methods on prototype, all instances share one function.

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

If you define this.getName = () => ... inside the constructor, each instance gets its own copy.

B) Class syntax is prototype-based too

class User {
  constructor(name) {
    this.name = name;
  }
  getName() {
    return this.name;
  }
}

This still uses prototypes under the hood.

6) Common interview questions

Q1) What’s the difference between Object.create() and new?

• Object.create(proto) directly sets the prototype of a new object.
• new also runs a constructor function and uses Constructor.prototype.

Q2) What happens when a property exists both on object and prototype?

• The object’s own property wins (“shadowing”).

const proto = { x: 1 };
const obj = Object.create(proto);
obj.x = 2;
console.log(obj.x); // 2

Q3) How do you check if a property is an “own” property?

obj.hasOwnProperty('x');
Object.prototype.hasOwnProperty.call(obj, 'x');

Q4) What is prototypal inheritance?

• Objects inherit from other objects via the prototype chain, not via class-based inheritance.

7) Prototype pitfalls

1. Mutating shared objects on prototype If you put a mutable object on a prototype, it’s shared across instances.

Bad:

function A() {}
A.prototype.items = [];
 
const a1 = new A();
const a2 = new A();
 
a1.items.push(1);
console.log(a2.items); // [1] (shared!)

Fix: initialize per instance in constructor.

2. Using __proto__ in modern code Prefer Object.getPrototypeOf / Object.setPrototypeOf.

Summary checklist

• I can explain lookup order to null.
• I can explain __proto__ vs prototype.
• I can describe what new does.
• I know the shared-mutable-prototype pitfall.

Summary

• Prototype chain powers property lookup and inheritance.
• __proto__ is object → prototype link (legacy name).
• Function.prototype is what instances created by new inherit from.
• class syntax is still prototype-based.