Object-oriented JavaScript-inheritance through prototype

How to Use prototype

Prototype is the basic method for implementing Object Inheritance in Javascript. The usage is [function]. Prototype = [object1].

[Function] can be considered to be equivalent to Type/class, so that all objects of this type can inherit all the public attributes and methods in [object1. Public indicates that this. XXX is used.

First look at the following example

View code

FunctionPerson (){
This. Fullname = "unknown ";
This. Sex = "male ";
This. Speek =Function(){
Console. Log (This. Fullname + "is speeking ");
}
}
FunctionStaff (){
This. ID = 1001;
This. Title = "Developer ";
}
 

Staff. Prototype =NewPerson ();

VaRS1 =NewStaff ();
Console. Log (s1.sex );//==> Male
S1.speek ();//==> Unknown is speeking
 

* Note: The console. Log results can be viewed in the console (console) of the browser developer tool/firebug.

By specifying staff. Prototype = new person (), the staff type object S1 obtains the attributes and methods of the person.

Prototype principles and implementation methods

Most JavaScript objects have original objects. The application of these prototype objects forms a "prototype chain", and the end of the chain is object. prototype. When a property or method of an object is called, The JS engine looks for it in the current object. If it cannot be found, it searches for its prototype object until it reaches object. prototype. Methods such as tostring and valueof are well-known and defined in object. Prototype. Therefore, all JS objects obtain these methods through inheritance.

In Chrome and Firefox, the prototype object can be accessed through the object's property "_ PROTO _", which actually points to the corresponding type of "prototype" attribute, that is, [object]. _ PROTO _ = [function]. prototype.

If no inheritance state is specified, each object has a default _ PROTO _ object, and the previous prototype of the _ PROTO _ object is object. prototype.

 

After the specified staff inherits from person, the __proto _ attribute directs to personobj, and the prototype chain also changes.

 

Support constructors with Parameters

InCodeIn this example, the constructor has parameters.

View code

  function  person (fullname, sex) {
  This . fullname = fullname | "unknown"; 
  This . sex = sex | "male"; 
  This . speek =  function  () {
 console. log ( This . fullname + "is speeking"); 
}< BR >}< br>  function  staff (ID, title, fullname, sex) {
  This . id = ID | 1001; 
  This . title = title | "Developer"; 
}< br> staff. prototype =  New  person (); 
  var  S1 =  New  staff (99," manager "," Eva ", "female"); 
 console. log (s1.fullname); ///  => unknown  

It is found that (...) You cannot assign values to fullname and sex because the parameters are not passed to the person constructor when the inheritance relationship is specified. To solve this problem, you need to pass the parameter to person in staff. The answer is to change the _ prop _ attribute.

View code

 
FunctionPerson (fullname, sex ){
This. Fullname = fullname | "unknown ";
This. Sex = sex | "male ";
This. Speek =Function(){
Console. Log (This. Fullname + "is speeking ");
}
}
FunctionStaff (ID, title, fullname, sex ){
If(This. _ PROTO __){//For Firefox, chrome
 

This. _ PROTO _ =NewPerson (fullname, sex );

 
}Else{//For IE
 

Person. Call (This, Fullname, sex );

}
This. ID = ID | 1001;
This. Title = title | "Developer ";
}
Staff. Prototype =NewPerson ();
VaRS1 =NewStaff (99, "manager", "Eva", "female ");
Console. Log (s1.fullname );//==> Eva
 

IE does not support the _ prop _ attribute. You can use the call/apply method. This method will call the person () method with parameters and use this as person () the current object of the method.

This method is supported by all browsers, so you can use call/apply directly. The preceding example only describes the role of the _ PROTO _ attribute.