Let's start with a simple constructor + prototype Object applet
1 functioncreateobj (UName, uage) {2 This. UserName =UName;3 This. Userage =uage;4 }5CreateObj.prototype.showUserName =function () {6 return This. UserName;7 }8CreateObj.prototype.showUserAge =function () {9 return This. Userage;Ten}
This program, no problem, but very redundant, each time you expand a method to write a prototype object, we can put the prototype object prototype as a literal object, all the methods are literally
Scale Object , you can achieve the same effect:
1Createobj.prototype = {2Showuserage:function(){3 return This. Userage;4 },5Showusername:function(){6 return This. UserName;7 },8 }9 varObj1 =NewCreateobj (' Ghostwu ', 22 );Ten varObj2 =NewCreateobj (' Wei Zhuang ', 24 ); OneConsole.log (Obj1.showusername (), Obj1.showuserage ());//GHOSTWU AConsole.log (Obj2.showusername (), Obj2.showuserage ());//Weizhuang
But the first problem with this prototype (prototype) object, which is a default prototype object that overrides Createobj, is that constructor no longer points to createobj.
Before rewriting, constructor points to Createobj
1 functioncreateobj (UName, uage) {2 This. UserName =UName;3 This. Userage =uage;4 }5CreateObj.prototype.showUserName =function () {6 return This. UserName;7 }8CreateObj.prototype.showUserAge =function () {9 return This. Userage;Ten } OneConsole.log (CreateObj.prototype.constructor = = = Createobj);//true
After rewriting, constructor points to object
1Createobj.prototype = {2Showuserage:function(){3 return This. Userage;4 },5Showusername:function(){6 return This. UserName;7 },8 }9Console.log (CreateObj.prototype.constructor = = = Createobj);//falseTenConsole.log (CreateObj.prototype.constructor = = = Object);//true
So,constructor cannot accurately identify the object, because he will be modified
The program that we wrote earlier, basically is the prototype object (prototype) after the expansion of the method, then instantiate the object, we look at the first instantiation of the object, and then on the prototype object (prototype) extension function,
Is the instance object able to call the extended method normally?
1 functioncreateobj (UName, uage) {2 This. UserName =UName;3 This. Userage =uage;4 }5 varObj1 =NewCreateobj (' Ghostwu ', 22 );6CreateObj.prototype.showUserName =function(){7 return This. UserName;8 }9Console.log (Obj1.showusername ());//GHOSTWU
Can be called normally, but if the prototype object is overridden, it cannot be called
1 functioncreateobj (UName, uage) {2 This. UserName =UName;3 This. Userage =uage;4 }5 varObj1 =NewCreateobj (' Ghostwu ', 22 );6Createobj.prototype = {7Showusername:function(){8 return This. UserName;9 }Ten } OneConsole.log (Obj1.showusername ());//Error
Since the prototype object has been rewritten and the instantiation occurs before the rewrite, the implicit prototype __proto__ of the instance does not point to the overridden prototype object, so it cannot be called
Another problem, if there is a reference type on the prototype object (prototype), be careful, because multiple instances share the prototype object, so long as one instance changes the value of the reference type, all other instances receive
The result after the change .
1 functioncreateobj () {}2Createobj.prototype = {3Name: ' GHOSTWU ',4Skills: [' php ', ' JavaScript ', ' Linux ' ]5 };6 varObj1 =Newcreateobj ();7Obj1.skills.push (' Python ' );8 varObj2 =Newcreateobj ();9Console.log (Obj2.skills);//' php ', ' JavaScript ', ' Linux ', ' Python '
The shared nature of the prototype object (prototype) makes it easy to extend some methods for some of the built-in objects, such as arrays to repeat
1Array.prototype.unique =function(){2 varres = [];3 for(vari = 0, Len = This. length; i < Len; i++ ){4 if(Res.indexof ( This[i]) = =-1 ) {5Res.push ( This[i]); 6 }7 }8 returnRes;9 }Ten vararr = [10, 20, 30, 20, 30, 20, 40, 20 ]; OneConsole.log (Arr.unique ());//ten , A.
However, do not arbitrarily go to the built-in object above the extension method, in multi-person collaborative development, it is easy to produce coverage, as well as pollution.
[JS Master's Road] Use prototype object (prototype) need to pay attention to the place