Javascript inheritance implementation example

1. Create a base class

First, consider the Polygon class. Which attributes and methods are required? First, you must know the number of edges of a polygon. Therefore, you should add the integer attribute sides. What else is required for polygon? If you want to know the area of a polygon, add the calculated Area Method getArea (). Figure 4-3 shows the UML representation of the class.

Figure 4-3

In UML, attributes are represented by the attribute name and type, and are located in the unit next to the class name. The method is located under the property, indicating the type of the method name and return value.

In ECMAScript, you can write classes as follows:

Note that the Polygon class is not accurate enough and cannot be used. The getArea () method returns 0 because it is only a placeholder so that the subclass can overwrite it.

2. Create a subclass

Now we want to create a Triangle class. A triangle has three sides. Therefore, this class must overwrite the sides attribute of the Polygon class and set it to 3. The getArea () method is also overwritten, And the triangle area formula is used, that is, 1/2 × bottom × height. But how can we get a high value? The base attribute and height attribute must be created. The UML representation of the Triangle class is 4-4.

This figure only shows the new attributes of the Triangle class and the methods that have been overwritten. If the Triangle class does not overwrite the getArea () method, it is not listed in the figure. It will be treated as a method reserved from the Polygon class. The complete UML diagram also shows the relationship between the Polygon and Triangle classes (Figure 4-5) to make it clearer.

In UML, the inherited attributes and methods are never repeatedly displayed unless the method is overwritten (or overloaded, which is impossible in ECMAScript ).

The code of the Triangle class is as follows:

Note that although the Polygon constructor only accepts one sides parameter, the Triangle constructor accepts two parameters, namely base and height. This is because the number of sides of a triangle is known and developers do not want to change it. Therefore, when an object is impersonated, 3 is passed as the number of edges of the object to the constructor of Polygon. Then, assign the base and height values to the appropriate attributes.

After the prototype chain inheritance method is used, Triangle will overwrite the getArea () method and provide custom calculation for the Triangle Area.

The last class is Rectangle, which also inherits Polygon. A rectangle has four sides. The area is calculated by length x width. The length and width are required for this class. In the preceding UML diagram, the Rectangle class should be placed next to the Triangle class because its superclass are all Polygon (4-6 ).

Figure 4-6

The ECMAScript code of Rectangle is as follows:

Note that the Rectangle constructor does not take sides as the parameter. Similarly, constant 4 is directly transmitted to the Polygon constructor. Similar to Triangle, Rectangle introduces two new attributes used as parameters of the constructor and overwrites the getArea () method.

3. Test code

Run the following code to test the Code created for this example:

This Code creates a triangle with a base of 12 and a height of 4. It also creates a rectangle with a length of 22 and a width of 10. Then, the number of edges and area of each shape are output to verify that the value of the sides attribute is correct. The getArea () method returns the correct value. The area of the triangle should be 24, and the area of the rectangle should be 220.

4. What is the dynamic prototype method?

In the previous example, an object-defined hybrid constructor/prototype is used to demonstrate the Inheritance Mechanism. Can Dynamic Prototype be used to implement the inheritance mechanism? No.

The reason why the inheritance mechanism cannot be dynamic is the unique nature of prototype objects. Check the following code (this code is incorrect, but it is worth studying ):

The above code shows the Polygon and Triangle classes defined using dynamic prototypes. The error lies in the highlighted code for setting the Triangle. prototype attribute. Logically, this position is correct, but it is not functional. Technically, before code execution, the object has been instantiated and associated with the original prototype object. Although the modification to the prototype object can be correctly reflected by late binding, replacing the prototype object will not affect the object. Only future object instances will reflect this change, which makes the first instance incorrect.

To correctly use the dynamic prototype to implement the Inheritance Mechanism, you must assign a new prototype object outside the constructor, as shown below:

This code is valid because prototype objects are assigned a value before any object is instantiated. Unfortunately, this means that the Code cannot be fully encapsulated in the constructor, and this is the main idea of the dynamic prototype.