php developer blog

OOP in JavaScript - Part 3: Extending classes

by Dominik Jungowski

22. September 2009 No Comment

After I've already covered normal and static classes, Part 3 is about extending classes. As before, basic knowledge in OOP and JavaScript is needed.

First, let's create a class Human with setters and getters for the age:

function Human()
{
	
}

Human.prototype._age = 0;

Human.prototype.setAge = function(age)
{
	if (typeof age != 'number') {
		throw('Invalid Age provided');
	}
	this._age = age;
};

Human.prototype.getAge = function()
{
	return this._age;
};

Since there are no keywords like class, private, public or protected in Javascript it's no surprise there's no keyword extends aswell. In order to extend a class you have to use prototyping:

function Woman(age)
{
    this.setAge(age);
}

Woman.prototype = new Human();

Now we've created a new class Woman that inherits all methods and properties from Human by assigning Woman's prototype to new Human(). To show it's easily possible, I've also changed the constructor as it now takes age as parameter. Creating a new object Woman and reading the age looks like this:

var woman = new Woman(22);
alert(woman.getAge());

You can overload methods simply by redifining them. In this case we'll overload the getAge method where we'll add an additional check and then call the parent getAge method. Since you actually don't call the parent method but call the parent method in static way, it is important to add call(this) in order to call the method in the actual context.

Woman.prototype.getAge = function()
{
        if (this._age > 100) {
            throw('This person is probably already dead!');
        }
	return Human.prototype.getAge.call(this);
};

Multiple inheritance is possible, but not very easy. For a method using Swiss Inheritance, check this page. Extending static classes might be possible, but I don't know a way. Problem is you need to clone the parent class (which is not that easy in JavaScript), if you write it like this the child becomes the parent and the other way round, meaning if you add a method in the Child it is also available in the parent:

function Cookie()
{
	
}

Cookie.get = function()
{
	return 'something';
};

var CookieChild = Cookie;
alert(CookieChild.get());

Part 4 (probably the last one of the series for now) will cover scoping.

OOP in JavaScript - Part 2: Static classes and Singleton

by Dominik Jungowski

15. September 2009 Comments (4)

After I've covered normal classes in Part 1 of the series, the second part will focus on static classes and singletons. As before basic OOP and JavaScript knowledge is needed.

Generally writing and using static classes is monstly the same as normal classes. The difference is that you don't need to instantiate the object with new and you can't use prototyping nor this, since everything is in static context. One useful implementation for static classes is the Registry Design Pattern. First off we create the class with a property to store the registry values in afterwards:

function Registry()
{
}

Registry._data = {};

Right now, I can't really do a lot with this class, that's why I'll create a static method that allows me to set key-value-combinations:

Registry.set = function(key, value) {
    Registry._data[key] = value;
}

Now I'm able to register stuff in the registry. Since I don't need an instance of the class I can call my method directly:

Registry.set('userIsAuthorized', false);

I'll leave out the getter you'd still need for a useful registry.

If you want to prevent anyone from writing new Registry() you only have to throw an exception in the constructor:

function Registry()
{
    throw('You cannot instantiate Registry');
}

Maybe for some reason you wanna use Registry as a singleton. In that case you have to combine normal class methods and properties with static ones. You write the Registry as a normal class and implement one static property instance and one static method getInstance. The Registry class would then look like this:

function Registry()
{
}

Registry.instance = null;

Registry.getInstance = function() {
    if (Registry.instance === null) {
        Registry.instance = new Registry();
    }
    return Registry.instance;
}

Registry.prototype._data = {};

Registry.prototype.set = function(key, value) {
    this._data[key] = value;
}

Since JavaScript doesn't have access modifiers like private, public or protected I had to remove the exception from the constructor. You could do it with a randomly generated token passed to the constructor, but this method is not bulletproof like any other I can think of.

In part 3 (that'll come later this week) I will write about extending classes.