Constructors in JavaScript objects

javascript

constructor-pattern

object-creation

inheritance-management

byNikita Barsukov·Feb 2, 2025

In JavaScript, constructors manifest via functions or classes. We effectuate object instantiation with new. Here's the gist:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const bob = new Person('Bob', 25); // Meet bob, a 25 year old Person.

In this case, Person functions as the constructor and bob stands as an instance of Person possessing name as 'Bob' and age as '25'.

Insight into JavaScript constructors

Constructors in JavaScript venture beyond simply churning out data structures. They seep into the veins of your code, transmuting it into tiers of logic and functionality. They may form via classes or traditional function constructors.

Prototypal Inheritance with function constructors

Prototypes render function constructors super-efficient by ensuring method sharing across all instances, without duplicating them.

function Gadget(name, version) {
  this.name = name;
  this.version = version;
}
Gadget.prototype.getInfo = function() {
  // A bit like the Gadget's business card
  return `${this.name} version ${this.version}`;
};

Quaternion Encapsulation: Achieving privacy via closures

For private application, bring in closures. Declare the variables inside the constructor's scope, thereby denying all unauthorized outside access.

function Device(id) {
  var secretKey = generateSecretKey(id); // Secret key? More like a ninja, hidden and powerful!
  this.getId = function() {
    return `Device ID: ${id}, Key: ${secretKey}`;
  };
}

Initiate construction with `constructor` method

Within the class syntax, the constructor method sets the stage for object creation and initialization, simplifying inheritance patterns and seamlessly bridging with the super keyword.

class Appliance {
  constructor(brand) {
    this.brand = brand;
  }
}
class Refrigerator extends Appliance {
  constructor(brand, doors) {
    super(brand); // Handover the brand to the higher power!
    this.doors = doors;
  }
}

Let static properties and methods party across instances by coupling them directly with the constructor.

Gadget.isElectronic = true; // Rise, my army of electronic gadgets!

Use namespaces as sails to navigate through the sea of constructors, avoiding collisions and clutter in larger applications.

var MyApp = MyApp || {};
MyApp.Smartphone = function(operatingSystem) {
  this.operatingSystem = operatingSystem;
};

System.out.println("Debugging is fun!"): Naming for debugging and readability

Function names can assist in navigating through debugging, enriching the parser with useful clues and insights.

function Router_A() { /* implementation */ } // Named in loving memory of my first, long lost router.

A spruced up code structure using namespaces, closures, and clean naming conventions goes a long way in enhancing code sharing, debugging, and comprehension.

Advanced constructor concepts

Let's delve deeper into constructors:

The inheritance equation

For inheritance management, employ intermediary constructors to setup a clean prototype chain sans triggering parent constructors.

function inherit(Child, Parent) {
  Child.prototype = Object.create(Parent.prototype);
  Child.prototype.constructor = Child; // Job done, the legacy continues!
}

Sealing constructors with IIFEs

Immediately-invoked Function Expressions (IIFEs) are a great way of sealing in constructors, adding an additional layer of privacy.

const UniqueGadget = (function() {
  let id = 0;
  return function() {
    this.id = ++id; // Each gadget, unique in its own way!
  };
})();

Dialing the superclass hotline

Superclass methods may require a direct call, especially when they’ve been overridden.

Refrigerator.prototype.getInfo = function() {
  return `Superclass info: ${Appliance.prototype.getInfo.call(this)}`;
};

Object creation in style

There are numerous ways to create objects, each having its own distinctive benefits:

Craft it with factory functions

The factory function pattern encapsulates the creation process within a flexible and reusable function.

function createMediaPlayer(type) { // Going to the gadget store.
  if (type === 'audio') {
    return new AudioPlayer();
  } else if (type === 'video') {
    return new VideoPlayer();
  }
}

Build it with builder pattern

The builder pattern separates the construction of complex objects from their representation, thereby allowing variable representations from the same construct.

class HouseBuilder {
  constructor() {
    this.house = new House();
  }
  setFloorType(type) {
    this.house.floorType = type;
    return this;
  }
  // other setters...
  build() {
    return this.house; // It's a magnificent creation indeed!
  }
}