//INIT: Creating objects using object constructors

<New code>

//INIT: — define an object with a method

// ExampleObj object constructor
//      properties:
//          exampleObj.exampleProperty1
//          exampleObj.exampleProperty2
//      methods:
//          exampleObj.exampleMethod()
//
var ExampleObj = function ( exampleValue1, exampleValue2 ) {
    this.exampleProperty1   = exampleValue1;
    this.exampleProperty2   = exampleValue2;
};

// Use .prototype to add methods (functions) to your object constructor
    
ExampleObj.prototype.exampleMethod = function () {
        // function instructions go here
        return this.exampleProperty1 + this.exampleProperty2;
};

// Use new to construct a new version of this object:
var thisObj = new ExampleObj( "Parameter #1", "Parameter #2" );

Multiple objects built quickly

In Object-oriented programming we learned how to create objects with both properties (variable-like data storage) and methods (function-like actions). We used these to animate Ms. Pacman again.

The code for that looked like this:

// animationObj - displays and animates an image
//
// properties:  
//      .id
//      .src
//      .width
//
// methods:
//      .outputImage()
//      .animateUp()

var animationObj = {
    id:         "animateId",
    src:        "MsPacMan.png",
    width:      "100px",
    DISTANCE:   24,
    DURATION:   100
};

//OUTPUT: method to display the image and prepare for animation
animationObj.outputImage = function() {
    console.log( 'in animationObj.outputImage...' );
    
    document.querySelector( "#" + this.id ).src             = this.src;
        
    document.querySelector( "#" + this.id ).style.width     = this.width;
        
    document.querySelector( "#" + this.id ).style.position  = "relative"; 
};
    
//OUTPUT: method to animate up
animationObj.animateUp = function() {
    console.log( 'in animationObj.animateUp...' );
    
    $( "#" + this.id ).animate(
        { top:      '-=' + this.DISTANCE + 'px' }, 
        { duration: this.DURATION }
    );
};

Just to review quickly:

What is animationObj.id? click for answer...
What is animationObj.src? click for answer...
What does animationObj.animateUp() do? click for answer...
What does the special object this. do? click for answer...

Now say we want to make a game where multiple things can be moving at the same time.

It would be handy to just reuse the same object definition because:

Object constructors

Let's say that we want to use a similar definition for a number of objects. That sounds like it could be handy, except that there would be a lot of repetitive typing. I suppose we could you cut and paste, but if we wanted to make changes to our code, we would have to make those changes in many different places.

There has to be a better way.

Instead of the code above, imagine it was changed so that we could create as many objects as we liked, based on a kind of template. This is called using an object constructor.

        <img id="msPacId">
        <img id="blinkyId">
        <img id="pinkyId">
        
        <script>
            // Note that object constructors start with UPPER CASE by the rules of good style
            // object constructors pass variables into the function definition as usual
            // AnimatedObj's constructor requires an id, image source, and width
            var AnimatedObj = function  ( idInfo, srcInfo, widthInfo ) {    
                this.id         = idInfo;
                this.selector   = "#" + this.id;
                this.src        = srcInfo;
                this.width      = widthInfo;
                this.DURATION   = 100;
                this.DISTANCE   = 24;
                
                // Notice also that it is "this.id=" instead of "this.id:"
                // Also, even though object constructors are functions, they do NOT use return  
            }

            //AnimatedObj methods:
            //      .outputImage()
            //      .animateUp()
            //      .animateDown()
            //      .animateLeft()
            //      .animateRight()
            //
            //OUTPUT: method to display the image
            AnimatedObj.prototype.outputImage   =function() {
                //console.log('in AnimatedObj.outputImage this.selector=' + this.selector );
                
                document.querySelector( this.selector ).src                 = this.src;
                document.querySelector( this.selector ).style.width         = this.width;
                document.querySelector( this.selector ).style.position      = "relative";
            };
                
            //OUTPUT: method to animate up
            AnimatedObj.prototype.animateUp     = function() {      
                //console.log( 'in AnimatedObj.animateUp. this.selector=' + this.selector );
                
                $( this.selector ).animate( 
                    { top:      '-=' + this.DISTANCE + 'px' }, 
                    { duration: this.DURATION }
                );
            };
            
            //OUTPUT: method to animate down
            AnimatedObj.prototype.animateDown   = function() {      
                //console.log( 'in AnimatedObj.animateDown. this.selector=' + this.selector );
                
                $( this.selector ).animate(
                    { top: '+=' + this.DISTANCE + 'px' }, 
                    { duration: this.DURATION }
                );
            };
            
            //OUTPUT: method to animate left
            AnimatedObj.prototype.animateLeft   = function() {      
                //console.log( 'in AnimatedObj.animateLeft. this.selector=' + this.selector );
                
                $( this.selector ).animate(
                    { left: '-=' + this.DISTANCE + 'px' }, 
                    { duration: this.DURATION }
                );
            };
                
            //OUTPUT: method to animate right
            AnimatedObj.prototype.animateRight  = function() {  
                //console.log( 'in AnimatedObj.animateRight. this.selector=' + this.selector );
                
                $( this.selector ).animate(
                    { left: '+=' + this.DISTANCE + 'px' }, 
                    { duration: this.DURATION }
                );
            }
            
            //  Global variables (just so that they can be seen by the buttons...
            //  Create three objects quickly that can be animated
            
            //INIT: the msPacMan object
            var msPacMan    = new AnimatedObj( 
                "msPacId", "http://drapak.ca/cpg/img/MsPacMan.png", "40px"
            ); 
            
            //INIT: the blinky (red ghost) object
            var blinky      = new AnimatedObj( 
                "blinkyId", "http://drapak.ca/cpg/img/pacman/pacmanBlinkyLeft1.png", "40px"
            );  
            
            //INIT: the pinky (pink ghost) object
            var pinky       = new AnimatedObj( 
                "pinkyId", "http://drapak.ca/cpg/img/pacman/pacmanPinkyRight1.png", "40px"
            );      
        </script>

Object constructors make a lot of sense, and the elegance with which you can create new similar objects is a key part of object-oriented programming.

Show the example!




Let's see what you have observed

So let's check your understanding about object constructors. TRUE or FALSE?

1. Object constructors are a way to create multiple objects easily
 
click for answer...
2. Object constructors always use lower case in their names,
eg: var Yuri =new student();
 
click for answer...
3. Object constructors use "=" like a function instead of ":" like an object definition
 
click for answer...
4. Object constructors can only create a maximum of three objects click for answer...

Learn more

Using object constructors to create more than one moveable object