> ## 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.
# JavaScript Derived Class
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
```javascript theme={"dark"}
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:
```javascript theme={"dark"}
// Implicitly generated by the engine if omitted:
constructor(...args) {
super(...args);
}
```
## Execution Examples
**Standard Initialization:**
```javascript theme={"dark"}
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:**
```javascript theme={"dark"}
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.
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
