Analysis of JavaScript Inheritance Method (1)

Some time ago, I wrote the JavaScript writing method. From this point on, let's look at the Inheritance Method of JavaScript.

Most object-oriented languages Support inheritance. The most important advantage of inheritance is code reuse to build large-scale software systems. If a class can reuse the attributes and methods of another class, it is called inheritance. From this perspective, let's look at the JS inheritance method. The Inheritance Method in JS is closely related to the writing method. Different writing methods lead to different inheritance methods. The inheritance methods for various popular JavaScript libraries are also different. Start with the simplest reuse.

1. Write a class by using the constructor. Copy the attributes/fields of the parent class to the subclass for inheritance.

Here, the parent class and child classes are written in the constructor mode, and no prototype is required. The subclass calls the parent class function to copy the attributes of the parent class.

 
 

  
  
/**
  
  
* Parent Polygon: Polygon
  
  
* @ Param {Object} sides
  
  
*/
  
  
Function Polygon (sides ){
  
  
This. sides = sides;
  
  
This. setSides = function (s) {this. sides = s ;}
  
  
}
  
  
 
  
  
/**
  
  
* Subclass Triangle: Triangle
  
  
*/
  
  
Function Triangle (){
  
  
This. tempfun = Polygon; // a property of tempfun assigned to the subclass by the parent class reference
  
  
This. tempfun (3); // call
  
  
Delete this. tempfun; // delete this attribute
  
  
This. getArea = function (){};
  
  
}
  
  
 
  
  
// New objects
  
  
Var tri = new Triangle ();
  
  
Console. log (tri. sides); // inherited attributes
  
  
Console. log (tri. setSides); // The inherited method.
  
  
Console. log (tri. getArea); // Method
  
  
 
  
  
// The disadvantage is that it is false when instanceof is used as the parent class Polygon for the Triangle instance object.
  
  
Console. log (tri instanceof Triangle); // true
  
  
Console. log (tri instanceof Polygon); // false
 
 

Because JavaScript has multiple calling methods for the name function, subclasses can also implement the following methods. The method for calling the parent class in the subclass is different.

 
 

  
  
Function Triangle (){
  
  
Polygon. call (this, 3); // call the parent class
  
  
This. getArea = function (){};
  
  
}
  
  
Function Triangle (){
  
  
Polygon. apply (this, [3]); // use the apply method to call the parent class
  
  
This. getArea = function (){};
  
  
}
  
  
Function Triangle (){
  
  
Var temp = new Polygon (3); // The new method calls the parent class
  
  
For (recognition in temp) {// copy all to the subclass
  
  
This [recognition] = temp [recognition];
  
  
}
  
  
This. getArea = function (){};
  
  
}
 
 

The disadvantage of this method is that it is always false when the subclass instance object uses instanceof to check the parent class. This is against the inheritance of "is a" in java.

2. Prototype writing class, prototype inheritance

Core JS's own object system is inherited by prototype based. Or core JS does not use a common class-based system, but uses prototype inheritance to implement its own object system. In our work, we can also use prototype to implement inheritance, and code reuse is used to build our own functional modules.

 
 

  
  
/**
  
  
* Parent Polygon: Polygon
  
  
*
  
  
*/
  
  
Function Polygon (){}
  
  
Polygon. prototype. sides = 0;
  
  
Polygon. prototype. setSides = function (s) {this. sides = s ;}
  
  
 
  
  
/**
  
  
* Subclass Triangle: Triangle
  
  
*/
  
  
Function Triangle (){}
  
  
Triangle. prototype = new Polygon (); // This is the key to prototype inheritance.
  
  
Triangle. prototype. getArea = function (){}
  
  
 
  
  
// New objects
  
  
Var tri = new Triangle ();
  
  
Console. log (tri. sides); // inherited attributes
  
  
Console. log (tri. setSides); // The inherited method.
  
  
Console. log (tri. getArea); // self-owned Method
  
  
 
  
  
// Instanceof Test
  
  
Console. log (tri instanceof Triangle); // true, indicating that the object is a Triangle
  
  
Console. log (tri instanceof Polygon); // true, indicating that the triangle is also a Polygon
 
 

Although the output shows that the subclass inherits the property sides and method setSides of the parent class Polygon, but the sides is 0, how can it be a triangle. You have to call tri. setSides (3) to make it a triangle. This seems inconvenient. Parameters cannot be passed, which is the disadvantage of prototype. The advantage is that the "is a" relationship is correctly maintained.

3. Composite constructor/prototype writing class, inherited using the previous method

In this way, the attributes of the parent class are all attached to the constructor, and the methods are all attached to the prototype.

 
 

  
  
/**
  
  
* Parent Polygon: Polygon
  
  
*/
  
  
Function Polygon (sides ){
  
  
This. sides = sides;
  
  
}
  
  
Polygon. prototype. setSides = function (s) {this. sides = s ;}
  
  
 
  
  
/**
  
  
* Triangle
  
  
* @ Param {Object} base
  
  
* @ Param {Object} height
  
  
*/
  
  
Function Triangle (base, height ){
  
  
Polygon. call (this, 3); // copy the attributes of the parent class to yourself.
  
  
This. base = base;
  
  
This. height = height;
  
  
}
  
  
Triangle. prototype = new Polygon (); // copy the parent class method to yourself.
  
  
 
  
  
Triangle. prototype. getArea = function () {// finally define your own Method
  
  
Return this. base * this. height/2;
  
  
}
  
  
 
  
  
// New objects
  
  
Var tri = new Triangle (12, 4 );
  
  
Console. log (tri. sides); // inherited attributes
  
  
Console. log (tri. setSides); // The inherited method.
  
  
Console. log (tri. base); // attributes
  
  
Console. log (tri. height); // attributes
  
  
Console. log (tri. getArea); // self-owned Method
  
  
 
  
  
// Instanceof test, indicating that the "is a" relationship is correctly maintained
  
  
Console. log (tri instanceof Triangle); // true, indicating that the object is a Triangle
  
  
Console. log (tri instanceof Polygon); // true, indicating that the triangle is also a Polygon