“Ah ha” Moments with Prototypes in JS

So I am getting back to learning more JavaScript. I have a list on my desktop and everyday my plan is to get into one of the topics in-depth.

What do I mean in-depth? Videos + readings + videos + readings over and over. So today’s focus was Prototypes. I feel like this is one of those concepts that you really have to look at from every angle and read the same thing over and over again until you actually understand it. Then once it clicks you’re like “Oh that’s it, not too hard or complex.”

Well I don’t know if it clicked yet but it is becoming more clear. It always helps me if I can have a useful reason to learn and understand something. Learning that prototypes can make your code and program more efficient grabbed my attention.

Running through a basic example of a construction function such as :

var Task = function(name){

this.name = name;

this.toString = function(){…}

}

led to a clear understanding of prototypes, at least in this easy example.

In this case every instance of “Task” would re-create the function “toString”. While this would work this is not the most effective way to design this.

Just by using

Task.prototype.complete = function(){
…
}

creates the function in the prototype and then every instance of this will be pointing to this function instead of making copy after copy after copy.

I still have much to learn about inheritance and the usage of prototypes but can already see how important it is in the long run.

follow me here.

— Brad