12.5.2.1. Creating members of a class

new Constructor( );    // Returns an instance of the Constructor class

So, to create a ball object (an instance) using our Ball class, we write:

myBall = new Ball( );  // Stores an instance of the Ball class in myBall

Our Ball class still doesn't add properties or methods to the objects it creates. Let's take care of that next.

12.5.2.2. Assigning custom properties to the objects of a class

function Constructor ( ) {
  this.propertyName = value;
}

where this is the object being created, propertyName is the property we want to attach to that object, and value is the data value we're assigning to that property.

Let's apply this technique to our Ball example. Earlier, we proposed that the properties of the Ball class should be radius, color, xPosition, and yPosition. Here's how the Ball class constructor might assign those properties to its instances (note the use of the this keyword):

function Ball ( ) {
  this.radius = 10;
  this.color = 0xFF0000;
  this.xPosition = 59;
  this.yPosition = 15;
}

With the Ball constructor thus prepared, we can create object instances (i.e., members of the class) bearing the predefined properties -- radius, color, xPosition, and yPostion -- by invoking Ball( ) with the new operator, just as we did earlier. For example:

// Make a new instance of Ball
bouncyBall = new Ball( );

// Now access the properties of bouncyBall that were set when it was
// made by the Ball( ) constructor.
trace(bouncyBall.radius);     // Displays: 10
trace(bouncyBall.color);      // Displays: 16711680
trace(bouncyBall.xPosition);  // Displays: 59
trace(bouncyBall.yPosition);  // Displays: 15

Now wasn't that fun?

Unfortunately, our Ball( ) constructor uses fixed values when it assigns properties to the objects it creates (e.g., this.radius = 10). Every object of the Ball class, therefore, would have the same property values, which is antithetical to the goal of object-oriented programming (we have no need for a class that generates a bunch of identical objects; it is their differences that make them interesting).

function Constructor (value1, value2, value3) {
  this.property1 = value1;
  this.property2 = value2;
  this.property3 = value3;
}

Inside the Constructor function, we refer to the object being created with the this keyword, just as we did earlier. This time, however, we don't hardcode the object properties' values. Instead, we assign the values of the arguments value1, value2, and value3 to the object's properties. When we want to create a new, unique member of our class, we pass our class constructor function the initial property values for our new instance:

myObject = new Constructor (value1, value2, value3);

12.5.2.3. Assigning methods to objects of a class

function Constructor( ) {
  this.methodName = function;
}

The function may be supplied in several ways, which we'll examine by adding the area( ) method to our Ball class. Note that we've removed the color, xPosition, and yPosition properties from the class for the sake of clarity.

function Ball (radius) {
  this.radius = radius;
  // Add the area method...
  this.area = function ( ) { return Math.PI * this.radius * this.radius; };
}

function Ball (radius) {
  this.radius = radius;
  // Add the area method...
  this.area = getArea;
  function getArea ( ) {
    return Math.PI * this.radius * this.radius; 
  }
}

Finally, the function can be declared outside the constructor but assigned inside the constructor:

// Declare the getArea( ) function
function getArea ( ) {
  return Math.PI * this.radius * this.radius; 
}

function Ball (radius) {
  this.radius = radius;
  // Add the area method...
  this.area = getArea;
}

There's no real difference between the three approaches -- all are perfectly valid. Function literals often prove the most convenient to use but are perhaps not as reusable as defining a function outside of the constructor so that it can also be used in other constructors. Regardless, all three approaches lack efficiency.

So far we've been attaching unique property values to each object of our Ball class. Each ball object needs its own radius and color property values to distinguish one ball from the next. But when we assign a fixed method to the objects of a class using the techniques we've just seen, we are unnecessarily duplicating the method on every object of our class. The area formula is the same for every ball, and hence the code that performs this task should be centralized and generalized.

To more efficiently attach any property or method with a fixed value to a class, we use inheritance, our next topic of study.

12.5.3.1. Creating inherited properties with the prototype property

To create a property that will be inherited by all the objects of a class, we simply assign that property to the prefabricated prototype object of the class's constructor function. Here's the general syntax:

Constructor.prototype.propName = value;

where Constructor is our class's constructor function (Ball in our example); prototype is the automatically generated property we use to house inherited properties; propName is the inherited property name, and value is that inherited property's value. For example, here's how we would add a global gravity property to our entire class of Ball objects:

Ball.prototype.gravity = 9.8;

With the gravity property in place, we can then access gravity from any member of the Ball class:

// Create a new instance of the Ball class
myBall = new Ball(5, 0x003300, 34, 220);

// Now display the value of the inherited gravity property
trace(myBall.gravity);  // Displays: 9.8

The gravity property is accessible through myBall because myBall inherits the properties of Ball 's prototype object.

Because the same methods are ordinarily shared by every instance of a class, they are typically stored in inherited properties. Let's add an inherited area( ) method to our Ball class:

Ball.prototype.area = function ( ) {
  return Math.PI * this.radius * this.radius; 
};  // Semicolon required because this is a function literal

That was so much fun, let's add an inherited moveTo( ) method, this time using a predefined function instead of a function literal:

function moveTo (x, y) {
  this.xPosition = x;
  this.yPosition = y;
}

Ball.prototype.moveTo = moveTo;

Once a function is defined as an inherited property, we can invoke it like any other method:

// Make a new ball
myBall = new Ball(15, 0x33FFCC, 100, 50);

// Now invoke myBall's inherited area( ) method
trace(myBall.area( ));  // Displays: 706.858347057703

12.5.3.2. Overriding inherited properties

// Create our Ball class constructor
function Ball ( radius, color, xPosition, yPosition ) { ... } // Not shown

// Assign an inherited gravity property
Ball.prototype.gravity = 9.8

// Create a Ball object
lowGravBall = new Ball ( 200, 0x22DD99, 35, 100 );

// Override the inherited gravity property
lowGravBall.gravity = 4.5;

A property set on an object always overrides any inherited property by the same name. This is simply a result of the way the inheritance chain works. Likewise, method definitions local to an object will override those in its class. If we execute ball1.area( ) and ball1 defines an area( ) method, that method is used; the interpreter never bothers looking at the Ball class's prototype to see if it also defines an area( ) method.

12.5.3.3. The constructor property

trace(Ball);                        // Displays: [Function]
trace(Ball.prototype.constructor);  // Also displays: [Function]
                                    // Same reference as above

Note that the constructor property contains a reference to a constructor function, not a string representing the function's name.

12.5.3.4. The _ _ proto_ _ property

myBall = new Ball(6, 0x00FF00, 145, 200);
trace(myBall._    _    proto_    _ == Ball.prototype);  // Displays: true

The _ _ proto_ _ property is used primarily by the ActionScript interpreter to look up an object's inherited properties. For example, when we invoke the inherited method area( ) through myBall, as in myBall.area( ), ActionScript accesses the Ball.prototype.area method via myBall._ _ proto_ _.

12.5.4.1. Making a superclass

Constructor.prototype = new SuperClass( );

However, our class hierarchy now has poor structure -- Ball defines radius, but radius is actually a property common to all circles, so it belongs in our Circle class. The same is true of xPosition and yPosition. To fix the structure, we'll move radius, xPosition, and yPosition to Circle, leaving only color in Ball. (For the sake of the example, we'll treat color as a property only balls can have.)

Conceptually, here's the setup of our revised Circle and Ball constructors:

// Create the Circle (superclass) constructor
function Circle ( radius, xPosition, yPosition ) {
  this.area = function ( ) { return Math.PI * this.radius * this.radius; };
  this.radius = radius;
  this.xPosition = xPosition;
  this.yPosition = yPosition;
}

// Create the Ball class constructor
function Ball ( color ) {
  this.color = color;
}

Having moved the properties around, we're faced with a new problem. How can we provide values for radius, xPosition, and yPosition when we're creating objects using Ball and not Circle ? We have to make one more adjustment to our Ball constructor code. First, we set up Ball to receive all the required properties as parameters:

function Ball ( color, radius, xPosition, yPosition ) {

Next, within our Ball constructor, we define the Circle constructor as a method of the ball object being instantiated:

this.superClass = Circle;

Finally, we invoke the Circle constructor on the ball object, and pass it values for radius, xPosition, and yPosition:

this.superClass(radius, xPosition, yPosition);

12.5.4.2. Polymorphism

function Cop( ) { ... }
function Robber( ) { ... }
function Bystander( ) { ... }

In addition, we create a superclass, Person, that classes Cop, Robber, and Bystander all inherit from:

function Person( ) { ... }
Cop.prototype       = new Person( );
Robber.prototype    = new Person( );
Bystander.prototype = new Person( );

On each frame of the Flash movie, every person on the screen should move according to the rules for their class. To make this happen, we define a method move( ) on every object (the move( ) method is customized for each class):

Person.prototype.move = function ( ) { ... default move behavior ... }
Cop.prototype.move = function ( ) { ... move to chase robber ... }
Robber.prototype.move = function ( ) { ... move to run away from cop ... }
Bystander.prototype.move = function ( ) { ... confused, move randomly ... }

On each frame of the Flash movie, we want every person on the screen to move. To manage all the people, we create a master array of Person objects. Here's an example of how the persons array might be populated:

// Create our cops
cop1 = new Cop( );
cop2 = new Cop( );

// Create our robbers
robber1 = new Robber( );
robber2 = new Robber( );
robber3 = new Robber( );

// Create our bystanders
bystander1 = new Bystander( );
bystander2 = new Bystander( );

// Create an array populated with cops, robbers, and bystanders
persons = [cop1, cop2, robber1, robber2, robber3, bystander1, bystander2];

In every frame of the Flash movie, we call the function moveAllPersons( ), which is defined as follows:

function moveAllPersons( ) {
  for (var i=0; i < persons.length; i++) {
    persons[i].move( );
  }
}

12.5.4.3. Determining whether an object belongs to a superclass

12.5.4.4. The end of the inheritance chain

Object.prototype.mainstageWidth = 550;
Object.prototype.mainstageHeight = 400;
trace(anyClip.mainstageWidth);  // Displays: 550

Object.prototype properties are inherited not only by movie clips but by every object, so even our own custom objects and instances of other built-in classes such as Date and Sound will inherit properties assigned to Object.prototype.

12.5.4.5. Comparing Java terminology

Table 12-1. Java and ActionScript Property Equivalencies