Small example of Prototype approach

It’s a beginner-focused explanation, but that’s just my writing style, in no way i’m trying to be condescending. :-)

(Versión en español en breve!)

Let’s dig a bit on protoype and inheritance in JS!

First we create a “Dog” function.

And we add a “Bark” function to our recently created “Dog” function

Now we are going to create “bailey”, our lovely dog friend.

BTW: Got the name from here http://dogtime.com/top-100-dog-names

We’ve only known each other for 8 lines of code, but i already like Bailey, it’s awesome.

Now, let’s make Bailey bark.
Copy and paste the code up there (dog3.js) to a console and then type the following:

bailey.bark();

You are going to get something like this:

Image for post
Image for post

It doesn’t work. :´(
Bailey doesn’t know that the bark function exists.

But we can fix it if instead of adding “Bark” to “Dog”, we add it to Dog’s Prototype.

It works! You can now run “bailey.actuallyBark()” to hear bailey :)

Ok, let’s see what happened here.

There are 2 things we need to know before we continue:

  1. In JS, everything, is an Object so what we did initially was to add “bark” as a property of “Dog”, so Dog knows about it, but not bailey. (Poor bailey)
    — You could run Dog.bark() and see that it works —

2. In JS, functions have a “prototype” property. You can check it by running Dog.prototype in the console.

So what’s the difference between “Bailey” and “Dog”?
Bailey is an instance of and “Dog”, we created it on line 12 when we run:

var bailey = new Dog(‘Bailey’)

Remember when we said Functions had a prototype?

When we run the “var bailey = new Dog()” line, what it does is to map the prototype of Dog as Bailey’s properties.

Or you could also say that bailey inherited its properties from “Dog”.

There is a lot more to prototypes, and JS than what we saw on the previous part of this post. (For example, we haven’t talked about the prototype chain yet, but that’s for another post)

So we know then what a prototype is, and how we can use it to create properties in the instances of a function.

But you could achieve the same results doing something like this:

You can run bailey.bark() and it will output ‘Guau!’

So what’s the difference then?

While bailey.bark() does indeed work, what we are doing is creating de “bark” function in every dog we create.
Or in more computer-science-words, we are allocating memory space for each barking function, in each instance of “Dog”.

However, when add the “actuallyBark” function into Dog’s prototype, each instance of Dog will be able to bark, but referencing the function in “Dog”.

Or in more computer-science-words, each “actuallyBark” function in each instance of Dog, is referencing the memory space of “actuallyBark” in “Dog”, thus making a better use of the available memory.

Trying to run “bailey.actuallyBark()” points javascript to some other place where the actual function is.
The cool part is, if you create many dogs, all their “actuallyBark()” functions will point to the same function, which can save you a lot of memory.

Here’s 2 images comparing the allocation timelines creating 1 Million new Dogs using both the “prototype” (2nd image) and “this” approach (1st image).

I know that having 1 Million instances of an object might not seem like a usual real life case. And it is really likely that by creating 100 objects you might not notice any substantial difference, but it it interesting to know how JavaScript behaves.

Sub Disclaimer

I this seems out of context, this post was created in order to complement a question I was asked :)
Also, i’ll translate to Spanish soon :)

NodersJS

¿Por qué? Porque nos gusta.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store