Javascript Inheritance Implementation Example _javascript tips

1. Create a base class

First consider the Polygon class. What properties and methods are required? First, be sure to know the number of edges of the polygon, so you should add the integer attribute sides. What else is required for polygons? Perhaps you want to know the area of the polygon, then add the method of calculating the area Getarea (). Figure 4-3 shows the UML representation of the class.

Figure 4-3

In UML, a property is represented by a property name and a type, in a cell immediately below the class name. Method is below the property to describe the method name and the type of the return value.

In ECMAScript, you can write the following classes:

Note that the Polygon class is not detailed enough to be used, and method Getarea () returns 0 because it is just a placeholder for subclasses to overwrite.

2. Create subclasses

Now consider creating a triangle class. The triangle has three edges, so this class must overwrite the sides property of the polygon class and set it to 3. Also cover the Getarea () method, using the triangle's area formula, that is, the 1/2x bottom x height. But how do you get a bottom and a high value? You need to enter these two values specifically, so you must create the base and Height properties. The UML representation of the Triangle class is shown in Figure 4-4.

The figure shows only the new attributes of the Triangle class and the overridden method. If the triangle class does not overwrite the Getarea () method, it will not be listed in the diagram. It will be seen as a way to preserve it 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, inherited properties and methods are never repeated, unless the method is overwritten (or overloaded, which is not possible in ECMAScript).

The code for the Triangle class is as follows:

Note that although the Polygon constructor accepts only one parameter Sides,triangle class's constructor, it accepts two parameters, namely base and height. This is because the edges of the triangles are known and do not want the developer to change it. Therefore, when using an object to impersonate, 3 is passed to the Polygon constructor as the number of edges of the object. Then, assign the values of base and height to the appropriate properties.

After using the prototype chain to inherit the method, triangle will cover the Getarea () method and provide a customized calculation for the triangular area.

The last class is rectangle, which also inherits Polygon. The rectangle has four edges, the area is computed with length x width, and the length and width become the required property for that class. In the previous UML diagram, you would populate the rectangle class with the Triangle class, because their superclass is polygon (as shown in Figure 4-6).

Figure 4-6

Rectangle's ECMAScript code is as follows:

Note that the rectangle constructor does not take sides as an argument, and the same, constant 4 is passed directly to the Polygon constructor. Similar to triangle, Rectangle introduces two new properties that are parameters of the constructor, and then overwrites the Getarea () method.

3. Test code

You can run the following code to test the code created for the example:

This code creates a triangle with a base of 12, a height of 4, and a rectangle with a length of 22 and a width of 10. The number and area of each shape are then output, proving that the sides property is assigned correctly, and 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. How about using a dynamic prototyping method?

The previous example demonstrates inheritance with an object-defined hybrid constructor/prototype, so can you use a dynamic prototype to implement the inheritance mechanism? No.

The reason why the inheritance mechanism cannot adopt the dynamic is that the prototype object's unique nature. Look at the following code (this code is incorrect but worth studying):

The code above shows the polygon and triangle classes defined with dynamic prototypes. The error is the highlighted code that sets the Triangle.prototype property. Logically, this position is correct, but functionally speaking, it is not. Technically, before the code is run, the object has been instantiated and associated with the original prototype object. Although a very late binding allows modifications to a prototype object to be correctly reflected, replacing the prototype object does not have any effect on the object. Only future object instances reflect this change, making the first instance incorrect.

To implement the inheritance mechanism correctly using dynamic prototypes, you must give the new prototype object outside the constructor, as follows:

This code is valid because it assigns a value to the prototype object before any object instantiation. Unfortunately, this means that the code cannot be fully encapsulated in the constructor, which is the thrust of the dynamic prototype.