[JS Master's Road] Use prototype object (prototype) need to pay attention to the place

Let's start with a simple constructor + prototype Object applet

function createobj ( uName, uAge )  {             this.userName = uName;             this.userAge = uAge;         }        createobj.prototype.showusername  = function  ()  {             return this.username;        }         CreateObj.prototype.showUserAge = function  ()  {             return this.userAge;         } 

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:

createobj.prototype = {             Showuserage : function () {                 return this.userAge;             },            showusername :  function () {                 return this.username;            },         }        var obj1  = new createobj (  ' GHOSTWU ', 22 );         var obj2 = new createobj (  ', 24  ');         console.log ( oBj1.showusername (),  obj1.showuserage ()  ); //ghostwu 22         console.log ( obj2.showusername (),  obj2.showuserage ()  )  //Weizhuang  24

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

Function createobj ( uName, uAge )  {             this.userName = uName;             this.userAge = uAge;        }         CreateObj.prototype.showUserName = function  ()  {             return this.userName;         }        createobj.prototype.showuserage  = function  ()  {             return this.userage;        }         console.log ( CreateObj.prototype.constructor === CreateObj );  //true

after rewriting, constructor points to object

createobj.prototype = {             Showuserage : function () {                 return this.userAge;             },            showusername :  function () {                 return this.username;            },         }        console.log (  CreateObj.prototype.constructor === CreateObj ); //false         console.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?

function createobj ( uName, uAge )  {             this.userName = uName;             this.userAge = uAge;         }        var obj1 = new  Createobj (  ' GHOSTWU ', 22 );         Createobj.prototype.showusername = function () {             return this.userName;        }         console.log ( obj1.showusername ()  )  //GHOSTWU 

is not called.

Function createobj ( uName, uAge )  {             this.userName = uName;             this.userAge = uAge;        }         var obj1 = new createobj (  ' GHOSTWU ',  22  );        createobj.prototype = {             showusername : function () {                 return this.userName;             }         }        console.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 .

function createobj () {}         CreateObj.prototype = {             name :  ' GHOSTWU ',             skills : [  ' php ',  ' javascript ',  ' Linux '  ]         };        var obj1 = new createobj ();         obj1.skills.push (  ' python '  );         var obj2 = new createobj ();         console.log ( obj2.skills );  //' php ',  ' javascript ',  ' Linux ',  ' Python ' 

prototype object (prototype), you can easily extend some methods for some built-in objects, such as arrays to repeat

Array.prototype.unique = function () {             var res = [];             for ( var i = 0, len = this.length; i < len; i+ + ) {                if (  res.indexof ( this[i] )  == -1 )  {                    res.push ( this[i] );                  }             }             return res;        }         var arr = [ 10, 20, 30, 20, 30, 20, 40, 20 ];         console.log ( arr.unique ()  );  //10, 20,  30, 40

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.

This article is from the "GHOSTWU" blog, make sure to keep this source http://ghostwu.blog.51cto.com/11192807/1960790

[JS Master's Road] Use prototype object (prototype) need to pay attention to the place