How Do Classes Relate to Prototypes?

A class is a constructor function with a prototype object attached, plus some syntax that makes it stricter and clearer. When you write a class, the engine creates a function for the constructor and puts the methods on its prototype property, exactly the way you would do by hand.

class Greeter {
  constructor(name) { this.name = name; }
  greet() { return `Hi ${this.name}`; }
}

const greeter = new Greeter("Ada");
console.log(greeter.greet());   // "Hi Ada"

// The class is a constructor function and its methods live on the prototype.
console.log(typeof Greeter);                       // "function"
console.log(Greeter.prototype.greet instanceof Function);   // true
console.log(Object.getPrototypeOf(greeter) === Greeter.prototype);   // true

So an instance still works the way it always has. It has no copy of the methods. It has a link to the class prototype, and reading greet walks that link. The instance check works the same way too, because instanceof compares the prototype chain against the constructor's prototype.

The class syntax adds three things on top of the raw mechanism. The body is always strict mode, so the sloppy-mode surprises with this and with accidental globals are gone. The methods are non-enumerable, which means they do not show up when you iterate the prototype with for...in or with the keys method. And calling a class without the new keyword throws a TypeError instead of running the body with an unexpected this.

They do almost the same thing, but the class syntax closes off several footguns and adds a couple of features.

The main differences are all about safety. The body of a class is always strict, so an accidental global assignment throws instead of quietly creating a property on the global object. Calling a class without the new keyword throws a TypeError, so you never get a constructor running with a surprising this. And the methods are non-enumerable, so a for...in loop over an instance does not pick them up, which is what you want when you are copying objects around.

The features are private fields and private methods, marked with a hash, which are genuinely private rather than merely undocumented. There are also static members, which live on the constructor rather than the prototype, and the ability to use field initialisers and to define getters and setters with the same syntax as object literals.

What the class syntax does not change is the underlying model. Instances still link to a prototype, methods are still shared, and there is still exactly one prototype chain. There is no private copying of methods per instance, so a class with many methods is not more memory hungry than the equivalent constructor function.

For an interview, the useful summary is that the class syntax is a stricter, clearer way to write the same prototype mechanism, and that once you understand constructors and prototypes you already understand classes.

You can inspect the pieces a class creates, and they are exactly the pieces you would have built by hand.

class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}

// A class is a constructor function.
console.log(typeof Animal);   // "function"

// Its methods live on the prototype, and they are not enumerable.
console.log(Object.getOwnPropertyNames(Animal.prototype));
// ["constructor", "speak"]
console.log(Object.keys(Animal.prototype));   // []

const rex = new Animal("Rex");
console.log(rex.hasOwnProperty("name"));   // true - set in the constructor
console.log(rex.hasOwnProperty("speak"));  // false - it is on the prototype
console.log(Object.getPrototypeOf(rex) === Animal.prototype);   // true

// A class cannot be called without new.
try {
  Animal("Rex");
} catch (err) {
  console.log(err.name);   // "TypeError"
}

The output shows the whole model. The instance owns its own data, the name, because the constructor assigned it. The method is not owned by the instance, because it lives on the prototype and is shared by every animal.

The non-enumerable detail is the one people miss. A method assigned to a prototype by hand is enumerable, so it shows up in a for...in loop and in the keys method. A class method is not, so copying an object with the spread operator does not copy the methods, and iterating an instance gives you only its data. That is the behaviour you almost always want.

The final catch is the strictness of the class body. Calling a class without the new keyword throws a TypeError, which protects you from a constructor running with a this that points at the global object.