JS using prototype objects (Prototype) need to pay attention to

Let's first have a mini program of a simple constructor+prototype object

 Function CreateObj (Uname, UAGE) {This.username = UNAME; this.userage = UAGE;} CreateObj.prototype.showusername = Function () is.Username;} CreateObj.prototype.showuserage = Function () {Return This. userage;}

There is no problem in this program, but it is very redundant. Each method is expanded, we must write a prototype object. We can use prototype object prototype as a literal object. All methods are expanded in the literal object. Achieve the same effect:

 CreateObj.prototype = {Showuserage: Function () {Return This.userage;}, Showusername: Function () {Return This.username; CreateObj ('Ghostwu', 22); VAR OBJ2 = New CreateObj ('Wei Zhuang', 24); console.log (obj1.showusername (), obj1.showuseuserage ()); // ghostwu 22 console.log (obj2.showusername (), obj2.showuse according to (); // Guard Zhuang 24

However, the writing of this prototype object belongs to the default prototype object of CreateObj. The first problem caused is the constructor no longer pointing to the createObj.

Before rewriting, Constructor points to CreateObj

 Function CreateObj (Uname, UAGE) {This.username = UNAME; this.userage = UAGE;} CreateObj.prototype.showusername = Function () is.Username;} CreateObj.prototype.showuserage = Function () {Return This. userage;} console.log (createObj.prototype.ConStructor === CreateObj); // True

After rewriting, Constructionor points to Object

 CreateObj.prototype = {Showuserage: Function () {Return This.userage;}, Showusername: Function () {Return This.username; Recj.prototype.constructor === CreateObj); // False console.log (createObj.prototype.ConStructor === Object); // True

Therefore, Constructionor cannot accurately identify the object, because he will be modified

The procedures we wrote before are basically expanded on the prototype object (prototype), and then instantiated objects. Let's see, first institutionalize the object, and then expand the function on the prototype.

Can the instance object call the extension normally?

 Function CreateObj (Uname, UAGE) {this.username = uname; this.userage = UAGE;} Var obj1 = New CreateObj ('ghostwu', 22); CreateObj.prototy pe.showuserName = Function () {Return this.username;} console.log (obj1.showusername ()); // ghostwu

It can be called normally, but if the prototype object is rewritten, it will not be called

 Function CreateObj (Uname, UAGE) {this.username = uname; this.userage = UAGE;} Var obj1 = New CreateObj ('ghostwu', 22); CreateObj.prototy PE = {Showusername: Function () {Return this.username; }} console.log (obj1.showusername ()); //

Because after rewriting the prototype object, at the same time, it occurs before rewriting. Therefore There are quotation types on the object (prototype), and be careful, because multiple instances share the prototype object, as long as there is an instance that changes the value of the reference type, all other instances will receive the result after the change.

 Function CreateObj () {} CreateObj.prototype = {name: 'ghostwu', skills: ['php', 'javascript', 'linux']}; VAR OBJ1 = New Createobj (); o bj1.skills.push ('Python '); Var obj2 = new createObj (); console.log (obj2.skills); // ... PHP', 'Javascript', 'LINUX', 'Python'

The sharing feature of prototype can be convenient to expand some methods for some built -in objects, such as the array 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 anrr = [10, 20, 30, 30, 20, 40, 20]; console.log (arr.unique ()) ; // 10, 20, 30, 40

However, do not extend the method on the built -in objects casually. Multi -person cooperation is easy to produce coverage and pollution.

The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.