Small Talks
When I started programming with JavaScript, knowing languages such as C++ or Java, I found it kind a messy. Only function, no class, no real structure (only Arrays and Object), and back to those years, using this loosely typed language was like walking on eggs. Now, frameworks such as JQuery, Mootools or Dojo, have highly simplified JavaScript development, in their relative field. New structures are added, to mimic strongly typed languages, such as Maps, LinkedList or whatever. Some libraries provide an inheritance feature, aimed at structuring the code. Client-side app becoming heavier and heavier, bringing OO patterns in JS can be very useful for big app development and maintenance.
Over the internet, it seems there are many ways to accomplish OO feature in JavaScript, such as Classical Inheritance, Swiss Inheritance, Parasitic Inheritance, and maybe more. Some are property-copying based, others use the prototype property or even combine those methods. I encourage you to read about that to understand the underlying concepts in JavaScript. Even if you embrace one of those methods, you still need to develop the sugar around to be able to mimic parent class method call, or inheritance chaining among classes. Another solution would be to directly add an external library and use the OO feature through it. But what if you don’t need to add a whole big library to use two features? What if you feel like it’s a waste of resources?
A Solution: xbObject
I’m going to show you how to use a small piece of code that does the magic and solves many problems in JavaScript OOP: inheritance, parent method call, etc. without a headache about JavaScript prototype theory. At the end, I will expose its weaknesses too. The strong value of this is that you don’t need a full library to use one feature, it’s simpler, it doesn’t interfere with other piece of code, and you can use your model anywhere. It weighs about 7Kb unpacked, and 2Kb minified (if you use gzip, you can even go to 700 bytes!).
We are going to use xbObject.js, written by Bob Clary. You can have the code here. Let’s deep into some OO concepts, beginning by Class and Instantiation.
Class and Instance
Let’s define a class “Company” as :
|
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 |
// Declares a class like this _classes.registerClass("Company"); function Company( name, size ){ // Defines the "pre-constructor", called for // building the object _classes.defineClass("Company", prototypeFunction); // Our "constructor" method, called after prototypeFunction this.init(name, size); function prototypeFunction(){ Company.prototype.init = function( name, size ){ // Defines two class attributes this._name = name; this._size = size; console.log("Company initialized"); }; // We add a method ! Company.prototype.toString = function(){ return "Company Name : " + this._name + ", size : " + this._size; }; } } |
To instantiate it, and invoke a method, just do as follow :
|
1 2 3 |
// Instanciation var company = new Company("Apple", "5000"); console.log(company.toString()); |
Which should output :
|
1 2 |
Company initialized Company Name : Apple, size : 5000 |
If you inspect the company object, with firebug for instance, you will see that you can access the attributes “name” and “size” from the outside. This unfortunately breaks the encapsulation concept of OOP. A lot can be done to mimic this feature, there are two articles that I find great to explain how to achieve that here, and here. We won’t discuss this, because first, this topic has a lot to do with efficiency and some problems can arise, and second, I don’t think this is very useful here considering our code is readable by anybody. If you want to “encapsulate”, just take a naming convention and explain it in your API.
Inheritance
Let’s define “Intelytics”, a company, inheriting from “Company” :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// We inherit here ! _classes.registerClass("Intelytics", "Company"); function Intelytics( size ){ // Defines the "pre-constructor", called for // building the object _classes.defineClass("Intelytics", prototypeFunction); // Our "constructor" method, called after prototypeFunction this.init(size); function prototypeFunction(){ Intelytics.prototype.init = function( size ){ // call our parent constructor this.parentMethod('init', "Intelytics", size); // We have access to parents attributes and methods this._size = 20; console.log("Intelytics initialized"); }; } } |
The following code :
|
1 2 |
var intelytics = new Intelytics("2"); console.log(intelytics.toString()); |
Will output this :
|
1 2 3 4 |
Company initialized Company initialized Intelytics initialized Company Name : Intelytics, size : 20 |
Here we have introduced two principles. The inheritance, and the parent method call. You inherit from a class by using the second parameter of the _classes.registerClass method (l. 2). On line 15, you are given an exemple of parent method calling, through the this.parentMethod call. The first parameter is the method name to call. To pass arguments, just list them, the method will handle multiple arguments alone. Note that you can directly call this.method to call a parent method. It will work too, but parentMethod will be of help when talking about overloading and overriding.
Now you are saying “Wait a sec … Output lines 1 and 2 are the same ! What’s happening here ?”. Actually, when you instantiate a class inheriting from another one, the “framework” instantiates a parent class for chaining purposes. To avoid useless computing while instantiating a class, use this trick in the Company class contructor :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Company.prototype.init = function( name, size ){ if(name === undefined && size === undefined){ console.log("Ho ! Call for chaining purposes ... avoid it !"); return; } // Defines two class attributes this._name = name; this._size = size; console.log("Company initialized"); }; |
Now, the output will look like this :
|
1 2 3 4 |
Ho ! Call for chaining purposes ... avoid it ! Company initialized Intelytics initialized Company Name : Intelytics, size : 2 |
Multi-inheritance is possible, by calling the registerClass multiple time like this :
|
1 2 3 |
_classes.registerClass("Intelytics", "ClassA"); _classes.registerClass("Intelytics", "ClassB"); _classes.registerClass("Intelytics", "ClassC"); |
But, unfortunately, you’ll have to handle collisions yourself. If you are in that case, you might want to look into the Swiss inheritance.
Overloading and Overriding
Well, I call here overloading the possibility, within the same class, to create two, or more, functions with the same name and different arguments. I call overriding the process of declaring a function with a name that matches a parent class function name, regardless of the arguments. Why being so uselessly specific here ?
Because overloading is not possible here. If you try the following code, only the last defined method will be called :
|
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 |
_classes.registerClass("A"); function A( ){ _classes.defineClass("A", prototypeFunction); this.init(); function prototypeFunction(){ A.prototype.init = function( ){ this._size = 20; this._name = "Ho ho ho"; console.log("A initialized"); }; A.prototype.myFunc = function(a,b){ this._name = "Will never be called " + a + "," + b; }; A.prototype.myFunc = function(a){ this._name = "Will be called " + a; }; A.prototype.toString = function(){ return this._name; }; } } var a = new A("2"); a.myFunc(2,3); console.log(a.toString()); |
The output :
|
1 2 |
A initialized Will be called 2 |
If you want to achieve overloading by all mean, a way could be to do like the following code suggests. But I wonder if it’s really worth the pain :
|
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 45 46 47 48 |
_classes.registerClass("A"); function A( ){ _classes.defineClass("A", prototypeFunction); this.init(); function prototypeFunction(){ A.prototype.init = function( ){ this._size = 20; this._name = "Ho ho ho"; console.log("A initialized"); }; A.prototype.myFunc = function(){ if(arguments.length === 2){ if( typeof arguments[0] === "string" && typeof arguments[1] === "string"){ this.myFunc2(arguments[0], arguments[1]); } } if(arguments.length === 1){ if( typeof arguments[0] === "number"){ this.myFunc3(arguments[0]); } } // ... }; A.prototype.myFunc3 = function(a){ this._name = "One numeric argument : " + a; }; A.prototype.myFunc2 = function(a,b){ this._name = "Two argument, both string : " + a + "," + b; }; A.prototype.toString = function(){ return this._name; }; } } var a = new A("2"); a.myFunc(2); console.log(a.toString()); a.myFunc("Hi", "cool"); console.log(a.toString()); |
It will output :
|
1 2 3 |
A initialized One numeric argument : 2 Two arguments, both string : Hi,cool |
The trick here is to use the arguments variable of the function, containing all arguments passed. But we have to do all the job here, analyzing the number and type of arguments passed to choose the good function to call.
The overriding is possible though. You can easily redefine a method in the subclasses and call it, the parent method remaining callable :
|
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 45 46 47 48 49 |
_classes.registerClass("A"); function A( ){ _classes.defineClass("A", prototypeFunction); this.init(); function prototypeFunction(){ A.prototype.init = function( ){ this._name = "Hello"; }; A.prototype.myFunc = function(){ this._name = "Yo from A"; }; A.prototype.myFunc2 = function(){ this._name = "Yo from A with parent call"; }; A.prototype.toString = function(){ return this._name; } } } _classes.registerClass("B", "A"); function B( ){ _classes.defineClass("B", prototypeFunction); this.init(); function prototypeFunction(){ B.prototype.init = function( ){ this.parentMethod('init'); }; B.prototype.myFunc = function(){ this._name = "Yo from B"; }; B.prototype.myFunc2 = function(){ this._name = "Yo from B"; this.parentMethod('myFunc2'); }; } } |
Output :
|
1 2 |
Yo from B Yo from A with parent call |
Abstract Methods
Here is a concept really cool of OOP, that allows us to undertake useful patterns. Let’s see if it’s feasible. Let’s be crazy and define three classes :
|
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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
_classes.registerClass("A"); function A( ){ _classes.defineClass("A", prototypeFunction); this.init(); function prototypeFunction(){ A.prototype.init = function( ){ this._name = "Hello"; }; A.prototype.myFunc = function(){ this._name = "First part , "; this.myAbstractFunc(); }; A.prototype.myAbstractFunc = function(){ throw "Has to be implemented by subclasses"; }; A.prototype.toString = function(){ return this._name; }; } } _classes.registerClass("B", "A"); function B( ){ _classes.defineClass("B", prototypeFunction); this.init(); function prototypeFunction(){ B.prototype.init = function( ){ this.parentMethod('init'); }; } } _classes.registerClass("C", "B"); function C(){ _classes.defineClass("C", prototypeFunction); this.init(); function prototypeFunction(){ C.prototype.init = function( ){ this.parentMethod('init'); }; C.prototype.myAbstractFunc = function(){ this._name += "Second part"; }; } } var c = new C(); c.myFunc(); console.log(c.toString()); |
And, the output will fortunately be :
|
1 |
First part , Second part |
Outch, it’s working !
Consequences
If chosen, this method has a great asset : you can make strong app architectures without depending on a big library you need only for one feature ! That leads to make reusable components you can use in multiple projects.
Some drawbacks though:
- The parentMethod is supporting only ten arguments. That’s ok, regarding the fact that you rarely pass more than five arguments, but, hey, a quick look into the xbObject code and you can make it infinite with the arguments variable of JS function (see line 198 in xbObject.js). Another trick is to directly pass objects containing parameters, just like popular frameworks do.
- Encapsulation is not really achievable without severe drawbacks (arguable depending on the project though)
- Can we inherit from JavaScript current objects such as Array or even DOM elements ?
- If you want to make components, or make “modules” (such as putting one class per JS file), that means you will include all those classes one by one in the correct order in the final page to use a component!
If you want to go along the last point, you should take a look on connexity algorithms first, and cope with automated packaging too. This is a really interesting part in JS project packaging. A post on that topic might follow 
