Classes and Prototypes

COMPLETE LESSON · ABOUT 30 MIN OF ACTIVE PRACTICE

Learn Classes and Prototypes step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Explain where instance methods are stored
Protect constructor invariants
Prefer composition over deep inheritance
Implement a small invariant-protecting class, then compare it with a factory-function version.

DEEP EXPLANATION

Build the complete mental model

Build the mental model

Property lookup begins on an object and can continue through its prototype chain. Object.create sets a prototype explicitly; Object.getPrototypeOf observes it. Constructor functions and class declarations place shared instance methods on a prototype so every instance does not need its own function copy. Before writing more syntax, name the values involved in Classes and Prototypes, who creates them, and which result or effect the program promises. Trace the smallest example by hand and identify any browser or runtime API separately from the language feature. A useful mental model should predict a changed input, not merely describe the demonstration after it runs.

Use the API deliberately

Class syntax includes constructors, instance methods, getters, setters, static members, public fields, and private fields. A constructor should establish valid state or throw. extends and super support inheritance, but subclasses become coupled to parent assumptions. Keep inheritance shallow and based on a true substitutable relationship. During implementation, keep the prototype rule in a focused function or event boundary with explicit inputs. Choose names that reveal the domain, keep calculation separate from document, console, storage, or network effects, and prefer the narrowest API that expresses the problem. Compare this design with one reasonable alternative and explain why the selected construct makes ownership or control flow clearer.

Handle boundaries and tradeoffs

Factory functions and composition are often simpler when behavior can be assembled from independent capabilities. Closures can protect private state; plain objects can expose explicit methods; injected dependencies make testing easier. Choose a class when instance identity, shared prototype behavior, and a coherent lifecycle improve the model—not merely to group functions. Verification for Classes and Prototypes must cover an ordinary case, an empty or missing case, invalid input, and the most important threshold. Predict each result before running it, then locate the first value that violates the contract when reality differs. Record the corrected case as a repeatable check and explain which product behavior should occur instead of allowing undefined, NaN, stale data, or silent failure to spread.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Primary worked example

Trace this Classes and Prototypes example from validated input to returned value or visible effect before editing it.

class ProgressTracker {
  #completed = new Set();
  constructor(total) {
    if (!Number.isInteger(total) || total < 1) throw new RangeError("Positive total required");
    this.total = total;
  }
  complete(slug) { this.#completed.add(slug); }
  get percent() { return Math.round((this.#completed.size / this.total) * 100); }
}
const tracker = new ProgressTracker(4);
tracker.complete("intro");
console.log(tracker.percent);

Example 2: Second worked example

This variation changes the shape of the problem so you can compare the underlying prototype contract instead of copying one solution.

function createProgressTracker(total) {
  if (!Number.isInteger(total) || total < 1) throw new RangeError("Positive total required");
  const completed = new Set();
  return Object.freeze({
    complete(slug) { completed.add(slug); },
    percentage() { return Math.round((completed.size / total) * 100); },
  });
}
const tracker = createProgressTracker(2);
tracker.complete("objects");
console.log(tracker.percentage());

How to trace this lesson

Write down the exact inputs used by Classes and Prototypes.
Predict each returned value and observable effect before running the example.
Mark the first boundary where invalid or missing data could enter.
Verify the ordinary, empty, invalid, and threshold cases independently.

Common mistakes and corrections

Copying an object with spread does not copy its prototype or private fields, so the result is not a class instance.: Make the prototype rule explicit and cover it with a focused example.
Changing several parts of the example before explaining the original result.: Make one change at a time and compare it with a written prediction.
Testing only the demonstration's happy path.: Add missing, invalid, empty, and boundary inputs that exercise the stated contract.

PRACTICE LADDER

Move from recognition to independent work

1
Explain where instance methods are stored
2
Protect constructor invariants
3
Prefer composition over deep inheritance
4
Implement a small invariant-protecting class, then compare it with a factory-function version.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

Core rule

Applied boundary

RUNNABLE EXAMPLE

Change one assumption at a time

Predict the output, run the example, then change one input and one boundary in the Classes and Prototypes example. Explain every changed result before continuing.

class ProgressTracker {
  #completed = new Set();
  constructor(total) {
    if (!Number.isInteger(total) || total < 1) throw new RangeError("Positive total required");
    this.total = total;
  }
  complete(slug) { this.#completed.add(slug); }
  get percent() { return Math.round((this.#completed.size / this.total) * 100); }
}
const tracker = new ProgressTracker(4);
tracker.complete("intro");
console.log(tracker.percent);

class ProgressTracker {
  #completed = new Set();
  constructor(total) {
    if (!Number.isInteger(total) || total < 1) throw new RangeError("Positive total required");
    this.total = total;
  }
  complete(slug) { this.#completed.add(slug); }
  get percent() { return Math.round((this.#completed.size / this.total) * 100); }
}
const tracker = new ProgressTracker(4);
tracker.complete("intro");
console.log(tracker.percent);

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

class Course { title = title; }

Reveal repair and explanation

class Course {
  constructor(title) {
    if (!title) throw new TypeError("Title required");
    this.title = title;
  }
}

The constructor receives input and establishes the instance invariant before other methods can use it.

INDEPENDENT LAB

Build without copying the example

Implement a small invariant-protecting class, then compare it with a factory-function version.

// Define small functions before composing the complete solution.
// Implement a small invariant-protecting class, then compare it with a factory-function version.

// Define small functions before composing the complete solution.
// Implement a small invariant-protecting class, then compare it with a factory-function version.

Press Run to execute your code.

Self-review checklist Explain where instance methods are stored Protect constructor invariants Prefer composition over deep inheritanceWhat did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. Where are normal class instance methods stored? On the class prototype Inside every string Only in localStorage

2. Which evidence best demonstrates mastery of Classes and Prototypes? A prediction, boundary tests, and an explained result A copied snippet with no changes One successful happy-path run

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

Classes and Prototypes | JavaScript Course | SovranCode

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering