Prototypal nature of JavaScript

Hated by many, loved by others. JavaScript is undeniably one of those troubled languages. The fact that it’s implementation and support is not compatible across different web browser makes it even worse and possibly hated by web developers. I would like to look closer into one of the JavaScript features, prototyping.

Some facts

JavaScript is object oriented language. It is “so much” object oriented that even Functions are first-class objects. It could be a surprise for a programmer (like myself) who used to classical object oriented approach, used in Java or C#.

It means that Functions can have properties, another functions, objects etc. Functions could be use to change state of the object or make calculations. They could also be used to create another Functions based on original.

Classes and Prototypes

Classical object oriented language is using types of object, or classes to describe it. In Prototypes one object is describing other, it is almost comparable to cloning.

To make it easier to understand I’d like to use this example:

1. Using classical approach if I asks someone to make me another Aston Martin, I would be asked to get technical specs for it so it could be build it.
2. Using prototypal approach if I ask for Ferrari I will be asked to bring one so they can look at it and build it.

I can define my object and if I need another copy of it I just use prototype to get the same one. In JavaScript world it also means that once I got a bunch of objects that have the same prototype, if I add new property to it I will be able to use it in all of them.

All objects have one common prototype that is Object prototype. Prototype for functions is Function prototype. One useful object method to determine if some object’s property is its own or inherited from its prototype is hasOwnProperty method.

Few examples

To create new Object in JavaScript we don’t need to describe it, just create it:

var myObject = { fooProperty: ‘some value’, barProperty: 2 };

Now if we would like another copy of it we could type something like this:

var Tmp = function(){};
Tmp.prototype = myObject;
var newObject = new Tmp();

You might wonder why is this necessary, looks messy and is not clear. Simple construction :

var newObject = {};
newObject.prototype = myObject;

should work. The reason that it is not is because in first line you are creating the object. Once it’s created it’s got Object as prototype its prototype. Adding another prototype to it’s chain of prototypes will not automatically make it inherit all the properties of another prototype.

Adding new property to prototype could be done using this contruction:

var newObject = {};
newObject.prototype.foo = “some text”;
newObject.prototype.bar = function(){
// do something
}

Multiple prototypes, chain of prototypes

It is impossible to define multiple prototypes for an object.

var objectA = { foo: ‘blah’ };
var objectB = { bar: ‘blah two’ };

var Tmp = function(){};
Tmp.prototype = objectA;
Tmp.prototype = objectB;
var newObject = Tmp.new();

In here newObject will only inherit properties of a last assign prototype and it would be objectB.

If you want to inherit multiple prototypes you have to get Function to help you.

function A(){
    this.foo = ‘blah’;
};
function B(){
    this.bar = ‘another blah’;
};
B.prototype = new A();
var c = new B();

Little help from jQuery

jQuery has a method that helps us to extend one object with some properties from another. Here how you can use it:

function A(){
   this.foo = ‘some text’;
}
var anotherObject = { bar: 2 };
$.extend(A.prototype, anotherObject);

 

Cheers, Greg