Following are the few main JavaScript object creation patterns:
- Factory Pattern
- Constructor Pattern
- Prototype Pattern
1. Factory Pattern:
var carFactory = function(name, model, type){ var obj = {}; obj.name=name; obj.model=model; obj.type=type; obj.showCarDetails = function(){ console.log("Name: "+ this.name); console.log("Model: "+ this.model); console.log("Type: "+ this.type); } return obj; } var car1 = carFactory('BMW','X5','SUV'); var car2 = carFactory('BMW','A6','Sedan'); car1.showCarDetails(); car2.showCarDetails();
- It is similar to a regular function only difference is that it would need to return a new instance of some object to be considered as "Factory" function.
- Ex. In above example we have created a new obj inside carFactory function and we are assigning the values (name,model,type) which we are passing to that object as a properties of it.
- Factory function doesn't use the "new" keyword unlike Constructor function.
- The problem with Factory function is that we cannot check whether the given object is created by certain factory. Ex. car instanceof carFactory // Return false
2. Constructor Pattern:
var CarConstructor = function(name, model, type){ this.name=name; this.model=model; this.type=type; this.showCarDetails = function(){ console.log("Name: "+ this.name); console.log("Model: "+ this.model); console.log("Type: "+ this.type); } } var car1 = new CarConstructor('BMW','X5','SUV'); var car2 = new CarConstructor('BMW','A6','Sedan'); car1.showCarDetails(); car2.showCarDetails();
- Here since constructor pattern not returning any object we have to use "new" keyword to create object of it.
- No need to return any as it'll implicitly return new object.
- So every time we create new object from CarConstructor function it'll create new instance of it.
- The functions execution context (this) will be set a new object.
- We can check whether the give object is created by constructor
- i.e. car1 instanceof CarConstructor // return true
3. Prototype Pattern:
var carProto = function(){}; carProto.name=""; carProto.model=""; carProto.type="";
carProto.prototype.showCarDetails = function(){ console.log("Name: "+ this.name); console.log("Model: "+ this.model); console.log("Type: "+ this.type); } var car1 = new carProto(); car1.name="Audi"; car1.model="A6"; car1.type="Sedan"; car1.showCarDetails();
- In prototype pattern the advantage of it over constructor pattern is that the showCarDetails function is part of prototype space and not directly the part of car1 object.
No comments:
Post a Comment