How JavaScript works behind the prototype

"Prototype" literal translation is "prototype", is the main means of javascript implementation of inheritance. Roughly speaking: prototype is a reserved property of a function in JavaScript, and its value is an object (we can call this object "prototype object").

The object that is constructed with this function as a constructor automatically has the member properties and methods of the prototype object that owns the constructor.

Among the key points are:

1. Prototype is a required property of a function (the written point is "reserved attribute") (as long as it is functions, there must be a prototype attribute)
2. The value of prototype is an object
3. You can modify the value of the prototype property of a function arbitrarily.
4. An object automatically owns the prototype member properties and methods of the constructor for this object.

//Define a function (constructor) and define some properties and methods to inherit from an object constructed by another constructorvarfunction1=function(){     This. Name= "Function1";  This. saysomething=function() {alert ("This ' s a method of" + This. name);}//Define a method}//define a different constructorvarFunction2=function(){    }//set the prototype property of the constructor function2 to an object constructed by function1 so that the objects constructed by the function2 (and objects that were originally not of any properties and methods) have function1 properties and methods Function2.prototype=Newfunction1 ();varobj1=Newfunction1 ();//Obj1 Originally what member also did not have, many get prototype mechanism, is it has the property and method of Function1 object that enjoys a free ride. Obj1.saysomething ();

Of course, the above example is far from the "inheritance" actually used, but it also embodies the meaning of inheritance: An object has properties and methods of another object. (as the son has his father's blood type and temper, humans inherit the animal instinct such as eating and fighting, etc.)

The above section probably elaborated the prototype concept and the function, but this alone does not have enough to prototype to deepen the understanding. Now let's look at how prototype works behind the scenes:

Let's take a look at the process of creating an object in new form:

// create an object with Func () as a constructor obj var obj=New func ();

The process is this: the JavaScript engine first encounters the keyword new, immediately opens up a piece of memory, creates an empty object (and points this to the object), and then executes the constructor func () to construct the empty object ( What properties and methods are included in the constructor are all assembled for this blank object, which is why the constructor is called a constructor.

In fact, there is one thing between the new and the execution constructor that the engine does not explicitly tell us, but secretly does, which is to give the empty object to the prototype object.

It is important to mention here that a thing as prototype as the system is reserved and equally significant: __proto__

__proto__ is a built-in property that an object automatically owns (note: prototype is a built-in property of a function, __proto__ is a built-in property of an object, but they end up pointing to the same object, which is the object used to inherit). With Chrome and FF, you can access the __proto__ property of an object, IE cannot.

It is the __proto__ of an object that refers to the prototype object to the constructor of the object, so that the object knows the prototype object of its constructor and has the properties and methods of the prototype object.

So the Var obj=new func () process is more specific:

1. When the JavaScript parsing engine encounters new, it opens up a piece of memory and creates an empty object, and "This" points to the empty object
2. The JavaScript parsing engine points The empty object's __proto__ to the constructor's default prototype object that follows it (one point to the prototype object, the parsing engine knows "Oh, This object will have the properties and methods of this prototype object ")
3. The JavaScript parsing engine executes the code in the constructor body, and it formally begins the process of constructing (or assembling) the empty object (this.name= "xxx", this.sayhello=function () {...} And so on
4. The object is constructed and assigned to the variable to the left of the equals sign.

How JavaScript works behind the prototype