Special topic: Object constructors

Multiple objects built quickly

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

The code for that looked like this:


	var animationObject = {	// this approach is great for SINGLE objects, but not multiple objects
		id:		"animateID",
		src:		"MsPacMan.png",
		width:		"100px",

		outputImage: function() {
			document.getElementById(this.id).src			=this.src;	// image src file
			document.getElementById(this.id).style.width		=this.width;	// image width in px
			document.getElementById(this.id).style.position		="relative"; 	// CSS to allow animation movement
			},
			
		animateUp: function() {		// PROCESS: method to animate up
			$("#"+this.id).animate({ top: '-=24px'}, {duration: 100});
			},
			
		animateDown: function() {		// PROCESS: method to animate down
			$("#"+this.id).animate({ top: '+=24px'}, {duration: 100});
			},
			
		animateLeft: function() {		// PROCESS: method to animate left
			$("#"+this.id).animate({ left: '-=24px'}, {duration: 100});
			},
			
		animateRight: function() {	// PROCESS: method to animate right
			$("#"+this.id).animate({ left: '+=24px'}, {duration: 100});
			}
	};
			

Just to review quickly:

What is animationObject.id? click for answer...
What is animationObject.src? click for answer...
What does animationObject.animateLeft() 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

Remember in the Build a clock assignment when you did this?


	var dateObject =new Date();
			

You created a new object called date that you could then call methods on, like:


	var currentYear =dateObject.getFullYear();
			

Date() is an object constructor: a function that creates new objects when built-in properties and methods. You called new Date(); once every second in your program to help you read the time. You can make your own object constructor.

Instead of the code above, imagine it was changed so that we could create as many objects as we liked:


<script>
	//	Global variables (So that they can be seen by the whole page, including the buttons)
	//	Create three objects quickly that can be animated
	var msPacMan	=new AnimatedObject("msPacID", "MsPacMan.png", "40px"); 	// create the msPacMan object
	var blinky 	=new AnimatedObject("blinkyID", "Blinky.png", "40px"); 	// create the blinky (red ghost) object
	var pinky 	=new AnimatedObject("pinkyID", "Pinky.png", "40px"); 	// create the pinky (pink ghost) object
	
								
	function AnimatedObject (idInfo, srcInfo, widthInfo) { 	// Note that object constructors start with UPPER CASE by the rules of good style
		this.id		=idInfo;				// Object constructors pass variables into the function definition as usual
		this.src		=srcInfo;			// Notice also that it is "width=" instead of "width:"
		this.width	=widthInfo;			// the special object this. is needed, and each definition ends with ";"
		
		this.outputImage =function() {
			document.getElementById(this.id).src			=this.src;	// image src file
			document.getElementById(this.id).style.width		=this.width;	// image width
			document.getElementById(this.id).style.position		="relative"; 	// CSS to allow animation movement
			};
			
		this.animateUp 	=function() {		// PROCESS: method to animate up
			$("#"+this.id).animate({ top: '-=24px'}, {duration: 100});
			};
			
		this.animateDown =function() {		// PROCESS: method to animate down
			$("#"+this.id).animate({ top: '+=24px'}, {duration: 100});
			};
			
		this.animateLeft =function() {		// PROCESS: method to animate left
			$("#"+this.id).animate({ left: '-=24px'}, {duration: 100});
			};
			
		this.animateRight =function() {		// PROCESS: method to animate right
			$("#"+this.id).animate({ left: '+=24px'}, {duration: 100});
			}
	}; 					// even though object constructors use function(), they do NOT need return
</script>

<body>
	<img id="msPacID">
	<img id="blinkyID">
	<img id="pinkyID">
</body>
			

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...