Back To Prototypes

It has been a little while since I last wrote. The local community college needed someone to teach their HTML/CSS class for their Winter quarter (January to March) and while I would have preferred to have taught a class on JavaScript it was still an opportunity to work with future developers who will be working with the web.

So having three months where what I have shared has been HTML/CSS I want to get back to talking about JavaScript and what better way then to go back to one of JavaScript's most distinctive and least understood features; prototypes. (Plus, I just presented on prototypes at the Boise Code Camp, my presentation is here).

What are prototypes again?

So according to Google (doing a search for "define prototype") it is:

a first, typical or preliminary model of something, especially a machine, from which other forms are developed or copied.

So does this even relate? After all we are talking about JavaScript prototypes not developing a new car or jet.

With JavaScript prototypes we are essentially building something to copy. We build a single object which has some specific behaviors and then we copy it to create new objects which share the behaviors of the original object. Like a prototype of a car just because it was the original and copies are made of it doesn't mean that we have to stop using it. The original object we created can still continue to be used as long as we want.

Going beyond the physical world

Because JavaScript objects aren't physical objects there are other cool things we can do with them. When we modify the original object which is being used as the prototype all of the "copies" behavior is also modified. Picture a blue car driving down the road at 65 mph when all of a sudden it is changed to red and given a more powerful engine so it accelerates to 85 mph without changing the amount of acceleration applied.

This can have dire consequences if you remove the breaks from the car prototype. However, if done right can give you some amazing ability to make on the fly changes to cars such as improved safety, fuel economy, or emissions. Imagine a world with no more recalls from the manufacturer.

With JavaScript you can create devastating code that is nearly impossible to debug or you can make powerful changes that update the user experience to match selections they make.

Things to know about Prototypes

Chaining

When you "copy" an object you are actually attaching the object being copied to a "special property" on the new object. Then when you look for a property on the object if it isn't there it checks the parent object through that "special property". Then since the parent object is an object in its own right it will check continue up the line checking its parent and its parents parent until it finds the property or it reaches an object without a parent attached to the "special property". In other words the objects are chained together through this "special property".

this

this means that the closest object with the requested property is what is used. This gives us the ability to override any property we want without affecting the parent in any way.

Read More

I have written about prototypes and how to use them before so you can review that article if you want to learn more about using them.

comments powered by Disqus