Ways to create JavaScript objects

First, the factory model

function Person (name,age) {varp=NewObject (); P.name=name; P.age=Age ; P.showmessage=function () {Console.log ("Name:"+ This. name+"Age :"+ This. Age); }    returnp;}varP1=person ("K1", -);varP2=person ("K2", in); Console.log (P1.showmessage==p2.showmessage);//false is not the same ShowMessage methodConsole.log (P1.constructor);//[Object] is an object

The flaw in Factory mode is that the problem of object recognition is not resolved, and that each object's ShowMessage method is not the same method (each method is recreated on each object instance), adding overhead

Second, the structural function mode

function Person (name,age) { This. name=name;  This. age=Age ;  This. showmessage=function () {Console.log ("Name:"+ This. name+"Age :"+ This. Age); }}varp1=NewPerson ("K1", -);varP2=NewPerson ("K2", in); Console.log (P1.showmessage==p2.showmessage);//false is not the same ShowMessage methodConsole.log (P1.constructor);//[Person]Console.log (P1 instanceof person);//true

The constructor pattern solves the problem of object recognition, but the ShowMessage method for each object is not the same method (each method is recreated on each object instance), increasing the overhead

Third, prototype mode

function Person () {}person.prototype.name="k"; Person.prototype.age= in; Person.prototype.showMessage=function () {Console.log ("Name:"+ This. name+"Age :"+ This. age);};varp1=NewPerson ();p 1.showMessage ();//name:k age:29varP2=NewPerson ();p 2.showMessage ();//name:k age:29Console.log (P1.showmessage==p2.showmessage);//true--the same function is referencedConsole.log (P1.constructor)//[Person]--object recognitionConsole.log (P1 instanceof person)//true--object recognitionConsole.log (Person.prototype.isPrototypeOf (p1));//trueConsole.log (Object.getprototypeof (p1) ==person.prototype);//true

The prototype mode solves the problem of "re-creating each method on each object instance", and resolves the problem of object recognition.

A big problem with prototype mode is that all the objects, variables, and functions that are attached to the function prototype are shared by all instances of the function, although P1, P2 can access the properties of the prototype through the instance, but cannot modify the property values, such as p1.name= "K1 , just added a name= "K1" to the P1 instance and did not change to Prototype.name. If the value type is OK, if it is a reference type, then there will be a problem, see the example below

function Person () {}; Person.prototype.age=Ten; Person.prototype.array=[1,2,3];varp1=NewPerson ();varP2=NewPerson (); Console.log (P1.array);//[A]Console.log (P2.array);//[A]P1.array.push (4); Console.log (P1.array);//[1,2,3,4]Console.log (P2.array);//[1,2,3,4]

P1 adds a value to the array and is reflected in the P2, because they all point to the same array

Iv. combining the constructor pattern with the prototype pattern

This is the most common way to create objects, combining the advantages of constructors and prototype patterns

function Person (name,age) { This. name=name;  This. age=Age ;} Person.prototype.showMessage=function () {Console.log ("Name:"+ This. name+"Age :"+ This. age);};varp1=NewPerson ("k", -);p 1.showMessage ();

Five, dynamic prototype mode

The main solution: to encapsulate all the information in the constructor, more in line with the idea of OOP

function Person (name,age) { This. name=name;  This. age=Age ; if(typeof  This. showmessage!="function") {Person.prototype.showMessage=function () {Console.log ("Name:"+ This. name+"Age :"+ This. Age); }    }}varp1=NewPerson ("k", -);p 1.showMessage ();

Vi. Parasitic structural function patterns

function Person (name,age) {    var o=New  Object ();    O.name=name;    O.age= Age;    O.sayname=function () {        Console.log (this. Name);    };     return o;} var p1=New person ("k",page);p 1.sayName ();

The parasitic constructor pattern is identical to the factory pattern, except that the new keyword is used when creating the object, as in the example: Var p1=new person ("K", 28).

Its main function is to expand the function within this constructor, for example, I want to define an array type MyArray, which is based on array arrays and has a method of its own, as follows

function MyArray () {varvalues=NewArray ();    Values.push.apply (values,arguments); //a method of your own definitionvalues.topipedstring=function () {return  This. Join ('|');    }; returnvalues;}varcolors=NewMyArray ("Red","Blue","Green"); Console.log (colors.topipedstring ()); Console.log (colors instanceof Array) ;

Seven, the SAFE structure function pattern

The secure constructor follows the pattern of the parasitic constructor type, but has a difference of two points: one is not to use this, and the other is not to call the constructor with new

function Person (name,age) {varo=NewObject (); varTempage=Age ; O.name=name; O.age=Age ; O.sayname=function () {console.log (name); } o.sayage=function () {console.log (tempage); }    returno;}varP1=person ("K1", -);p 1.sayName (); //K1P1.sayage ();// -P1.name="K2";p 1.age= -;p 1.sayName (); //K1P1.sayage ();// -

See the output as above is a good understanding of what is called the Safe object pattern, is the object created in this mode, there is no other way to change the value passed in the initialization time, here is the person ("K1", 28), so that the object is a safe object, Actually, it's a JavaScript closure.

Ways to create JavaScript objects