Object Creation Patterns in Javascript

January 29, 2018


JS has no formal support for classes. Still, there is a workaround for object-oriented programming in JS.
We can use the complex object data type to create objects in Javascript.
To create objects in JS, there are different patterns that can be followed.
    These patterns are:
  1. Factory Pattern
  2. Constructor Pattern
  3. Prototype Pattern
  4. Dynamic Prototype Pattern

FACTORY PATTERN

In Factory pattern, we create a factory that creates specified objects and returns their reference. Every time, we call the factory, we will get a new instance.
Consider the example, where we want to create objects for a computer that will contain their memory capacities(ram and hard disk).
We will create a factory like:
//Factory pattern for object Creation
var computerFactory = function(ram, hardDisk){
 var computer = {}; //creating a new temporary object

 //Create class properties
 computer.ram = ram;
 computer.hardDisk = hardDisk;

 //Create class methods 
 computer.AvailableMemory = function(){
  console.log("\nHard-disk : " + this.hardDisk);
  console.log("Ram : " + this.ram);
 }

 return computer;
};
Now we will create an object by calling the factory like this.
//Creating new object(s) for computer class by using computerFactory
var computer1 = computerFactory(4,512);
var computer2 = computerFactory(16,1024);

//Accessing class methods using objects
computer1.AvailableMemory();
computer2.AvailableMemory();
Output>
Hard-disk : 512
Ram : 4

Hard-disk : 1024
Ram : 16

CONSTRUCTOR PATTERN

In this, we do not return the instance from the function, instead, we use the new operator along with the function name.
The constructor for the last example will be created like this.
var computer = function(ram, hardDisk){
 //Create class properties
 this.ram = ram;
 this.hardDisk = hardDisk;

 //Create class methods 
 this.AvailableMemory = function(){
  console.log("\nHarddisk : " + this.hardDisk);
  console.log("Ram : " + this.ram);
 }
};
Note that, we are not returning the object from the computer constructor.
//Creating new object(s) for computer class by using constructor pattern
var computer1 = new computer(4,512);
var computer2 = new computer(16,1024);

//Accessing object's properties
computer1.AvailableMemory();
computer2.AvailableMemory();
Output>
Hard-disk : 512
Ram : 4

Hard-disk : 1024
Ram : 16

PROTOTYPE PATTERN

In JS, almost every object has some prototype space that contains properties related to the object.
You can read more about prototype here.
In prototype pattern, we create a blank object and assign properties (and functions also) to its prototype with some default values and then we create a blank object and assign the actual values for the properties.
This pattern can be represented as:
var computer = function(){};

computer.prototype.ram = NaN;
computer.prototype.hardDisk = NaN;
computer.prototype.AvailableMemory = function(){
 console.log("\nHarddisk : " + this.hardDisk);
 console.log("Ram : " + this.ram);
}

//Creating new object(s) for computer class by using Prototype Pattern
var computer1 = new computer(); //Empty objecty created with default values
computer1.ram = 4; //Assigning the actual value for object property
computer1.hardDisk = 512;

var computer2 = new computer();
computer2.ram = 16;
computer2.hardDisk = 1024;

//Accessing class methods using objects
computer1.AvailableMemory();
computer2.AvailableMemory();
Output>
Hard-disk : 512
Ram : 4

Hard-disk : 1024
Ram : 16

Now consider if we create a new object of the computer with default values.
var computer1 = new computer(); //Created object with default values

console.log('ram' in computer1); //returns true
console.log(computer1.hasOwnProperty('ram')); //returns false
This is because the in operator searches for the property first in the object's root and then search continues in the prototype of the object whereas hasOwnProperty restricts its search to the root elements of the object in which the property is being searched.


Dynamic Prototype Pattern

Dynamic prototype pattern is a hybrid of constructor pattern and prototype pattern.
In this pattern, we reference the properties using this operator and we create the member functions in the prototype space of the object if the member function does not exist.
var computerDynamicProto = function(ram, hardDisk){
 this.ram = ram;
 this.hardDisk = hardDisk;

 if(typeof this.AvailableMemory !== 'function'){
  computerDynamicProto.prototype.AvailableMemory = function(){
   console.log("\nHarddisk : " + this.hardDisk);
   console.log("Ram : " + this.ram);
  }
 }
};

var computer1 = new computerDynamicProto(4,512);
computer1.AvailableMemory();
Output>
Hard-disk : 512
Ram : 4

You Might Also Like

0 comments