5.4 Writing Your Own Classes

Step 1 — Recall the one-goal case: With exactly one goal, the procedural version (§5.2.5) was fine: a single goal variable, one inline distance check, and goal = null to mark "already won." Adding a class would have been ceremony with no benefit.

Step 2 — See what breaks with two goals: A second goal means a second variable (goal2), another copy-pasted if (goal2) { ... } block with its own distance formula, another null-out line — and another chance to forget one of them.

Step 3 — See what the class buys you: With a Goal class, each goal bundles its own sprite, its own .collected flag, and its own isNear/collect behavior. Goals go in an array, and one loop handles any number of them:

for (const g of goals) {
  if (!g.collected && g.isNear(player)) {
    g.collect();
  }
}

Adding a third or twentieth goal costs zero new logic — just another entry in the array.

Answer: The class mattered once there were multiple goals because it eliminated per-goal copy-pasted code: state (.collected) and behavior (isNear, collect) live inside each instance, so an array plus one loop scales to any number of goals, while the procedural version needed a new variable and a new check block for every single goal added.

Step 1 — Allocation: new allocates a new, empty object in memory. This is the blank instance that will become your object.

Step 2 — Run the constructor: It runs the class's constructor method with this bound to that newly allocated empty object. Any arguments you passed to new are handed to the constructor, which typically stores them onto this.

Step 3 — Return the finished object: It returns the finished object to you, so you can store it in a variable (e.g., goal = new Goal(360, 340)).

Answer: JavaScript (1) allocates a new empty object, (2) runs the class's constructor method with this bound to that new object (passing along the arguments given to new), and (3) returns the finished object to the caller.

Step 1 — Define the constructor: The constructor is the special method inside a class, named constructor, that new runs automatically when building an instance. It receives whatever arguments were passed to new, and its job is usually to store them onto this so the rest of the class can use them later.

Step 2 — What if it's missing? If a class doesn't define a constructor, JavaScript supplies an empty default one automatically — new ClassName() still works; it just builds the instance without running any of your setup code, so no properties get set.

Answer: A constructor is the special method named constructor that new calls automatically, receiving the new arguments and storing them onto this. If a class doesn't define one, JavaScript uses an implicit empty constructor — instances are still created, but no custom setup happens.

Step 1 — Define this: Inside a method, this refers to the specific instance the method was called on — whatever variable sits on the left of the dot at the call site.

Step 2 — Apply the substitution trick: Mentally rewrite the method body replacing every this with the calling instance:

• Calling goalA.isNear(player) → read the body as if every this.sprite said goalA.sprite.
• Calling goalB.isNear(player) → read the same body as if every this.sprite said goalB.sprite.

Same method code, different substitution — which is why the two calls can give different answers even though they run identical lines.

Answer: this refers to the instance the method was called through. For goalA.isNear(player), mentally replace each this with goalA; for goalB.isNear(player), replace each this with goalB — same code, different instance substituted in.

Step 1 — Write the class skeleton: A Counter needs one property, n, initialized in the constructor, plus two methods written without the function keyword.

class Counter {
  constructor() {
    this.n = 0;
  }
  tick() {
    this.n += 1;
  }
  reset() {
    this.n = 0;
  }
}

Step 2 — Check the behavior: Each instance owns its own independent n:

const c = new Counter();
c.tick();
c.tick();
console.log(c.n);   // 2
c.reset();
console.log(c.n);   // 0

tick() increments this.n by 1 each call; reset() assigns 0 back onto this.n.

Answer:

class Counter {
  constructor() {
    this.n = 0;
  }
  tick() {
    this.n += 1;
  }
  reset() {
    this.n = 0;
  }
}

Step 1 — Define composition: Composition is the design idiom where a class stores another object as a property — e.g., this.sprite = new Sprite(...) — rather than inheriting from it with extends. The class's own methods then explicitly read and write through that stored property (this.sprite.color, this.sprite.x, …).

Step 2 — Why Goal chooses it: Composition keeps the boundary explicit. Every engine feature Goal relies on appears visibly in Goal's own code as this.sprite.something, instead of being silently inherited from a parent class you haven't fully learned yet. You only depend on the API surface you actually wrote down.

Answer: Composition means wrapping another object as a property (this.sprite = new Sprite(...)) rather than extending its class. Goal uses it because it makes the sprite API it depends on explicit and visible in its own methods, avoiding silent inheritance from a parent class the student hasn't learned yet.

Step 1 — Run the checklist: Apply the three questions from §5.4.6 to the collectible items:

1. Is there more than one of this thing? Yes — 20 items.
2. Does each one carry its own state? Yes — each has its own position and its own point value.
3. Does each one have its own behavior tied to that state? Yes — each is checked for proximity and collected independently, using its own position and awarding its own points.

Step 2 — Compare the alternatives: One array of parallel values (e.g., separate arrays for x-positions, y-positions, point values) forces you to keep three arrays index-aligned by hand — add or remove an item and you must update all three in sync, a classic source of bugs. An array of class instances keeps each item's data bundled together, so one loop over the array handles all 20 identically.

Answer: Use one array of class instances. All three checklist questions answer yes — many items, each with its own state (position + point value), each with behavior tied to that state — which points toward a class. Parallel arrays would require manually keeping multiple arrays index-aligned, while instances bundle each item's data so a single loop manages all 20 safely.

Step 1 — Define inheritance: Inheritance lets one class extend another — class B extends A — so B automatically gets all of A's properties and methods, and can add or override some of its own. (This book's shPlay classes don't use it.)

Step 2 — Contrast with composition: Composition stores another object as a property (this.sprite = new Sprite(...)) and accesses its features explicitly through that property. Nothing is inherited silently — the wrapper class's methods spell out every this.sprite.something they rely on.

Step 3 — State the key difference: Inheritance creates an "is-a" relationship (a PowerUp is a Collectible) with features flowing in implicitly from the parent; composition creates a "has-a" relationship (a Goal has a sprite) with features accessed explicitly through the stored object.

Answer: Inheritance is one class extending another (class B extends A), where B silently receives A's properties and methods. Composition instead stores another object as a property and reads/writes it explicitly through that property. Inheritance is implicit "is-a"; composition is explicit "has-a."