Classes Under the Hood — Desugaring to Prototypes

ES6 class syntax is often called "syntactic sugar" over prototypes — but what does that actually mean? This article desugars every class feature (constructor, methods, getters/setters, static, extends, super, private fields) into plain ES5 prototype code.

Prerequisites: JS Foundations #4 — Prototypes

1. Basic Class → Constructor + Prototype

Key differences between class and a plain function + prototype:

These differences are why class isn't just syntax sugar — it enforces better practices.

2. Getters and Setters

3. Static Methods

4. extends and super — The Full Desugar

5. Private Fields — # Syntax

Private fields use WeakMap under the hood in transpilation:

6. Full Checklist — What Desugars to What

Key Takeaways

• class is a function — typeof MyClass === "function".
• All methods go on ClassName.prototype — identical to ES5.
• extends sets up Child.prototype = Object.create(Parent.prototype).
• super() is Parent.call(this, ...) in the constructor; super.method() is Parent.prototype.method.call(this).
• Private fields (#x) transpile to WeakMap-based encapsulation.
• Static members attach to the constructor function itself, not the prototype.

Next: V8 #3 — Deoptimization Patterns — what specific code patterns cause TurboFan to bail out.