Detailed JavaScript based on object-oriented inheritance _javascript skills

The object inheritance mechanism of the physiognomy
This example uses UML to explain the inheritance mechanism well.
The simplest way to illustrate inheritance is to use a classic example of a geometric shape. In fact, there are only two types of geometry, namely, ellipses (rounded) and polygons (with a certain number of edges). A circle is a kind of ellipse, it has only one focus. Triangles, rectangles, and Pentagon are all polygons, with different numbers of edges. A square is a kind of rectangle, all sides equal length. This constitutes a perfect inheritance relationship, which is a good explanation of the object-oriented inheritance mechanism.
In this example, the shape is the base class of the Ellipse and the polygon (usually we can also call it the parent class, and all classes inherit from it). An ellipse has a genus (foci) that describes the number of focal points that an ellipse has. The circle inherits the ellipse, so the circle is a subclass of the ellipse, and the ellipse is a round super class. Similarly, triangles, rectangles, and Pentagon are subclasses of polygons, and polygons are their super classes. Finally, the square inherits the rectangle.
It's best to use diagrams to explain this inheritance relationship, which is where UML (Unified Modeling Language) comes in. One of the main uses of UML is to visually represent complex object relationships such as inheritance. The following diagram shows a UML diagram that explains the relationship between a shape and its subclasses:

In UML, each box represents a class, described by the class name. The triangles, rectangles, and line segments at the top of the Pentagon together, pointing to shapes, indicating that these classes are inherited by shapes. Similarly, the arrows pointing to the rectangle from the square illustrate the inheritance relationship between them.
Second, the realization of ECMAScript inheritance mechanism
To implement the inheritance mechanism with ECMAScript, you can start with the base class that you want to inherit. All developer-defined classes are available as base classes. For security reasons, local classes and host classes cannot be base classes, which prevents public access to compiled browser-level code because the code can be used for malicious attacks.
Once you have selected a base class, you can create its subclasses. It is entirely up to you to decide whether to use the base class. Sometimes, you might want to create a base class that you can't use directly, it's just for providing a generic function to a subclass. In this case, the base class is treated as an abstract class. Although ECMAScript does not define abstract classes as rigorously as other languages, it does sometimes create classes that are not allowed to be used. Typically, we call this class an abstract class.
The subclass you create inherits all of the properties and methods of the superclass, including the constructor and the implementation of the method. Remember that all properties and methods are public, so subclasses can access these methods directly. Subclasses can also add new properties and methods that are not in the superclass, or override properties and methods of the superclass. Since JS is not an orthodox object-oriented language, some nouns also need to be changed.
Iii. the way of ECMAScript inheritance
The classes (base classes) that are inherited in the ECMAScript language are called super types, and subclasses (or derived classes) are called subtypes. As with other features, ECMAScript implements inheritance in more than one way. This is because the inheritance mechanism in JavaScript is not explicitly defined, but is done by imitation. This means that all the details of the inheritance are not handled entirely by the interpreter. As a developer, you have the right to decide the most appropriate way to inherit. Here are some specific ways to inherit.
(1) prototype chain mode
This form of inheritance was originally used for the prototype chain in ECMAScript. The previous blog post has described how to create objects in a prototype manner. The prototype chain extends this way and implements inheritance in an interesting way. The prototype object is a template, and the object to instantiate is based on this template. In summary, any properties and methods of the prototype object are passed to all instances of that class. The prototype chain uses this function to implement the inheritance mechanism. Let's take a look at an example:

function A () {///super Type A must have no parameters 
 This.color = "Red"; 
 This.showcolor = function () {return 
  this.color; 
 } 
;}; Function B () {//subtype B 
 this.name = "John"; 
 This.showname = function () {return 
  this.name; 
 } 
;}; B.prototype = new A ();//subtype B inherits the super Type A, through the prototype, to form the chain 
var a = new A (); 
var B = new B (); 
document.write (A.showcolor ());//output: Blue 
document.write (B.showcolor ());//output: Red 
document.write ( B.showname ());//output: John 

In the prototype chain, the instanceof operator operates in a unique way. For all instances of B, instanceof A and B return true. This is an extremely useful tool in the weakly typed world of ECMAScript, but it cannot be used when the object is impersonating. For example:

var B = new B (); 
document.write (b instanceof A);/output: True 
document.write (b instanceof B);//output: True 

Inheritance is implemented using a prototype chain, but it cannot be shared and subtypes can pass arguments to the superclass. We can solve both of these problems by using the constructor method (that is, the impersonation).
(2) object posing mode
The principle of object impersonation is as follows: The constructor uses the This keyword to assign values to all properties and methods (that is, to take the constructor method declared by the object). Because a constructor is just a function, you can make a constructor a method of B, and then call it. b receives the properties and methods defined in the constructor of a. For example, rewrite the example above to create objects A and B in the following way:
Call () method

function A (color) {//Create super Type a 
 this.color = color; 
 This.showcolor = function () {return 
   this.color; 
 } 
;}; Function B (color,name) {//create subtype B 
 A.call (this, Color);//object impersonate, give super type parameters 
 THIS.name = name;//newly added properties 
 This.showname = 
}; 
var a = new A ("Blue"); 
var B = new B ("Red", "John"); 
document.write (A.showcolor ());//output: Blue 
document.write (B.showcolor ());//output: Red 
document.write ( B.showname ());//output: John 

The only difference between the

apply () method
and the call () method above is the code in subtype B:
A.call (this,arguments);//object impersonate, pass to super type  
      of course, parameter objects can be passed only when the order of the parameters in the superclass is exactly the same as the order of the parameters in the subtype. If not, you must create a separate array and place the parameters in the correct order.
      Using object Impersonation Although it solves the problem of sharing and reference, but there is no prototype, reuse is even more impossible, so we combine the above two ways, that is, the prototype chain mode and object pseudo way to achieve JS inheritance.
(3) Blending
      This inheritance uses constructors to define classes, not using any prototypes. The main problem with object impersonation is that you must use the constructor method, which is not the best choice. However, if you use a prototype chain, you cannot use a constructor with parameters. How do developers choose? The answer is simple, both are used. The instanceof operator still works correctly because the prototype chain is used in this blending mode.
       in the previous article, the best way to create an object is to define the attribute with a constructor and define the method with the stereotype. This approach also applies to inheritance mechanisms, using objects to impersonate inherited constructor properties, and using a prototype chain to inherit prototype objects. Rewrite the previous example in both ways, and the code is as follows:

function A (color) { 
 This.color = color; 
}; 
A.prototype.showcolor = function () {return 
 this.color; 
}; 
function B (color, Name) { 
 A.call (this, color);//object impersonate 
 this.name = Name; 
B.prototype = new A (),//using A prototype chain to inherit 
b.prototype.showname = function () {return 
 this.name; 
}; 
var a = new A ("Blue"); 
var B = new B ("Red", "John"); 
document.write (A.showcolor ());//output: Blue 
document.write (B.showcolor ());//output: Red 
document.write ( B.showname ());//output: John 

Inheritance is linked to the way in which objects are created, and it is recommended that the inheritance approach be used when the prototype chain and the object are pseudo mixed mode. You can avoid unnecessary problems by using this blending method.
When you look at this article, you have to look at the way you created the object before: Explain JavaScript based object-oriented object creation (1) and detailed explanation JavaScript is based on object-oriented object creation (2).

The above is the entire content of this article, I hope to help you learn.