Prototypes & Classes

JavaScript’s inheritance model is prototype-based: objects inherit directly from other objects through a chain of links, not through class blueprints copied at instantiation time. ES6 class syntax makes this look familiar to developers coming from Java or Python, but it does not change the underlying mechanism.

The Prototype Chain

Every object in JavaScript has an internal [[Prototype]] slot — accessible as __proto__ — that points to another object (or null). When you read a property on an object, the engine searches:

1. The object itself
2. Its prototype (__proto__)
3. The prototype’s prototype
4. … up the chain until null

graph LR
    dog["dog\n{ name: 'Rex' }"]
    Animal["Animal.prototype\n{ speak() }"]
    ObjProto["Object.prototype\n{ toString(), hasOwnProperty() ... }"]
    null["null"]

    dog -- "__proto__" --> Animal
    Animal -- "__proto__" --> ObjProto
    ObjProto -- "__proto__" --> null

const animal = {
  speak() {
    return `${this.name} makes a noise.`;
  },
};

const dog = Object.create(animal);
dog.name = "Rex";

dog.speak(); // "Rex makes a noise." — found on animal via prototype chain
dog.hasOwnProperty("name"); // true — found on dog itself
dog.hasOwnProperty("speak"); // false — speak is on the prototype

proto vs .prototype

These two properties confuse many learners because they are different things:

function Animal(name: string) {
  this.name = name;
}
Animal.prototype.speak = function () {
  return `${this.name} makes a noise.`;
};

const dog = new Animal("Rex");
dog.__proto__ === Animal.prototype; // true

ES6 Classes: Syntactic Sugar

ES6 classes provide a cleaner syntax for the same prototype-based inheritance:

class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  speak(): string {
    return `${this.name} makes a noise.`;
  }
}

class Dog extends Animal {
  breed: string;

  constructor(name: string, breed: string) {
    super(name); // must call super before using `this`
    this.breed = breed;
  }

  speak(): string {
    return `${this.name} barks.`; // overrides Animal.speak
  }

  describe(): string {
    return `${super.speak()} It is a ${this.breed}.`;
  }
}

const dog = new Dog("Rex", "Labrador");
dog.speak();    // "Rex barks."
dog.describe(); // "Rex makes a noise. It is a Labrador."

dog instanceof Dog;    // true
dog instanceof Animal; // true — the chain includes Animal.prototype

Under the hood, class Dog extends Animal sets Dog.prototype.__proto__ = Animal.prototype, which is exactly what you would wire up manually with the old constructor pattern.

instanceof

instanceof walks the prototype chain of the left operand looking for the .prototype of the right operand:

dog instanceof Dog;          // true
dog instanceof Animal;       // true
dog instanceof Object;       // true — all objects trace back to Object.prototype
[] instanceof Array;         // true
[] instanceof Object;        // true

Further Learning

Search these terms to go deeper:

• “You Don’t Know JS: this & Object Prototypes” — the most thorough treatment of prototype chains in JavaScript
• “MDN: Inheritance and the prototype chain” — detailed walkthrough with diagrams
• “JavaScript classes under the hood” — articles explaining what the class syntax compiles to
• “Object.create vs new in JavaScript” — understanding the two main ways to set up prototype chains
• “JavaScript private class fields” — the #field syntax for truly private instance data

Prototypes & Classes

A class is a blueprint for making objects. If you’re building a game, you might have a Dog blueprint, and stamp out many dog objects from it — each with its own name, but all sharing the same abilities like speak().

A simple class

class Animal {
  constructor(name) {
    this.name = name       // each animal gets its own name
  }
  speak() {
    return `${this.name} makes a noise.`
  }
}

const rex = new Animal('Rex')  // `new` stamps out a fresh object
rex.speak()                    // "Rex makes a noise."

constructor runs once when you create the object, and it’s where you set up its starting data.

Building on a class: extends

You can make a specialized version of a class. A Dog is an Animal, but with extras:

class Dog extends Animal {
  constructor(name, breed) {
    super(name)        // run Animal's setup first
    this.breed = breed
  }
  speak() {
    return `${this.name} barks.`  // replaces Animal's version
  }
}

const rex = new Dog('Rex', 'Labrador')
rex.speak()  // "Rex barks."

Checking a type with instanceof

instanceof asks “was this made from that blueprint?”:

rex instanceof Dog     // true
rex instanceof Animal  // true — a Dog is also an Animal

A peek under the hood

JavaScript actually links objects together in a chain (the “prototype chain”), and class is a friendlier way to write that. You don’t need the deep details yet — just know that when you call rex.speak(), JavaScript looks on the dog first, then on its Animal blueprint, and uses the first speak it finds.

In one sentence

A class is a blueprint: constructor sets up each new object, methods are shared abilities, extends + super() build specialized versions, and instanceof checks what blueprint an object came from.

Want to go deeper?

Switch to Expert mode above for the full prototype chain, __proto__ vs .prototype, and how classes are “syntactic sugar” over prototypes.