The Constructor Pattern — Learning Javascript Design Patterns

Disclaimer: This article is written for folks with basic programming knowledge, although I will try to make it relatable for the rest of us who are not yet burdened with the hassle of coding.

Let us take some lessons from the online book, Learning JavaScript Design Patterns by the prolific Addy Osmani.

Introduction

When the world needs a new footstool, what do the carpenters do?

Foot stool | Dining table

If you thought, ‘well they make one’, I think you are right. You see, the carpenter although capable of constructing dining tables, does not. They give the world what it needs, another footstool.

Carpenters construct wooden objects, and the Javascript interpreter constructs digital objects like Numbers, Strings, e.t.c. I will define an object as anything that has properties, and in some cases methods, which are actions that perform work or induce a change in or more object properties.

We Begin

Say we wanted to create a world of phones, using Javascript of course there a few things we should note. Javascript does not know what a phone object is, so we need to define a constructor, which when invoked creates a new phone object, or in Addy’s words.

…a constructor is a special method used to initialize a newly created object once memory has been allocated for it.

Let us create a constructor for our phone objects

/**
 * @param  {string} brand - brand of phone
 * @param  {string} model - model of phone
 * @param  {string} countryDesignedIn - country phone was designed in
 * @param  {string} countryMadein - country phone was manufactured in
 */
function Phone (brand, model, countryDesignedIn, countryMadein) {
  this.brand = brand;
  this.model = model;
  this.countryDesignedIn = countryDesignedIn;
  this.countryMadein = countryMadein;
this.toString = function(){
    return `${this.brand} ${this.model} manufactured in ${this.countryMadein}`
  }
}

phone constructor

Using this constructor, we can create two phone instances, one for me and one for you as follows

constructing your phone, then my phone

Addy points out this simple version of the constructor pattern suffers from some problems:

One is that it makes inheritance difficult and the other is that functions such as toString() are redefined for each of the new objects created using the Car constructor.

Let us check if the two Phone instances redefined the toString function, we do this simply as follows

checking if toString method is recreated for each instance of Phone

Now we have confirmed that each instance of phone creates it’s individual toString function, which simply is not a good thing (please do expatiate in the comments 😉).

Constructors With Prototypes

Quoting W3Schools,

• Every JavaScript object has a prototype. The prototype is also an object.
• All JavaScript objects inherit their properties and methods from their prototype.

Using this knowledge let us add a new function toStringAlt, that will be added via the prototype of Phone:

phone with protoype method

We will do a test like we did above, and we’ll see that each instance of Phone now shares the same toStringAlt method. The full code snippet is below

Adios

I think learning to code is like learning to drive, you pick up bits of skills and with more experience everything just clicks. Keep learning, keep growing.