Recipe 12.8 Creating Subclasses

12.8.1 Problem

You want to create a subclass that inherits from a superclass.

12.8.2 Solution

Define a new class and set the new class's prototype property to an instance of the superclass.

12.8.3 Discussion

A subclass is a class that has its own methods and properties but also uses the methods and properties of another class (its superclass). For example, all the built-in ActionScript classes, such as the Date and TextField classes, are subclasses of the top-level Object superclass. You can create a subclass that inherits all the properties and methods of a superclass by assigning a new instance of the superclass to the subclass's prototype property. For example:

MySubClass.prototype = new MySuperClass(  );

Assigning a new instance of the superclass to the subclass's prototype wipes out any existing methods or properties of that prototype. You must assign the value to prototype before you add any methods or properties to the subclass.

This is the correct order in which to perform the actions:

1. Define the constructor method for the subclass.

2. Assign inheritance (i.e., the superclass) to the prototype property.

3. Add methods and properties to the prototype property.

Here is a example of the correct order in which to perform the actions:

_global.MySubClass = function (  ) {}; MySubClass.prototype = new MySuperClass(  ); MySubClass.prototype.methodA = function (  ) {}; MySubClass.prototype.myProperty = "some property value";

The following is incorrect! Because the inheritance is defined after the addition of methodA( ) and myProperty, those items are lost after the superclass assignment.

_global.MySubClass = function (  ) {}; MySubClass.prototype.methodA = function (  ) {}; MySubClass.prototype.myProperty = "some property value"; MySubClass.prototype = new MySuperClass(  );  // This should come earlier.

Here is a complete example with superclass and subclass definitions:

// Define a superclass. _global.MySuperClass = function (  ) {}; // Define a method for the superclass. MySuperClass.prototype.myMethod = function (  ) {   return "MySuperClass.myMethod(  ) called"; }; // Define the subclass. _global.MySubClass = function (  ) {}; // Define the inheritance such that MySubClass is a subclass of MySuperClass. MySubClass.prototype = new MySuperClass(  ); // Define some methods and properties for the subclass, if desired. MySubClass.prototype.methodA = function (  ) {}; MySubClass.prototype.myProperty = "some property value"; // Create an instance of MySubClass. sub = new MySubClass(  ); // Call myMethod(  ) from the subclass instance. Even though myMethod is not explicitly // defined for MySubClass, the subclass automatically inherits it from the // superclass, MySuperClass. trace(sub.myMethod(  ));

Subclassing is essential to creating components (see Recipe 12.12). Additionally, it has practical applications in situations in which there is a natural relationship between two classes. In many cases, it makes sense for one class to inherit from another rather than to create redundancy. The following example with a Rectangle superclass and a Square subclass illustrates the point. Squares are a subset of rectangles they are specialized rectangles in which all four sides are the same length. In this example, the Rectangle class defines the important functionality while the Square class inherits it without having to redefine it:

// Define the Rectangle class. The constructor accepts two parameters for the lengths // of the sides (the height and width). _global.Rectangle = function (sideA, sideB) {   this.sideA = sideA;   this.sideB = sideB;   // Create a read-only area property.   this.addProperty("area", this.getArea, null); }; // Define the getArea(  ) method for the area property. Rectangle.prototype.getArea = function (  ) {   return (this.sideA * this.sideB); }; // Define a Square class. The constructor accepts one parameter only, since the width // and height are always equal. Since the Square class subclasses Rectangle, it // inherits the sideA and sideB properties. In the Square constructor, set both // properties to the same value. _global.Square = function (side) {   this.sideA = this.sideB = side; }; // Set Square to inherit from Rectangle. Square.prototype = new Rectangle(  ); // Create a new Square instance with a side of length 6. sq = new Square(6); // Display the value of the area property. Even though Square does not explicitly // define an area property, it inherits it from Rectangle. trace(sq.area);  // Displays: 36

12.8.4 See Also

Recipe 12.9 and Recipe 12.12. For a detailed discussion on an alternative, unsupported method of superclass assignment, refer to the discussion of so-called _ _proto_ _-based inheritance in the "Advanced Issues with Superclass Assignment" section of Chapter 12 in ActionScript for Flash MX: The Definitive Guide. That chapter is freely downloadable from http://moock.org/asdg/samples.