Object Creation Patterns in Javascript
January 29, 2018JS 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:
- Factory Pattern
- Constructor Pattern
- Prototype Pattern
- 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
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
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
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
Ram : 4
0 comments