Example of the factory model for JavaScript design Patterns _ Basics

JavaScript factory way the original way

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

Copy Code code as follows:

var ocar = new Object;
Ocar.color = "Blue";
Ocar.doors = 4;
Ocar.mpg = 25;
Ocar.showcolor = function () {
alert (This.color);
};

In the above code, create the object car. Then give it a few properties: its color is blue, there are four doors, each gallon can run 25 miles. The last property is actually a pointer to a function, which means that the property is a method. After you execute this code, you can use the object car. One problem here, though, is that it's possible to create multiple instances of car, which is obviously not a good way to do it.

Solution: Factory Method
To solve this problem, the developer creates a factory function that can create and return objects of a particular type. For example, the function Createcar () can be used to encapsulate the actions listed earlier for creating a car object:

Copy Code code as follows:

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"

By calling this factory function, you will create a new object, give it all the necessary properties, and add parameters to the Createcar () function to assign values to the color, doors, and mpg properties of the car object you want to create. This causes two objects to have the same properties, but with different property values. The downside of this approach is that every time a car object is created (that is, the Createcar function is called once) it is repeated to create a Showcolor method for each object, which is not necessary and, in fact, each object shares the same function. So we try to declare its method attributes outside of the function.

Methods for defining objects outside of a factory function
Some developers define the object's methods outside of the factory function and then point to the method with attributes to avoid this problem:

Copy Code code as follows:

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 rewrite code above, the function Showcolor () is defined before the function Createcar (). Within Createcar (), give the object a pointer to the existing Showcolor () function. Functionally, this solves the problem of duplicating the creation of a function object, but semantically, the function is not much like the object's method.