Common design patterns for JavaScript when creating objects

Transferred from: http://www.cnblogs.com/shouce/p/5488101.html

first, the factory model

functionPerson (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", 28);varP2=person ("K2", 29); 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 the ShowMessage method for each object is not the same method (each method is recreated on each object instance ), increasing the performance overhead.

second, the structural function mode

functionPerson (name,age) { This. name=name;  This. age=Age ;  This. showmessage=function() {Console.log ("Name:" + This. name+ "Age:" + This. Age); }}varp1=NewPerson ("K1", 28);varP2=NewPerson ("K2", 29); Console.log (P1.showmessage==p2.showmessage);//false is not the same ShowMessage methodConsole.log (P1.constructor);//[Person]Console.log (P1instanceofperson);//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 performance overhead.

Third, prototype mode

functionPerson () {}person.prototype.name= "K"; Person.prototype.age=29; 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 (P1instanceofperson)//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. However, the property value cannot be modified, such as p1.name= "K1", except that a property of Name= "K1" is added to the P1 instance and not to Prototype.name.

If the value type is OK, if it is a reference type, then there will be a problem, see the following example:

 function   person () {}; Person.prototype.age  =10; Person.prototype.array  =[1,2,3];  var  p1=new   person ();  var  p2=new   person (); Console.log (P1.array);  //  [n/a]  console.log (P2.array); // [1,2,3]  p1.array.push (4 // [1,2,3,4]  console.log (P2.array); // [1,2,3,4]  

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

Iv. combined use of the constructor pattern and prototype mode (recommended)

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=function() {    console.log (' name: ' +this. name+ ") Age: "+"-age);}; var p1=New person ("K",;p 1.showMessage ();

Five, dynamic prototype mode

The main solution: to encapsulate all the information in the constructor, more in line with Oo thinking

function Person (name,age) {    this. name=name;      this. age= age;     if (typeofthis. showmessage!= "function") {        Person.prototype.showMessage=  function() {            console.log ("Name:" +this. name+ ' Age: ' +this. age);        }    }} var p1=New person ("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 () { var  values=new   Array ();    Values.push.apply (values,arguments);  //  method of its own definition  values.topipedstring =function   () { return  this . Join (' | ')    );    };  return   var  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 usethis, and the other is not to call the constructor with new

functionPerson (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", 28);p 1.sayName (); //K1P1.sayage ();// -P1.name= "K2";p 1.age=30;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 used here is JavaScript is closed .

Common design patterns for JavaScript when creating objects