Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt

Use this file to discover all available pages before exploring further.

A derived class (or subclass) in JavaScript is a class that inherits properties and methods from another class (the base or superclass) using the extends keyword. It establishes a prototype chain connection between the child class and the parent class, allowing the derived class to inherit, override, or augment the parent’s behavior.

​
Syntax

class BaseClass {
  /* base implementation */
}

class DerivedClass extends BaseClass {
  constructor() {
    super(); // Required to initialize `this`, unless explicitly returning an object
  }
}

​
Technical Mechanics

​
1. The extends Keyword and Prototype Chain

When a derived class is created using extends, JavaScript establishes two distinct [[Prototype]] linkages:
  • Instance Prototype: DerivedClass.prototype.[[Prototype]] is set to BaseClass.prototype. This allows instances of the derived class to inherit instance methods.
  • Static Prototype: DerivedClass.[[Prototype]] is set to BaseClass. This allows the derived class to inherit static properties and methods directly from the base class constructor.

​
2. The super Keyword and this Binding

The super keyword serves two distinct purposes depending on its execution context within the derived class:
  • As a Constructor (super(...)): In a derived class, the parent constructor is responsible for allocating and initializing the this binding. Therefore, if a derived class defines a constructor, it must call super() before attempting to access or mutate this.
  • As an Object (super.method()): Inside methods (both static and instance), super acts as a reference to the parent class’s prototype object (or the parent class itself, in static contexts), allowing the derived class to invoke overridden parent methods.

​
3. The Object Return Exception

While omitting super() in a derived constructor typically results in a ReferenceError upon returning, there is a critical exception: if the derived constructor explicitly returns an object, calling super() is not required. Returning an object (such as a Proxy wrapping the instance, or a completely distinct object) bypasses the need to initialize this. Because the explicitly returned object replaces the default instance, the JavaScript engine does not throw a ReferenceError for the uninitialized this binding.

​
4. Implicit Constructors

If a derived class does not explicitly define a constructor, the JavaScript engine automatically injects a default constructor that passes all arguments to the parent class: 
// Implicitly generated by the engine if omitted:
constructor(...args) {
  super(...args);
}

​
Execution Examples

Standard Initialization: 
class SuperClass {
  constructor(id) {
    this.id = id;
  }
  compute() {
    return this.id * 2;
  }
}

class SubClass extends SuperClass {
  initializedField = true;

  constructor(id, tag) {
    // console.log(this); // Throws ReferenceError
    
    super(id); // Invokes SuperClass constructor, binding `this`
    
    // `this` is now accessible
    this.tag = tag;
  }

  compute() {
    return super.compute() + 10;
  }
}

const instance = new SubClass(5, 'test');
console.log(instance.compute()); // 20 ( (5 * 2) + 10 )
Bypassing super() via Object Return: 
class Base {}

class ProxyWrapper extends Base {
  constructor() {
    // super() is intentionally omitted
    
    // Returning an object bypasses the `this` initialization requirement.
    // No ReferenceError is thrown.
    return new Proxy({ custom: true }, {
      get(target, prop) {
        return target[prop];
      }
    });
  }
}

const wrapped = new ProxyWrapper();
console.log(wrapped.custom); // true

​
Field Initialization Order

In a standard derived class instantiation, the initialization sequence strictly follows this order:
  1. The derived constructor is called.
  2. super() is executed, invoking the base class constructor.
  3. Base class fields are initialized.
  4. The base class constructor body executes.
  5. Control returns to the derived class.
  6. Derived class fields are initialized.
  7. The remainder of the derived class constructor body executes.
Master JavaScript with Deep Grasping Methodology!Learn More