On the constructor and prototype in JS

========================================================================

In the learning of JS object-oriented process, has been constructor and prototype feel very confused, read some blogs and books, feel oneself to understand, now record as follows:

We all know that in JS there is a function of things. Generally people call it function. For example, the following code

function Person (name)   {     alert (name);   }   Person (' JS '); // JS  

In the above code, the person's performance is really no different from the normal function, and then look at the following code

 function   person (name) { this . Name=name;  function   () {alert ( this  .name);   }   };  var  one=new  person (' JavaScript '   ); One.showme ();  // javascript  

Many people see a long-lost new operator, so called the person as "class", but there is no keyword class appears, feel called "class" a little reluctant. The second step is to ask the person to be the constructor of the class. None of these concepts seem to be wrong, and the reason for this is probably because everyone has learned the traditional object-oriented language (C++,c#,java, etc.) and a mindset. To make JavaScript object-oriented, find the shadow in JavaScript with the traditional object-oriented language. But according to JavaScript, the person defined by function is an object, and it is a very special object, and there is an important difference between the object defined by the function and the object generated using the new operator. The difference is that the function-defined object has a prototype property, and the object generated with new does not have this prototype property .

The prototype attribute also points to a prototype object , noting that the prototype property and the prototype object are two different things, be aware of the difference. There is another constructor property in the prototype object, and this constructor property also points to a constructor object , And this constructor object is exactly the function itself.

A little dizzy, see:

Don't believe you can look at the following code:

functionPerson (name) { This. name=name;  This. showme=function() {alert ( This. Name);     }   }; varOne=NewPerson (' JS '); Alert (One.prototype)//undefinedAlerttypeofPerson.prototype);//Objectalert (Person.prototype.constructor);//function Person (name) {...}; 

The above code proves that the one object does not have a prototype attribute.

Let's look at the code:

functionPerson (name) { This. name=name;  This. showme=function() {alert ( This. Name);     }   }; Person.prototype.from=function() {alert (' I come from prototype. '); }     varOne=NewPerson (' JS '); One.showme ();//JS, there's nothing strange about this result.One.from ();//I come from prototype. It's a little weird.

To explain this result, we need to study the new operator carefully. Var one=new person (' JS '); The process of executing this statement can be divided into the following statements:

var one={};   Person.call (one,' JS ');  

The process of creating an object in new form can actually be divided into three steps, according to the book of "Enlightened JavaScript":

The first step is to create a new object (called a bar);

The second step is to set the prototype object (A) built into the constructor (that is, person) the prototype object referenced by the prototype property;

The third step is to use the object (A) as the This parameter to call the constructor (that is, person), to complete the initialization of the member settings.

In the second step there is a term that is built-in prototype object, note that this term is not the same as the prototype object, in order to distinguish I call it inobj,inobj point to the function person's prototype object. any property or function that appears in the prototype object of person can be used directly in the one object, which is the prototype inheritance in JavaScript .

It's dizzy again, right!

This allows the one object to directly access any of the properties and methods in the person's prototype object through the built-in prototype object inobj. This also explains why one has access to the form function in the code above. Because there is a constructor attribute in the prototype object, one can also access the constructor property directly.

functionPerson (name) { This. name=name;  This. showme=function() {alert ( This. Name);     }   }; Person.prototype.from=function() {alert (' I come from prototype. '); }     varOne=NewPerson (' JS '); One.showme ();//JS, there's nothing strange about this result.One.from ();//I come from prototype. It's a little weird.alert (one.constructor);//function Person (name) {...} alert (Person.prototype.constructor);//function Person (name) {...} 

And then see how inheritance is implemented.

functionPerson (name) { This. name=name;  This. showme=function() {alert ( This. Name);     }   }; Person.prototype.from=function() {alert (' I come from prototype. '); }     functionSubperson () {} Subperson.prototype=NewPerson (); varSubone=NewSubperson (); Subone.from ();//I come from prototype. alert (subone.constructor);//function Person (name) {...}; alert (SubPerson.prototype.constructor);//function Person (name) {...}; 

The implementation of inheritance is simple, just set the prototype of the class to be an (instantiated) object of the parent class. Note that this is the object! So what is the principle of implementing inheritance through the prototype attribute? Read the graphical description first, and then write the code to verify it.

Note: The red box is where the handle class is linked to the parent class. This is supposed to be the legendary prototype chain. The code below is validated.

functionPerson (name) { This. name=name;  This. showme=function() {alert ( This. Name);     }   }; Person.prototype.from=function() {alert (' I come from prototype. '); }   varFather=NewPerson (' JS ');//in order to demonstrate the use of the ShowMe method, the JS parameter is used, the actual use of the parameter-freealert (father.constructor);//view the constructor, as a result: function person (name) {...}; functionSubper () {} Subper.prototype=father;//Watch this .Subper.prototype.constructor=Subper; varson=NewSubper (); Son.showme ();//JSSon.from ();//I come from prototype. alert (father.constructor);//function Subper () {...} alert (son.constructor);//function Subper () {...} alert (SubPer.prototype.constructor);//function Subper () {...} 

According to the prototype chain, and the result of the code, I think we should understand why using prototype can achieve

JS in the inheritance of it.