What’s up with prototypes in JavaScript?

August 30th, 2011

I’ve had a few people ask me what’s the deal with prototypes in JavaScript and I’ll be honest, at first I didn’t know. I have to say that most of the explanations show how to create a prototype object but never really said why, at least clearly. Most seemed to be written by really experienced programmers who were trying to explain it to other experienced programmers coming from a different language. And when you’re a beginner, seeing something like this can be confusing:

1
2
3
4
5
6
7
var Foo = function() {
 this.width = 100;
 this.height = 100;
}
Foo.prototype = function() {
 this.color = ‘red’;
}

If you don’t understand what’s going on here, I’ve created a variable called Foo which I’ve give height and width properties, they could have been anything, I just picked these two. Next, I added another property to the Foo object called color. Now I have access to Foo.width, Foo.height and Foo.color. This is the way most of the examples I’ve seen have been written and I think a lot of beginners won’t get the point of the prototype object, they’ll just be asking why not just add the color property when you first create the Foo object.

It’s a good question and if you’re not familiar with Object Oriented Programing, it might be hard to figure on your own. Here’s a simple example of where you could use the prototype object to add to an object:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Prototype Test</title>
<style>
body {
   margin:0;
   padding:0;
   background:#000;
}
canvas {
   display:block;
   margin:30px auto 0;
   background:#fff;
}
</style>
</head>

<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="Square.js"></script>
<script>

</script>
</body>
</html>

Here’s an HTML page with a canvas and a link to a JavaScript file called Square.js. We’re going to use Square.js to create a couple of squares on the canvas in a really simple example of OOP. Here’s what’s in the Square.js file:

1
2
3
4
5
6
var Square = function(x,y) {
   this.x = x || 10;
   this.y = y || 10;
   this.w = 100;
   this.h = 100;
}

Square has four properties, x, y, w, and h. So, it will contain the x and y positions of the square and set the width and height to 100 pixels. I’ve set it up so that you can either pass the x and y coordinates to the square but if you don’t, it will default to 10 for either. That’s all we need to know about the Square object because we aren’t going to touch it again. Now, let’s write some code in the script tags in our HTML file. We’ll start off with a couple of variables:

1
2
var sq = new Square(120,200);
var sq2 = new Square();

I’m sure some people are wondering what’s going on here. Well, it’s actually pretty simple, we’re creating two objects, sq and sq2 and we’re giving the properties of the Square object but they’re both they’re own separate object. If this was a language like ActionScript 3, we’d say they were both created using the Square class. We’re also passing x and y coordinates to sq but not to sq2. Now let’s get prototyping!

1
2
3
4
5
Square.prototype = function(c) {
   this.color = c;
}
sq.color = '#00f';
sq2.color = '#f00';

All we’re doing here is adding a new property to the Square object called color so we give our squares their own colors. Now the point of doing this is this: We want to add to a new property of our Square class but we don’t want to change the original object because this might be something that we just need for this project.

And the rest of our JavaScript to actually draw the squares:

1
2
3
4
5
6
7
8
9
10
function init() {
   var canvas, ctx;
   canvas = document.getElementById('canvas');
   ctx = canvas.getContext('2d');
   ctx.fillStyle = sq.color;
   ctx.fillRect(sq.x,sq.y,sq.w,sq.h);
   ctx.fillStyle = sq2.color;
   ctx.fillRect(sq2.x,sq2.y,sq2.w,sq2.h);
};
init();

When this code runs, we get a red square and a blue square, both created using the Square object. So what’s the benefit of this? Well, let’s say you’re building a game, you can create a basic enemy class that would give all your enemies the same basic behaviors and properties instead of having to re-code them for each enemy. And then for each different type of enemy, you could use the prototype object to add the different or extra features they would all have. OOP is a really powerful way to code and JavaScript’s prototype makes it even better. As long as you know how to use it, that is.

Here’s the complete code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Prototype Test</title>
<style>
body {
    margin:0;
    padding:0;
    background:#000;
}
canvas {
    display:block;
    margin:30px auto 0;
    background:#fff;
}
</style>
</head>

<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="Square.js"></script>
<script>
var sq = new Square(120,200);
var sq2 = new Square();
Square.prototype = function(c) {
    this.color = c;
}
sq.color = '#00f';
sq2.color = '#f00';

function init() {
    var canvas, ctx;
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    ctx.fillStyle = sq.color;
    ctx.fillRect(sq.x,sq.y,sq.w,sq.h);
    ctx.fillStyle = sq2.color;
    ctx.fillRect(sq2.x,sq2.y,sq2.w,sq2.h);
};
init();
</script>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *