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.

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).

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.

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.

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.

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

Master JavaScript with Deep Grasping Methodology!

Learn More