Javascript design pattern factory model example

JavaScript factory mode the original way

Because the properties of an object can be defined dynamically after the object is created, this code was written like this when JavaScript was first introduced

var oCar = new Object;
oCar.color = "blue";
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function() {
  alert(this.color);
};

In the code above, create the object car. Then give it a few properties: it's blue, it has four doors, and it gets 25 miles per gallon. The last property is actually a pointer to a function, meaning that the property is a method. Once this code is executed, you can use the object car. One problem, though, is that you may need to create multiple instances of car, which is obviously not a good way to do it.

Solution: factory approach
To solve this problem, developers create factory functions that create and return specific types of objects. For example, the function createCar() can be used to encapsulate the operation to create a car object listed earlier:

function createCar(sColor,iDoors,iMpg) {
  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.doors = iDoors;
  oTempCar.mpg = iMpg;
  oTempCar.showColor = function() {
    alert(this.color);
  };
  return oTempCar;
}
var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);
oCar1.showColor();        //Output "red"
oCar2.showColor();        //Output "blue"

Calling this factory function creates a new object and assigns it all the necessary properties, giving the createCar() function an argument to assign values to the color, doors, and MPG properties of the car object to be created. This causes the two objects to have the same property but different property values. The downside of this method is that every time a car object is created (that is, the createCar function is called once) the showColor method is created for each object repeatedly, which is not necessary and in fact, each object shares the same function. So we try to declare its method properties outside of the function.

Methods to define an object outside of a factory function
Some developers avoid this problem by defining an object's method outside of a factory function and then pointing to the method with attributes:

function showColor() {
  alert(this.color);
}
function createCar(sColor,iDoors,iMpg) {
  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.doors = iDoors;
  oTempCar.mpg = iMpg;
  oTempCar.showColor = showColor;
  return oTempCar;
}
var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);
oCar1.showColor();        //Output "red"
oCar2.showColor();        //Output "blue"

In the code overwritten above, the function showColor() is defined before the createCar() function. Inside the createCar(), give the object a pointer to the existing showColor() function. Functionally, this solves the problem of repeatedly creating function objects. Semantically, however, this function is less like an object's method.