Class Declaration

A class declaration is a syntactic construct in JavaScript used to define a blueprint for creating objects and establishing prototype-based inheritance. Introduced in ECMAScript 2015 (ES6), it provides a standardized, declarative syntax over JavaScript’s existing prototype chain mechanics, encapsulating constructors, methods, fields, and inheritance hierarchies.

class BaseClass {
  constructor(id) {
    this.id = id;
  }
}

class DerivedClass extends BaseClass {
  // 1. Private fields (must be declared upfront)
  #privateField;

  // 2. Public fields (attached to the instance)
  publicField = 'default value';

  // 3. Constructor
  constructor(id, param) {
    super(id); // Must call super() before accessing 'this'
    this.#privateField = param;
  }

  // 4. Prototype Instance Method (concise syntax, attached to prototype)
  prototypeMethod() {
    return this.#privateField;
  }

  // 5. Instance Field Method (attached directly to the instance)
  boundMethod = () => {
    return this.publicField;
  };

  // 6. Getter / Setter
  get propertyName() {
    return this.publicField;
  }

  set propertyName(value) {
    this.publicField = value;
  }

  // 7. Static method (attached to DerivedClass itself)
  static staticMethod() {
    return 'Static context';
  }
}

Execution Context and Mechanics

Hoisting and the Temporal Dead Zone (TDZ) Unlike function declarations, class declarations are not initialized when hoisted. The identifier is hoisted to the top of the block scope, but accessing the class before its lexical declaration results in a ReferenceError. The class remains in the Temporal Dead Zone until the JavaScript engine evaluates the declaration line.

Implicit Strict Mode The entire body of a class declaration is implicitly executed in strict mode ('use strict'). This applies to the constructor, methods, getters, setters, and static methods. Syntax that is invalid in strict mode will throw a SyntaxError.

Instantiation Requirement A class declaration creates a constructor function that can only be invoked using the new operator. Attempting to call a class as a standard function (e.g., ClassName()) will throw a TypeError.

Method Enumerability By default, all methods defined within the body of a class declaration using concise syntax (including getters and setters) are non-enumerable. This differs from legacy constructor functions where methods attached directly to the prototype object are enumerable unless explicitly configured otherwise via Object.defineProperty().

Structural Components

• Inheritance (extends and super): The extends keyword establishes a prototype chain, linking a derived class to a base class. Within a derived class, the super keyword is used to access the parent class. The super() method must be invoked inside the derived class’s constructor before any reference to this can be evaluated.
• Constructor: A specialized method invoked automatically during instantiation. A class declaration may contain a maximum of one constructor method. If omitted, the engine implicitly generates one based on the class type:
  • Base classes receive an empty constructor: constructor() {}
  • Derived classes receive a constructor that forwards arguments to the parent: constructor(...args) { super(...args); }
• Instance Methods vs. Field Methods:
  • Functions defined using concise method syntax (e.g., methodName() {}) are attached to the class’s prototype object and shared across all instances via the prototype chain.
  • Functions assigned to class fields (e.g., methodName = () => {} or methodName = function() {}) are evaluated during instantiation and attached directly to the instance itself, not the prototype.
• Static Members: Fields and methods prefixed with the static keyword. These are attached directly to the class constructor function object, not to the prototype. They cannot be accessed through instances of the class.
• Private Members: Fields and methods prefixed with a hash (#). These are strictly encapsulated within the class body and cannot be accessed or modified from outside the class lexical scope, enforcing hard privacy at the engine level.

Master JavaScript with Deep Grasping Methodology!

Learn More