Since the JavaScript fever hit me, I’m very busy at this topic. Especially I’m very busy with developing a JavaScript Canvas application. I would really love to write more about the app and give some snapshots, but because it isn’t finished yet, you’ll have to wait a bit more longer for the project to turn public.
Never the less I would like to share some experiences concerning object orientation in JavaScript. Many of you may remember JavaScript as the technology which enhanced HTMLs abilities to the worst. Responsible for pop-ups, evil cookies with a touch of annoying procedural syntax. You better forget about that quickly. JavaScript has become a quite powerful language, not only when it is about client side development. And only because many developers are still excellently ignoring the languages possibilities in case of object oriented programming doesn’t mean, that there aren’t any.
JavaScript is using so called prototyping for it’s object instantiation. Yes, using object orientation might be several times slower than just writing procedural code. But as history has proven, there are many good reasons for object oriented code design. Have a look at the following example code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| MyProject = {};
MyProject.Foo = function() {
this.initialize();
return this;
}
MyProject.Foo.prototype = {
// called by constructor
initialize : function() {
this.message = 'foobar!';
},
// instance method
bar : function() {
alert(this.message);
}
}
// main
var obj = new MyProject.Foo();
obj.bar(); |
There are some other possibilities for writing the object code. I did choose this one over the others, because it’s compact, clean and probably the best performing way. If you are familiar with other languages using the object oriented programming paradigm, you might have recognized some differences. The code doesn’t seem to have a classic class declaration syntax. Instead of this the code has been split up into three important parts. The line MyProject = {}; isn’t really necessary but very helpful to keep track of your classes when a project grows bigger. It’s the DIY way of creating a namespace alike structure. The empty curly braces are JavaScript specific syntax for creating empty objects. It’s the simplies way to create objects or dictionary data scructures. JavaScript as well as ActionScript (ECMA Hooray!) doesn’t differentiate at that point, because JavaScript doesn’t depend on static types. That enables you to link every type of language element into the pseudo-namespace at every time. That’s exactly what’s happening in line 3: MyProject.Foo = function() {…}.
These lines simple create an attribute or the object represented by the MyProject variable, actually behaving as Namespace. The Value of MyProject.Foo will be a function, which only job it is to call the this.initialize() method. Speaking of object oriented theory, this is the object construtor. It’s just calling an initialization method and returning itself to the caller. Yes, exactly itself. Therefore we need to combine the call of MyProject.Foo() with the new statement in front of it. That creates a new copy of any given object, as you can see in line 21.
Lines 8 to 18 are containing the prototype implementations of the MyProject.Foo class. Watch out for the leading this. in front of every access to functions or variables of the current instance. Unlike Java or ActionScript for example, JavaScript doesn’t auto detect the function of variable scope by itself. Every call without scope declaration, will be executed within the current function scope.
Phew, pretty much to handle yet. As you can see, there are a lot differences between object orientation as we know it by languages like Java, Ruby or C++ and JavaScript. But at least there are only a few basic principles that you may keep in mind when developing JavaScript the OOP way:
- JavaScript objects are extendable at runtime
- Prototypes instead of static typed classes
- Always declare scope when calling attributes/methods
- Use the new keyword to create instances of prototype objects.
