JavaScript Constructor Pattern
In this article we have learn about JavaScript constructor pattern and used prototype property to make it optimal.
In Object Oriented programming languages a constructor is a special method used to initialize a new object once memory has been allocated for it. When we take JavaScript almost everything is an object.
Object constructors are used to create specific types of objects. Constructor preparing the object for use and accepting parameters a constructor can use to set the values to properties and methods when object is first created.
Must Read: Top 5 Programming Languages to Learn for 2018.
Must Read: Why you should learn Linux | programmer preferred & Best OS.
Must Read: Why you should learn Linux | programmer preferred & Best OS.
1. Object Creation
Two common ways used in JavaScript to create objects. Those methods are as follows:
//Create a new empty object.
var myCar = { }
//Which is a shorthand for the object constructor.
var myNewCar = new Object();
2. Basic Constructor in JavaScript
As we know JavaScript doesn’t support the concept of class, but importantly it does support constructor functions that work with objects. For a call to a constructor function with the keyword new, we can tell JavaScript would like the function to behave like a constructor and instantiate a new object with members in the function.
Inside our constructor, the keyword this references the new object that’s being created. So now we are going to create a basic constructor like follow:
function Car(model, year, mileage, color) {
this.model = model;
this.year = year;
this.mileage = mileage;
this.color = color;
this.toString = function () {
return this.model + "has done " + this.mileage + ' miles'
}
}
// Usage
var myCar = new Car("Honda Civic", 2012, 5000, "Black");
// browser console will show the output
console.log(myCar.toString());
This sample code shows us the simple version of the constructor pattern. Still this implementation has few problems. Those are
** It makes inheritance difficult.**
Function such as toString() are redefined for each of new object created using car constructor. That means, this is not optimal, as the function toString() should be ideally be shared between all instances of the car type. Next section will see how we can overcome these issues.
3. Constructors with Prototype in JavaScript
JavaScript functions have a property called a prototype. When we call a JavaScript constructor to create new object, all the properties of the constructor’s prototype are available to the new object. In this way, multiple car objects can be created that access the same prototype. Now will extend our example as follows:
function Car(model, year, mileage, color) {
this.model = model;
this.year = year;
this.mileage = mileage;
this.color = color;
}
Car.prototype.toString = function () {
return this.model + "has done " + this.mileage + ' miles'
}
// Usage
var myCar = new Car("Honda Civic", 2012, 5000, "Black");
// browser console will show the output
console.log(civic.toString());
After new prototype implementation, the single instance of toString() will now be shared between all car objects.
In this article we have learn JavaScript constructor pattern and used prototype property to make it optimal. Hope this will help you to understand this pattern.
0 Comments