Inheritance Mechanism Instance in ECMAScript

This section uses a classic example to explain the inheritance mechanism of ECMAScript.

Inheritance Mechanism Example

The simplest way to explain the inheritance mechanism is to use a classic example - geometric shapes. In fact, there are only two types of geometric shapes, namely ellipse (which is a circle) and polygon (which has a certain number of sides). The circle is a type of ellipse, with only one focus. The Triangle, Rectangle, and Pentagon are types of polygon, with different numbers of sides. The Square is a type of Rectangle, with all sides of equal length. This constitutes a perfect inheritance relationship.

In this example, Shape is the base class (base class) of Ellipse and Polygon (all classes inherit from it). The ellipse has one attribute fociindicating the number of foci an ellipse has. The Circle (Circle) inherits from the Ellipse, so the Circle is a subclass of the Ellipse (subclass), and the Ellipse is the superclass (superclass). Similarly, the Triangle, Rectangle, and Pentagon are subclasses of Polygon, and Polygon is their superclass. Finally, the Square inherits from the Rectangle.

The best way to explain this inheritance relationship is with a diagram, which is where UML (Unified Modeling Language) comes into play. One of the main uses of UML is to visually represent complex object relationships like inheritance. The following diagram is a UML diagram that explains the relationship between Shape and its subclasses:

Inheritance Mechanism UML Diagram Instance

In UML, each box represents a class, explained by the class name. The line segments at the top of the triangle, rectangle, and pentagon converge and point to the shape, indicating that these classes are inherited from the shape. Similarly, the arrow pointing from the square to the rectangle indicates their inheritance relationship.