JavaScript Understanding Object-oriented (i)--Object creation mode

1) Factory mode

Popular is to put the raw materials into the factory after processing a series of factory processes. In this case, we just swapped the raw material for data.

The following code creates a Createperson () function in which there are two properties in a function that can be used to add and print the person's name and age information.

　

<script>functionCreateperson (name, age) {//1: Raw materials            varobj =NewObject (); //2: ProcessingObj.name =name; Obj.age=Age ; Obj.showinfo=function() {alert ( This. Name + ', ' + This. Age);            }; //3: Factory            returnobj; }        varP1 = Createperson (' Leo ', 22); varP2 = Createperson (' su ', 37);  P1.showinfo (); //leo,22P2.showinfo ();//su,37Alert (P1.showinfo= = P2.showinfo);//false</script>

This factory pattern is a primitive type of object creation pattern, which has two obvious flaws.

Bug One: Unrecognized object type and no new process

Defect two: Each object needs to create a showinfo () method that creates a waste of resources

2) Constructor mode

　　The constructors in JS can be used to create objects of a specific type. Native constructors, such as object and array, will automatically appear in the execution environment at run time.

　In addition, you can create custom constructors that define properties and methods for custom object types. Use the constructor pattern to override the previous example.

<script>functionCreateperson (name, age) {//The This object is automatically created inside the system            //var this = new Object ();            //2: Processing             This. Name =name;  This. Age =Age ;  This. Showinfo =function() {alert ( This. Name + ', ' + This. Age);            }; //The system automatically returns objects            //return this;        }        varP1 =NewCreateperson (' Leo ', 22); varP2 =NewCreateperson (' Su ', 37);  P1.showinfo (); //leo,22P2.showinfo ();//su,37</script>

　　

　　The current pattern solves the first flaw in the factory model, but the second flaw persists. in this mode, alert (p1.showinfo==p2.showinfo), the result is still false.

Each method is recreated on each object instance, but these methods are essentially the same.

3) Prototype mode

About the prototype object does not do in-depth discussion, later said it works. Now you just need to know that the advantage of using a prototype object is that you can have all of the object instances share the properties and methods that he contains.

See an example of an array object. Implements a sum summation method for an array object.

<script>
        //The array class itself does not have the actual functionality to construct objects only        //the Arr object itself has the actual function of being created by the class        varARR1 =NewArray (1, 3, 5, 7); varARR2 =NewArray (1, 2, 5);Arr1.sum=function () {            varresult = 0;  for(vari = 0; I < This. length; i++) {result+= This[i]; }            returnresult;        }; Alert (Arr1.sum ()); // -Alert (Arr2.sum ());//pop-up error</script>

　　

　　alert (Arr2.sum ()); This statement obviously pops up because I did not create the Arr2.sum method and created the Arr1.sum ().

If you want to implement a summation of the Arr2 object array, then assign the SUM function to arr2.sum. This is both cumbersome and wasteful of system resources.

We use the prototype prototype object pattern to rewrite it.

<script>varARR1 =NewArray (1, 3, 5, 7); varARR2 =NewArray (1, 2, 5); //can be used to extend system function functionsArray.prototype.sum =function () {            varresult = 0;  for(vari = 0; I < This. length; i++) {result+= This[i]; }            returnresult;        }; Alert (Arr1.sum= = Arr2.sum);//trueAlert (Arr1.sum ());// -Alert (Arr2.sum ());//8</script>

　　

This adds a new method, sum (), to the array object using the prototype mode, which is the same as the group's original pop (), push (), and sort (). It can be used by every object.

Now let's take a look at the first example. I rewrote it with the prototype mode.

<script>//The same thing is added to the prototype and different things are added to the constructor .        //capitalize the first letter to differentiate between constructors and normal functions        functionCreateperson (name, age) {//Properties: Each object is not the same process, dynamic             This. Name =name;  This. Age =Age ; }        //method: All objects are the same state, staticCreatePerson.prototype.showInfo =function() {alert ( This. Name + ', ' + This. Age);        }; varP1 =NewCreateperson (' Leo ', 22); varP2 =NewCreateperson (' Su ', 37); Alert (P1.showinfo==p2.showinfo)//trueP1.showinfo ();//leo,22P2.showinfo ();//su,37</script>

　　

The above example correctly prints out the person's message and prints out two object instances in the same way.

As a result, we can add new methods to the system functions in the actual project to extend the functionality to meet the requirements and save resources. You can also add a prototype method to your own constructed function to share the instance to conserve resources.

JavaScript Understanding Object-oriented (i)--Object creation mode