Module 11: Classes

Overview

This module provides comprehensive coverage of ES6+ class syntax in JavaScript. While classes are syntactic sugar over JavaScript's prototype-based inheritance, they provide a cleaner, more intuitive way to create objects and implement inheritance patterns.

Learning Objectives

By the end of this module, you will be able to:

• •Define classes using declaration and expression syntax
• •Implement constructors and instance methods
• •Use getters and setters for computed properties
• •Extend classes using inheritance
• •Override methods and call parent methods with super
• •Create and use static properties and methods
• •Implement private fields and methods (ES2022)
• •Apply common class-based design patterns

Prerequisites

• •Module 10: Objects (object basics and prototypes)
• •Module 5: Functions (closures, this binding)

Sections

11.1 Class Basics

• •Class declarations vs expressions
• •Constructor method
• •Instance properties and methods
• •Getters and setters
• •Method chaining

11.2 Class Inheritance

• •The extends keyword
• •Super constructor calls
• •Method overriding
• •Prototype chain in classes
• •Multi-level inheritance

11.3 Static Members

• •Static properties
• •Static methods
• •Static blocks
• •Factory methods
• •Utility classes

11.4 Private Fields

• •Private instance fields (#)
• •Private methods
• •Private static members
• •Encapsulation patterns
• •ES2022 private syntax

11.5 Class Patterns

• •Mixins and composition
• •Factory pattern
• •Singleton pattern
• •Builder pattern
• •Decorator pattern

Class vs Prototype Comparison

┌─────────────────────────────────────────────────────────────────────────┐
│                    ES6 Class vs Prototype Pattern                       │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  // ES6 Class Syntax                    // Prototype Pattern            │
│  class Person {                         function Person(name) {         │
│      constructor(name) {                    this.name = name;           │
│          this.name = name;              }                               │
│      }                                                                  │
│                                         Person.prototype.greet =        │
│      greet() {                              function() {                │
│          return `Hi, ${this.name}`;             return `Hi, ${this.name}`│
│      }                                      };                          │
│                                                                         │
│      static create(name) {              Person.create = function(name) {│
│          return new Person(name);           return new Person(name);    │
│      }                                  };                              │
│  }                                                                      │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Key Concepts

File Structure

Module-11-Classes/
├── README.md
├── 11.1-Class-Basics/
│   ├── README.md
│   ├── examples.js
│   └── exercises.js
├── 11.2-Class-Inheritance/
│   ├── README.md
│   ├── examples.js
│   └── exercises.js
├── 11.3-Static-Members/
│   ├── README.md
│   ├── examples.js
│   └── exercises.js
├── 11.4-Private-Fields/
│   ├── README.md
│   ├── examples.js
│   └── exercises.js
└── 11.5-Class-Patterns/
    ├── README.md
    ├── examples.js
    └── exercises.js

Best Practices

1. •Use classes for OOP - Cleaner syntax than prototype manipulation
2. •Prefer composition - Mixins over deep inheritance hierarchies
3. •Encapsulate state - Use private fields for internal data
4. •Keep classes focused - Single responsibility principle
5. •Document public API - Clear method signatures and purpose
6. •Use static for utilities - Factory methods, helper functions
7. •Validate in setters - Ensure data integrity

Common Pitfalls

┌─────────────────────────────────────────────────────────────────────────┐
│                        Watch Out For                                    │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  1. Forgetting `new`:                                                   │
│     const p = Person('Alice');  // ❌ TypeError                         │
│     const p = new Person('Alice');  // ✅                               │
│                                                                         │
│  2. Missing `super()` in subclass:                                      │
│     class Child extends Parent {                                        │
│         constructor() {                                                 │
│             // super() must be called before 'this'                     │
│             super();                                                    │
│             this.value = 1;                                             │
│         }                                                               │
│     }                                                                   │
│                                                                         │
│  3. Arrow methods lose inheritance:                                     │
│     class A {                                                           │
│         method = () => {};  // Can't be overridden properly             │
│     }                                                                   │
│                                                                         │
│  4. Private fields are truly private:                                   │
│     class A { #x = 1; }                                                 │
│     const a = new A();                                                  │
│     a.#x;  // ❌ SyntaxError                                            │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Exercises Overview

Each section includes exercises covering:

• •Basic class creation and instantiation
• •Inheritance hierarchies
• •Static member usage
• •Private field encapsulation
• •Design pattern implementation

Further Reading

• •MDN: Classes
• •JavaScript.info: Classes
• •ES2022 Class Features