Prototype in JavaScript, which is translated as "prototype", indicates the initial form of the object. All functions in Javascript have a prototype attribute, and the prototype attribute is an object type object, all objects constructed by the function have the features of the prototype. That is to say, the constructed object can be used to directly access the properties and methods on the prototype.
The following code demonstrates how to use prototype:
The Code is as follows:
Function Staff (name ){
This. name = name;
}
Staff. prototype. say = function (){
Alert (this. name + "say hello ");
}
Var staff1 = new Staff ("hunter ");
Var staff2 = new Staff ("dangjian ");
Staff1.say ();
Staff2.say ();
Run the above program. We can see that the properties and methods on prototype can be called between created objects. More importantly, the properties and methods in prototype are shared among objects of the same type.
The Code is as follows:
Alert (staff1.say = staff2.say );
Another common feature of prototype is to build an object inheritance relationship through prototype. by assigning the base class object to the prototype of the subclass, the inheritance relationship in the object-oriented model can be simulated, this is the object-oriented mechanism of JavaScript. The following code snippet demonstrates how to use this feature to build an object's inheritance relationship:
The Code is as follows:
Function Staff (name) {// base class
This. name = name;
}
Staff. prototype. say = function (){
Alert (this. name + "say hello ");
}
Function ManStaff (name, age) {// subclass
This. name = name;
This. age = age;
}
ManStaff. prototype = new Staff (); // establishes an inheritance relationship
Var manStaff1 = new ManStaff ("hunter", 22 );
Var manStaff2 = new ManStaff ("dangjian", 32 );
ManStaff1.say ();
ManStaff2.say ();
The Running code shows that the ManStaff object has the Say method in the base class Staff. This inheritance method is implemented through the prototype chain in JavaScript. You may be familiar with the prototype usage, but as a programmer, we should not only know its usage, but also understand its internal prototype mechanism. Next we will analyze the prototype principle and prototype chain implementation.
To understand the prototype mechanism, you must understand how functions are created in JavaScript.
When the code is executed to function Staff (name) {this. name = name;} is equivalent to executing var Staff = new Function ("name", "this. name = name ") the interpreter uses the predefined Function () constructor to create a function-type object, namely, Staff.
Then add the _ proto _ attribute to the created stff object and assign the value to the prototype of the Function constructor. This step is a step in the creation process of all objects, when running a method similar to var x = new X (), the prototype of X is assigned to _ proto __of x, which is similar to the following assignment:
The Code is as follows:
Staff. _ proto _ = Function. prototype;
Next, create the prototype attribute for Staff. This step is used to create a function-type object. The creation process is as follows:
The Code is as follows:
Var o = new Object ();
O. constructor = Base;
Staff. prototype = o;
The above analysis shows that when an object is created, a private attribute _ proto __will be created. When a function is created, a prototype attribute will be created. Because Staff is a function-type object, it has both attributes.
These two attributes are the key attributes for building the prototype chain. Let's analyze how the prototype is passed when the Code var staff1 = new Staff ("hunter") is executed.
According to the above analysis, staff1. _ proto _ = Staff. prototype, while Staff. prototype is an Object created by an Object, namely, Staff. prototype. _ proto _ = Object. prototype, so staff1. _ proto __. _ proto _ points to Object. prototype, that is, staff1. _ proto __. _ proto _ = Object. prototype: This is the prototype chain. to read the attributes of an object, JS first checks whether the object itself has this attribute. If it does not, it will keep searching for this attribute along the prototype chain.
Knowing the prototype chain principle, it is easy to construct Object Inheritance in Javascript based on this principle.
From the above analysis, we can see that the top of the prototype chain is Object. prototype, which means that in the built inheritance relationship, the Object is the base class of all objects, and the following code verification can be run.
The Code is as follows:
Object. prototype. location = "China ";
Function Staff (name) {// base class
This. name = name;
}
Staff. prototype. say = function (){
Alert (this. name + "say hello ");
}
Var ManStaff1 = new Staff ("hunter ");
Var ManStaff2 = new Staff ("dangjian ");
Alert (ManStaff1.location );
Alert (ManStaff2.location );
The running result shows that the Object is the base class of the Staff, So how should we build a subclass of the Staff?
After understanding the setup principles of the above functions, we can easily write the following code:
The Code is as follows:
Function Staff (name) {// base class
This. name = name;
}
Staff. prototype. say = function (){
Alert (this. name + "say hello ");
}
Function ManStaff (name, age) {// subclass
Staff. call (this, name );
This. age = age;
}
ManStaff. prototype = new Staff (); // establishes an inheritance relationship
Var ManStaff1 = new ManStaff ("hunter", 22 );
Var ManStaff2 = new ManStaff ("dangjian", 32 );
ManStaff1.say ();
ManStaff2.say ();
ManStaff. prototype = new Staff (); the inheritance relationship is estimated as follows: ManStaff1. _ proto _ = ManStaff. prototype, ManStaff. prototype. _ proto _ = Staff. prototype, Staff. prototype. _ proto _ = Object. prototype; then ManStaff1. _ proto __. _ proto __. _ proto _ = Object. prototype.
In javascript, this inheritance relationship is loose compared with the traditional Object-oriented Inheritance relationship, and the construction method is hard to understand. However, as a script language, its function is already very powerful.
