Huzzah

When I first started learning Javascript, everything was magic.
Deep in Codeacademy's awesome Javascript course, something like:

var Class = function(item, price){
    this.item: item,
    this.price: price,
    this.method: function(){return item*price;}
}
// For the uninitiated, this is just a class constructor

looked like a sorcerer's tome - a very specific sequence of letters that would give you a result, but had no intrinsic meaning of its own. It was just a given that you had to memorize these strange incantations and recite them to bring life to the machine.

Chief among these was the use of prototype for me, like so:

Class.prototype.newMethod = function(xxx){
    //do some stuff
}

While I understood that typing this sequence would attach the newMethod function to all members of this class, I assumed the prototype keyword had some very special properties in Javascript that allowed it to have this behavior. I imagined it raining down function goodness on all the instances of Class like some fairy dust from the heavens.

But it ain't

Well, it turns out that while prototype is a cool naming convention, it's really just a plain-old property that happens to be used in a cool way. Seriously, it's just a property - you could assign it to anything:

"nope".prototype = { objectProperty: "I am a walrus"}

Not that you would, of course.

Or give it any sub-properties:

"yep".prototype.sayYes = "Yes We Can"

But the key is that at it's essense, it's really just another property on any Javascript object that you can assign.

You could visualize it in the constructor alongside the other properties:

var Class = function(item, price){
    this.item: item,
    this.price: price,
    this.method: function(){return item*price;},
    this.prototype.nomsauce = "nom"
}

though one is unlikely to write it this way due to convention.

Aww prototype you're cool anyways

This makes it almost sound useless, but there IS a feature of JavaScript that uses the prototype property in cool ways – enter the prototype chain.

You may have seen this as an application for prototype:

Class.prototype = Object.create(someOtherClass);
Class.prototype.constructor = Class;

This also appeared as magic to me at first, but once broken down, it's quite simple.

Above we're creating a delegation relationship between Class and someOtherClass by first initializing the prototype of our Class to be an instance of someOtherClass, then resetting the constructor property of that prototype to be set to our Class.

This means that our Class prototype now has access to the methods that someOtherClass had!

This can be done multiple times (ie, say you had another class made from Class, and perhaps another one that someOtherClass had been originally created from), and by linking these together in the manner above we're able to create a chain of "subclasses".

Sooo...how does this affect prototype?

Well, when you link things in this way, Javascript knows that it can look for a property "up the chain" if it doesn't find it on the object you're trying to reference it on.

Assuming someClass had a property numberOfWinglets, you could now access this from an instance of Class like so:

var myClass = new Class("shoes", 1200);

myClass.numberOfWinglets // set to 1000 on someClass!

Even though we don't have the numberOfWinglets property local to Class, we can still look it up.

But it still ain't magic

But the thing is, unless you wire up the prototype property in the manner above, Javascript has no idea what you want to do with it. It really is just a property!

It's the standard convention to do things this way, so I'd suggest sticking with it, but it's good to know there isn't some kind of voodoo going on.

About the author
comments powered by Disqus