Objects
Trying to understand how objects work in JavaScript can be confusing, not because it’s complicated or difficult, but because the language is flexible enough to allow different approaches and also because many programmers simply aren’t familiar with prototype-based programming. I’ll try to demonstrate, what I think is the simplest and cleanest way to work with objects in JavaScript. You can simply copy, paste and run in Firebug all of the following code.
So, lets define our own object, with one property and a method:
1 var Box = function() {
2
3 this.element = null;
4
5 this.create = function() {
6 if (!this.element) {
7 this.element = document.createElement('div');
8 with (this.element.style) {
9 position = 'absolute';
10 width = '100px';
11 height = '100px';
12 top = '0';
13 left = '0';
14 backgroundColor = 'deepskyblue';
15 border = '1px solid dodgerblue';
16 }
17 document.body.appendChild(this.element);
18 }
19 };
20
21 };
Now you can instantiate this Box with:
1 var myBox = new Box();
2 myBox.create();
What’s nice is that you can extend it at any time, for example, if we wanted to, not only create, but also remove boxes:
1 Box.prototype.destroy = function() {
2 if (this.element) {
3 this.element.parentNode.removeChild(this.element);
4 this.element = null;
5 }
6 }
7 myBox.destroy();
And inheritance isn’t difficult either - here’s how to create Circle that inherits properties and methods from Box and also we’ll override create method:
1 var Circle = function() {
2
3 this.create = function() {
4 if (!this.element) {
5 this.element = document.createElement('div');
6 with (this.element.style) {
7 position = 'absolute';
8 width = '100px';
9 height = '100px';
10 top = '0';
11 left = '0';
12 MozBorderRadius = '50px';
13 WebkitBorderRadius = '50px';
14 backgroundColor = 'hotpink';
15 border = '1px solid red';
16 }
17 document.body.appendChild(this.element);
18 }
19 };
20
21 };
22 Circle.prototype = new Box();
And that’s really it, we’re done. Now something fun like this is possible:
1 Box.prototype.moveTo = function(aTop, aLeft) {
2 if (this.element) {
3 this.element.style.top = aTop;
4 this.element.style.left = aLeft;
5 }
6 }
7 var objects = [];
8 var createObject = function() {
9 var obj = Math.random() > 0.5 ? new Box() : new Circle();
10 obj.create();
11 var top = (Math.random() * window.innerHeight).toString() + 'px';
12 var left = (Math.random() * window.innerWidth).toString() + 'px';
13 obj.moveTo(top, left);
14 objects.push(obj);
15 if (objects.length > 100) {
16 var i = Math.floor(Math.random() * objects.length);
17 objects[i].destroy();
18 objects.splice(i, 1);
19 }
20 setTimeout(createObject, 100);
21 }
22 setTimeout(createObject, 100);
