5.6 — Classes
Yesterday you built object families by hand: a base object, Object.create, own properties added one by one. It works — and real codebases do it approximately never, because JavaScript ships a cleaner handwriting for the same machinery: class.
The word matters: handwriting, not new machinery. A class builds exactly the prototype chains of 5.5 — methods land on a shared prototype, new creates and links instances, extends just makes the chain longer. Today you'll watch class syntax desugar — shed its sugar-coating — into the diagram you already own.
And this is career-critical syntax: Playwright's Page Object Model — lesson 11.7 — is classes, wall to wall.
class Timer {
constructor(label) {
this.label = label;
}
start() {
return this.label + " started";
}
}
const t1 = new Timer("build");
const t2 = new Timer("deploy");
console.log(t1.start());
console.log(t2.start());
console.log(t1 instanceof Timer);Read the class body as two zones. Everything OUTSIDE the constructor — like start() — is written ONCE onto Timer.prototype, the shared home from 5.5. Declaring the class builds that prototype object before any instance exists. No copying per instance, ever.
The deeper story, with the real names for things — this part is what turns “I saw it” into “I can explain it.”
Now 5.5's naming knot unties: a function/class's prototype property is simply "the object new will link instances to." The instance's hidden [[Prototype]] then points at it: Object.getPrototypeOf(t1) === Timer.prototype is true. Two names, one arrow — from opposite ends.
Details that bite in interviews: class bodies run in strict mode automatically (5.4's undefined-this rule applies inside).
Calling a class without new throws a TypeError (unlike old constructor functions, which silently polluted globals).
And a child constructor must call super(...) before touching this — step 1 of the four (creating the object) is delegated to the parent.
Where you'll live in this syntax: lesson 11.9's Page Object Model — class LoginPage holding locators as properties and actions as methods, one instance per test.
Even the errors you'll catch in 5.8 are classes (Error, with TypeError extends Error — a real chain you've already met in stack traces).
⌨️ your first page objects
A sneak preview of your Playwright future: model two pages of a site as instances of ONE class — own data per instance, shared behavior on the prototype.
requirements:
- A class
SitePagewhose constructor takesurland stores it on the instance. - One method
open()returning"visiting " + this.url. - Two instances: one for
"/search", one for"/cart". Print each one'sopen(), then print whether the first instance is aninstanceof SitePage.
when you press RUN, the console must show exactly:
✏️ Quick check 1
Type exactly what this prints:
class Badge {
constructor(id) {
this.id = id;
}
show() {
return "#" + this.id;
}
}
const b = new Badge(7);
console.log(b.show());✏️ Quick check 2
Methods written in a class body land on the class’s ___ — type the word.
✏️ Quick check 3
Type exactly what this prints:
class A {}
class B extends A {}
const x = new B();
console.log(x instanceof A);🗣️ Now teach it back
A friend says “JavaScript classes are like classes in other languages, right?” Give the honest answer: what a class actually builds, the four things new does, and what extends really wires.
Write it as if your friend is sitting next to you. Saved to your journal — future-you will use these notes to teach others.