> ## 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 Constructor
A constructor in JavaScript is a specialized method or function invoked via the `new` operator to allocate memory, initialize state, and establish the prototype chain for a newly instantiated object.
When a constructor is invoked, the JavaScript engine's internal sequence depends on whether it is a base constructor or a derived class constructor.
For **base constructors** (ES5 functions and non-derived ES6 classes), the engine executes a strict four-step internal sequence:
1. **Instantiation:** Creates a new, empty object in memory.
2. **Prototype Linkage:** Assigns the constructor function's `prototype` property to the new object's internal `[[Prototype]]` (accessible via `Object.getPrototypeOf()`).
3. **Context Binding:** Binds the `this` keyword within the constructor's execution context to the newly created object.
4. **Implicit Return:** Returns the newly created object, unless the constructor explicitly returns a different non-primitive object.
For **derived class constructors** (classes utilizing the `extends` keyword), the engine alters this sequence:
* It does *not* immediately create a new object or bind `this`.
* The `this` binding remains uninitialized in a Temporal Dead Zone (TDZ).
* Object creation and context binding are strictly delegated to the base class via the `super()` call.
## Syntax Variations and the `[[Construct]]` Method
JavaScript supports two primary syntaxes for defining constructors: ES6 Classes and ES5 Constructor Functions. To be invoked with `new`, a function must possess the internal `[[Construct]]` method.
**ES6 Class Syntax:**
The `constructor` is a reserved method name within a `class` block. ES6 classes strictly require the `new` operator. Attempting to invoke a class as a standard function will immediately throw a `TypeError`.
```javascript theme={"dark"}
class Entity {
constructor(identifier) {
this.id = identifier;
}
}
const instance = new Entity(42); // Succeeds
const fail = Entity(42); // Throws TypeError: Class constructor Entity cannot be invoked without 'new'
```
**ES5 Constructor Function Syntax:**
Standard functions declared via the `function` keyword possess a `[[Construct]]` internal method and act as constructors when invoked with `new`. Unlike ES6 classes, ES5 constructor functions do not have built-in protection requiring the `new` operator. If invoked without `new`, they execute as standard functions, which can lead to unintended `this` binding (e.g., to the global object or `undefined` in strict mode).
```javascript theme={"dark"}
function Entity(identifier) {
this.id = identifier;
}
const instance = new Entity(42); // Succeeds, 'this' is the new object
const standardCall = Entity(42); // Succeeds, but 'this' is not a new instance (returns undefined)
```
*Note on Invalid Constructors:* Arrow functions, async functions, generator functions, and concise object methods lack the `[[Construct]]` internal method. They cannot be used as constructors, and attempting to invoke them with `new` will throw a `TypeError`.
## Return Value Behavior
Constructors implicitly return the `this` context. If an explicit `return` statement is used, the engine evaluates the type of the returned value:
* **Primitives:** If a primitive (`string`, `number`, `boolean`, `null`, `undefined`, `symbol`, `bigint`) is returned, the engine ignores the return statement and yields the `this` instance.
* **Objects:** If an object reference (including arrays and functions) is returned, the engine discards the `this` instance and yields the explicitly returned object.
```javascript theme={"dark"}
function PrimitiveReturn() {
this.val = 1;
return "ignored"; // Engine ignores primitive, returns { val: 1 }
}
function ObjectReturn() {
this.val = 1;
return { override: true }; // Engine discards 'this', returns { override: true }
}
```
## Inheritance and `super()`
In ES6 derived classes, the constructor is responsible for initializing the parent class state. The derived constructor must invoke `super()` before any attempt to access the `this` context. `super()` acts as a direct call to the parent class's constructor.
Crucially, `super()` *must* be called during the execution of a derived constructor, regardless of whether `this` is accessed, unless the constructor explicitly returns a non-primitive object. If a derived constructor finishes executing without calling `super()`, it will throw a `ReferenceError` when it implicitly attempts to return the uninitialized `this` context.
```javascript theme={"dark"}
class Base {
constructor() {
this.baseState = true;
}
}
class Derived extends Base {
constructor() {
// ReferenceError if 'this' is accessed before super()
super();
this.derivedState = true;
}
}
class InvalidDerived extends Base {
constructor() {
// Throws ReferenceError at the end of the block
// because super() was never called to initialize 'this'
}
}
```
## The `new.target` Meta-Property
Inside a constructor or function, the `new.target` pseudo-property allows the detection of how the function was invoked. If invoked as a standard function call, it evaluates to `undefined`.
If invoked with `new`, `new.target` returns a reference to the constructor that was directly invoked by the `new` operator. In the context of class inheritance, when a parent constructor is executed via `super()`, `new.target` points to the derived (child) class constructor that was originally instantiated, not the parent constructor itself.
```javascript theme={"dark"}
class Base {
constructor() {
console.log(new.target.name);
}
}
class Derived extends Base {
constructor() {
super();
}
}
const baseInstance = new Base(); // Logs: "Base"
const derivedInstance = new Derived(); // Logs: "Derived" (logged from inside Base constructor)
// Using new.target to manually enforce 'new' in ES5 functions
function GuardedConstructor() {
if (!new.target) {
throw new TypeError("Constructor must be called with the 'new' operator.");
}
this.initialized = true;
}
const valid = new GuardedConstructor(); // Succeeds
const invalid = GuardedConstructor(); // Throws TypeError
```
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
