Introduction to the implementation of the JavaScript Inheritance Mechanism

Object impersonating method implementation:

[Javascript]
Function Human () {<span style = "white-space: pre"> </span> // defines the Human class
This. species = "Human ";
}
Function Sex (sex) {<span style = "white-space: pre"> </span> // defines the Sex class
This. sex = sex;
}
Function Chinese (name, sex ){
This. name = name;
This. newMethod1 = Human; // object impersonate, pointing to the Human object
This. newMethod1 (); // call the method to implement inheritance
Delete this. newMethod1; // delete the reference of this object to avoid calling errors.

This. newMethod2 = Sex; // object impersonate, pointing to Sex object
This. newMethod2 (sex); // call the method to implement inheritance
Delete this. newMethod2; // delete the reference of this object to avoid calling errors.
}
Var chin1 = new Chinese ("James", "Male ");
Function Human () {<span style = "white-space: pre"> </span> // defines the Human class
This. species = "Human ";
}
Function Sex (sex) {<span style = "white-space: pre"> </span> // defines the Sex class
This. sex = sex;
}
Function Chinese (name, sex ){
This. name = name;
This. newMethod1 = Human; // object impersonate, pointing to the Human object
This. newMethod1 (); // call the method to implement inheritance
Delete this. newMethod1; // delete the reference of this object to avoid calling errors.
 
This. newMethod2 = Sex; // object impersonate, pointing to Sex object
This. newMethod2 (sex); // call the method to implement inheritance
Delete this. newMethod2; // delete the reference of this object to avoid calling errors.
}
Var chin1 = new Chinese ("James", "Male ");

 

The object impersonating method is simple and easy to understand. The principle is to use the method call to implement attribute definition in the function.

In addition, object impersonation can implement multi-inheritance, but it is not a good place.

As follows:

[Javascript]
<Script type = "text/javascript">
Function Human () {<span style = "white-space: pre"> </span> // defines the Human class
This. species = "Human ";
}
Function Sex (sex) {<span style = "white-space: pre"> </span> // defines the Sex class
This. sex = sex;
This. species = "Animal"; // The species attribute of the Human class is replaced by the call sequence.
}
Function Chinese (name, sex ){
This. name = name;
This. newMethod1 = Human; // object impersonate, pointing to the Human object
This. newMethod1 (); // call the method to implement inheritance
Delete this. newMethod1; // delete the reference of this object to avoid calling errors.

This. newMethod2 = Sex; // object impersonate, pointing to Sex object
This. newMethod2 (sex); // call the method to implement inheritance
Delete this. newMethod2; // delete the reference of this object to avoid calling errors.
}
Var chin1 = new Chinese ("James", "Male ");
<Script type = "text/javascript">
Function Human () {<span style = "white-space: pre"> </span> // defines the Human class
This. species = "Human ";
}
Function Sex (sex) {<span style = "white-space: pre"> </span> // defines the Sex class
This. sex = sex;
This. species = "Animal"; // The species attribute of the Human class is replaced by the call sequence.
}
Function Chinese (name, sex ){
This. name = name;
This. newMethod1 = Human; // object impersonate, pointing to the Human object
This. newMethod1 (); // call the method to implement inheritance
Delete this. newMethod1; // delete the reference of this object to avoid calling errors.
 
This. newMethod2 = Sex; // object impersonate, pointing to Sex object
This. newMethod2 (sex); // call the method to implement inheritance
Delete this. newMethod2; // delete the reference of this object to avoid calling errors.
}
Var chin1 = new Chinese ("James", "Male ");

 

This is because the function is called to "inherit". If the parent class has an attribute of the same name when multiple inheritance occurs, it will be replaced by a higher priority.

For example, in the code above, the Sex class replaces the property of the same name of the Human class.

 

You can also use the call () and apply () methods to implement inheritance,

In fact, the principle is the same as that of object impersonating.

[Javascript]
Function Human () {// defines the Human class
This. species = "Human ";
}
Function Sex {// defines the sex class
This. sex = sex;
}
Function Chinese (name, sex ){
This. name = name;
Human. call (this); <span style = "white-space: pre"> </span> // call () method
Sex. apply (this, [sex]); <span style = "white-space: pre"> </span> // apply () method
}
Var chin1 = new Chinese ("James", "Male ");
Function Human () {// defines the Human class
This. species = "Human ";
}
Function Sex {// defines the sex class
This. sex = sex;
}
Function Chinese (name, sex ){
This. name = name;
Human. call (this); <span style = "white-space: pre"> </span> // call () method
Sex. apply (this, [sex]); <span style = "white-space: pre"> </span> // apply () method
}
Var chin1 = new Chinese ("James", "Male ");
Here is an introduction to the call () and apply () Methods: http://www.w3school.com.cn/js/pro_js_inheritance_implementing.asp

In fact, the biggest problem with object impersonating is that the inherited parent class cannot be found through subclass.

Therefore, this is not an inheritance of the true meaning.

[Javascript]
Chin1 instanceof Chinese; <span style = "white-space: pre"> </span> // true
Chin1 instanceof Human; <span style = "white-space: pre"> </span> // false
Chin1 instanceof Sex; <span style = "white-space: pre"> </span> // false
Chin1 instanceof Chinese; <span style = "white-space: pre"> </span> // true
Chin1 instanceof Human; <span style = "white-space: pre"> </span> // false
Chin1 instanceof Sex; <span style = "white-space: pre"> </span> // false

 

When the inherited parent class has a defined method, each defined object will generate a corresponding method, which is a waste of memory and difficult to manage.

[Javascript]
Function Human () {// defines the Human class
This. species = "Human ";
This. fun = function (){};
}
Function Sex {// defines the sex class
This. sex = sex;
}
Function Chinese (name, sex ){
This. name = name;
Human. call (this); // call () method
Sex. apply (this, [sex]); // apply () method
}
Var chin1 = new Chinese ("James", "Male ");
Var chin2 = new Chinese ("Xiaohong", "Female ");
Chin1.fun === chin2.fun; // false
Function Human () {// defines the Human class
This. species = "Human ";
This. fun = function (){};
}
Function Sex {// defines the sex class
This. sex = sex;
}
Function Chinese (name, sex ){
This. name = name;
Human. call (this); // call () method
Sex. apply (this, [sex]); // apply () method
}
Var chin1 = new Chinese ("James", "Male ");
Var chin2 = new Chinese ("Xiaohong", "Female ");
Chin1.fun === chin2.fun; // false

 

Therefore, prototype is discussed below ).
[Javascript]
Function Human () {// defines the Human class
This. species = "Human ";
}
Function Chinese (name ){
This. name = name;
}
Chinese. prototype = new Human (); // The prototype object points to the Human class.
Chinese. prototype. constructor = Chinese; // constructor indicates its constructor.
Var chin1 = new Chinese ("James ");
Chin1 instanceof Chinese; // true
Chin1 instanceof Human; // true
Function Human () {// defines the Human class
This. species = "Human ";
}
Function Chinese (name ){
This. name = name;
}
Chinese. prototype = new Human (); // The prototype object points to the Human class.
Chinese. prototype. constructor = Chinese; // constructor indicates its constructor.
Var chin1 = new Chinese ("James ");
Chin1 instanceof Chinese; // true
Chin1 instanceof Human; // true
In this way, inheritance is realized in the true sense.

This method is not intuitive enough compared to the object impersonating method.

But it also solves the problem of repeatedly Generating functions.

 

Finally, the prototype inheritance implementation is simply encapsulated:

[Javascript]
Object. prototype. extendTo = function (parent ){
This. prototype = new parent ();
This. prototype. constructor = this;
This. uber = parent. prototype;
}
 
Function Human () {// defines the Human class
This. species = "Human ";
This. fun = function (){
Return 0;
};
}
 
Function Chinese (name ){
This. name = name;
}
 
Chinese. extendTo (Human); // implement inheritance.
 
Var chin1 = new Chinese ("James ");
Object. prototype. extendTo = function (parent ){
This. prototype = new parent ();
This. prototype. constructor = this;
This. uber = parent. prototype;
}

Function Human () {// defines the Human class
This. species = "Human ";
This. fun = function (){
Return 0;
};
}

Function Chinese (name ){
This. name = name;
}

Chinese. extendTo (Human); // implement inheritance.

Var chin1 = new Chinese ("James ");

Excerpt from jian sheng's code Memorandum