AceDevHub
Data & ObjectsFree

Prototypes and Classes

Understand JavaScript inheritance through the prototype chain and the class syntax that wraps it — how objects share methods and how extends works under the hood.

IntermediateFreeOOP

JavaScript was not built on classical inheritance like Java. Objects link to other objects through an internal prototype reference — when a property is missing on the object itself, the engine walks the chain until it finds a match or reaches null. ES6 class syntax looks familiar to Java developers, but it is syntactic sugar over prototypes, not a separate object model. Interviews love this distinction.

The prototype chain — how lookup works

Every object has an internal link to another object called its prototype (accessed via Object.getPrototypeOf, not deprecated __proto__ in new code). When you read obj.toString, JavaScript checks obj first, then its prototype, then that prototype's prototype, until null. That is why arrays have .map even though you never defined map on your literal — Array.prototype provides it.

prototype-lookup.js
Loading editor…
Outputconsole
false
function
true
true

Constructor functions — pre-class pattern

Before class syntax, developers used constructor functions with new. new creates a fresh object, links it to Constructor.prototype, runs the function body with this bound to that object, and returns the object (unless the function explicitly returns another object). Methods were placed on Constructor.prototype so all instances shared one function object — memory efficient.

constructor-fn.js
Loading editor…
Outputconsole
Hi, I'm Sangam
true

class syntax — readable sugar

class bundles constructor logic and methods in one block. Methods are still on the prototype — not copied per instance. class bodies are strict mode. Hoisting differs from function declarations: classes are in TDZ until their declaration line. You cannot call new User before the class statement in the same scope.

class-basic.js
Loading editor…
Outputconsole
Keyboard ($79)
USD

extends and super — inheritance

extends links the subclass prototype to the superclass prototype. super in a method calls the parent's version. super(...) in a constructor must run before using this in the subclass — the parent initializes the instance first. This mirrors classical OOP ergonomically while still using prototype linkage underneath.

extends.js
Loading editor…
Outputconsole
Max makes a sound — actually barks
true
true

Interviewers still ask prototype questions because classes desugar to them. Understanding [[Prototype]] lookup explains why methods on instances do not duplicate per object and why mutating Object.prototype is catastrophic. In modern app code you write class, but debugging legacy libraries requires prototype literacy.

instanceof and prototype chain

instanceof walks the prototype chain looking for Constructor.prototype on the object. Custom errors and domain exceptions rely on this for handler branching. Changing prototypes at runtime breaks instanceof — another reason to avoid mutating built-in prototypes in libraries.


  1. 1Property lookup walks the prototype chain until null
  2. 2class is sugar — methods still on prototype
  3. 3extends wires prototypes; super calls parent
  4. 4Static methods belong to the class, not instances
  5. 5Next lesson: ES modules — import and export