Objects and prototypes in JavaScript

　A prototype object

The prototype object is actually an instance object of the constructor, and there is no intrinsic difference from the normal instance object. You can include shared properties or methods for all instances of a specific type. Thus, if we need to modify the properties or methods in all instances, we just need to modify one place to affect all instances. Because the properties and methods in the prototype are shared. We can take a look at two illustrations:

constructor function mode

Prototype mode style

From the above diagram, it is not difficult to see why the following code in the "user1.show = = User2.show;" The return is ture because the Show method is shared by all objects created by the user constructor, and not each object creates a Show method.

Each JavaScript function has the prototype property, which refers to an object, which is the prototype object. When the prototype object is initialized, it is empty, and we can customize any properties and methods inside, and these methods and properties will be inherited by the object created by the constructor.

You can refer to the following code to add properties and methods to the prototype:

function User (name,age) {//constructor method    THIS.name = name;//object property    This.age = age;} User.prototype.addr = ' Hubei Wuhan ';//Add attribute User.prototype.show = function () {//In prototype) Add Method    alert (this.name+ ' | ') +this.age);    

But the question is: if we add a property to the constructor, add the property to the prototype, and add the attribute to the instance, which property is it that we are accessing? Let's look at the following code first:

function User (name,age) {//constructor method    THIS.name = name;//object property    This.age = age;    

As you can see from the code above, if we declare both object properties, prototype properties, and instance properties, the priority displayed at the time of invocation should be: Instance Properties > Object Properties > Prototype properties. This is the use of the nearest principle: when the call first find out whether the attribute is directly defined in the instance, there is a return instance property, if the instance attribute is not in the constructor to find, there is a return, if neither of the previous to the prototype object to find, if not, return undefined.

　　Two dynamic prototype modes

One might feel awkward in the code above, because the methods and properties in the prototype are not together with the object properties and methods defined in the constructor, and if they are encapsulated together it is more intuitive to use the dynamic prototype pattern if the problem is to be solved.

Dynamic prototype mode function User (name,age) {//constructor method    THIS.name = name;//Property    this.age = age;    this.addr = ' Hubei Enshi ';    User.prototype.addr = ' Hubei Wuhan ';//Add attribute    User.prototype.show = function () {//In prototype) Add Method        alert (this.name+ ' | ') +this.age+ ' | ' +THIS.ADDR);        

The code above looks more intuitive. But there are still some small problems, that is, when we create multiple instances, we recreate the method in the prototype by not creating an instance. Let's test it first:

Alert (' Start create show ... '); User.prototype.show = function () {//Add method to the prototype    alert (this.name+ ' | ') +this.age+ ' | ' +THIS.ADDR);    

If we add the above alert (), the runtime finds that no instance is created and the dialog box pops up two times. This proves the problem of re-creation mentioned above, although there is no additional space, but the time is increased because it is recreated every time.

To solve this problem, our idea is to first determine whether the Show method exists, if it does not exist, if it exists, it is not recreated. The improvement code is as follows:

if (this.show==undefined) {//If the Run method has not been created    alert (' Start create show ... ');    User.prototype.show = function () {//Add method to the prototype        alert (this.name+ ' | ') +this.age+ ' | ' +THIS.ADDR);        };    

Running discovery, no matter how many instances are created, will only pop up two dialog boxes, thus avoiding unnecessary overhead.

　　Three use literal methods to create prototypes

In addition to the above-mentioned ways of creating prototypes, we can also create them in literal form, with the following code:

Create prototype function user (Name,age) {//constructor method    THIS.name = name;//Property    This.age = age;} using literal method User.prototype = {    addr: ' Hubei Wuhan ',    show:function () {        alert (this.name+ ' | ') +this.age+ ' | ' +THIS.ADDR);    

This is to illustrate: after the use of the literal method is created, can no longer use the literal way to rewrite the prototype, once the prototype is rewritten, all the properties and methods defined in the original prototype will be erased. As follows:

Create prototype function user (Name,age) {//constructor method    THIS.name = name;//Property    This.age = age;} using literal method User.prototype = {    addr: ' Hubei Wuhan ',    show:function () {        alert (this.name+ ' | ') +this.age+ ' | ' +THIS.ADDR);    }};  Rewrite the prototype User.prototype = {Other    : ' Temporarily no description ... ',    show:function () {        alert (THIS.ADDR);        }};    

As can be seen, once we rewrite the prototype, the variables and methods defined in the starting prototype are not saved. However, we are talking about the inability to rewrite the prototype in a literal way, can we add new methods or properties? The answer is yes, for example:

This will not clear the methods and properties defined in the original prototype.

　　Iv. Summary

This article mainly introduces some basic knowledge of the prototype, which can be used to realize the sharing of methods and properties, and also to extend the methods of objects. For example, we can use the prototype method to extend the method of the built-in object string, so that it has the VB Left ()/right () function, is to achieve the interception of the character string to the right of the function.

Objects and prototypes in JavaScript