Javascript-object-oriented and prototype (3).

Advanced object-oriented and prototype--common tricks

Prototype schema creation object also has its own shortcomings, it omits the constructor parameter initialization of the process, the disadvantage is that the initialized values are consistent. The biggest drawback of the prototype is its greatest advantage, which is sharing.
All of the properties in the prototype are shared by many instances, and the share is good for the function, and it is also possible to include basic attributes. However, if the property contains a reference type, there are some problems

1  functionBox () {};2  3Box.prototype ={4 Constructor:box,5Name: ' Lee ',6age:100,7Family:[' elder brother ', ' sister ', ' sister '],8Runfunction()9      {Ten          return  This. Name + This. age+ ' Running ... '; One      } A  }; -   -  varBox1 =NewBox (); thealert (box1.family);//' elder brother ', ' sister ', ' sister ' -Box1.family.push (' brother ');//reference type After the first instance has been modified, keeping the share -   -alert (box1.family);//' elder brother ', ' sister ', ' sister ', ' brother ' +   -  //Instantiate Box again I want to get [' elder brother ', ' sister ', ' sister '] but because of sharing so got [' elder brother ', ' sister ', ' sister ', ' brother '] +  varBox2 =NewBox ();//Box1 A prototype of a reference type that was added after sharing Aalert (box2.family);//' elder brother ', ' sister ', ' sister ', ' brother '

★ To solve this problem, you can use the combination constructor + prototype mode

1 functionBox ()2  {3       This. Name =name;4       This. Age =Age ;5       This. Family =[' elder brother ', ' sister ', ' sister '];6  }7 8Box.prototype ={9 Constructor:box,TenRunfunction(){ One         return  This. Name + This. age+ ' Running ... '; A     } -      - }  the  - varBox1 =NewBox (' Lee ', 100); -alert (box1.family);//' elder brother ', ' sister ', ' sister ' -Box1.family.push (' brother '));  +alert (box1.family);//' elder brother ', ' sister ', ' sister ', ' brother ' -  + varBox2 =NewBox (' Jack ', 200); Aalert (box2.family);//' elder brother ', ' sister ', ' sister ' at //reference types do not use prototypes, all are not shared

★ Prototype mode, regardless of whether you invoke a shared method in the prototype, it initializes the method in the prototype, and when declaring an object,
The constructor + prototype part makes people feel weird, and it's best to encapsulate the constructors and prototypes together. In order to solve this problem, we can use the dynamic prototype pattern

1 //The prototype can be encapsulated in a constructor2 functionBox ()3  {4       This. Name =name;5       This. Age =Age ;6       This. Family =[' elder brother ', ' sister ', ' sister '];7      8      //initialization of the prototype, as long as it is initialized for the first time, it is not necessary to initialize each time the constructor is instantiated9      if(typeof  This. Run! = ' function ')//determine if the method existsTen      { OneBox.prototype.run =function() A          { -             return  This. Name + This. age+ ' Running ... '; -          } the      } -       -  } -  +     varBox1 =NewBox (' Lee ', 100); - alert (Box1.run ()); +      A     varBox2 =NewBox (' Jack ', 200); atAlert (Box2.run ());

★★ Extension: Parasitic constructor = Factory mode + constructor

1 functionBox (name, age)2     {3         varobj =NewObject ();4Obj.name =name;5Obj.age=Age ;6obj.run=function()7         {8             return  This. Name + This. age+ ' Running ... ';9         }Ten         returnobj; One     } A  -     varBox1 =NewBox (' Lee ', 100); - alert (Box1.run ()); the      -     varBox2 =NewBox (' Jack ', 200); -Alert (Box2.run ());

★ Extension: secure constructor [not see the difference between a safe constructor and a factory way except for the first letter of the function name]

1 functionBox (name, age)2     {3         varobj =NewObject ();4Obj.name =name;5Obj.age=Age ;6obj.run=function()7         {8             return  This. Name + This. age+ ' Running ... ';9         }Ten         returnobj; One     } A  -     varBox1 =box (' Lee ', 100); - alert (Box1.run ()); the      -     varBox2 =box (' Jack ', 200); -Alert (Box2.run ());

Javascript-object-oriented and prototype (3).