Monday , 20 November 2017
Home / Programming / JavaScript / Prototypes – Advanced JavaScript Tutorial
Prototypes
Prototypes

Prototypes – Advanced JavaScript Tutorial

Prototypes are a must know for any JavaScript developer. As you may know, JavaScript is classless. Instead, it uses prototypes. However, this subject confuses a lot of people.  In this tutorial, we’ll go more in-depth of what prototypes are. First, we’ll learn how to use them and then why you should use them.

Clear your script and add this bit of code.

We have an object called BankAccount. We use the function constructor way for creating objects here. We have 3 properties for the name, account type, and the amount of money inside the bank account. We also have a method for grabbing the account type.

Lastly, we create an instance of the BankAccount object and store it in JacksBankAccount. This is nothing you don’t already know about. Add this line of code.

We now have another instance of the BankAccount object except this time it’s for someone else.

So, what’s the point of all this?

As we’ve discussed before, every object created is stored somewhere on the visitor’s computer memory. Our BankAccount object has 3 properties and 1 method that also needs memory. This is because every instance has to recreate these properties and methods unique to each instance. Objects also take a while to create when done like this.

So, how do we save memory and make objects be created faster?

Simple! We use prototypes. Update the BankAccount object to this.

In the above example, we have the getAccountType() method stored in the prototype property instead of inside the constructor function.

Why do we do this?

Before I explain why, let me explain what the prototype property is. EVERY object has a property called prototype. Even objects like the String, Number and Boolean object have it. You don’t have to define it in your constructor function as JavaScript will create it for you.

The prototype property is actually an object. So what you end up having is an object inside of an object. So, what’s the use of this? Well, the prototype property is a special kind of object. Whenever you create a property or method inside of an object’s prototype, then you make that property/method available to all instances.

In our first example, every time an instance was created out of the BankAccount object the getAccountType() method was also created every time. Like I said, this takes up more memory and slows down the creation of the object.

However, when we stored it inside the object’s prototype, then it only gets created once. Any instances created after that, will not recreate the getAccountType() method. All instances share this method. Since this method doesn’t have to be recreated, then objects get created faster and less memory is used.

How do I use this method?

You can use the getAccountType() method like any other method in an object. Add this bit of code into your script.

As you can see, we don’t have to use the prototype property to access this method.

But wait, isn’t the getAccountType() method stored inside the prototype property? So shouldn’t we have to access that property first to access it’s methods and properties?

Nope! Here’s another special features about prototypes. Whenever you call a property or method, JavaScript will first search for it in the object. If it isn’t there, then JavaScript will search for it in the object’s prototype. So, in basic terms, JavaScript will automatically search for it in the prototype property for you!

How do I overwrite a property or method inside a prototype?

To put it simply, you can’t. Once you create a property or method inside a prototype, then that property or method is consistent throughout the whole program. Fortunately, there is a way to mask the prototype property. Don’t get what I mean? Let me show ya. We’re going to update our script drastically. Clear your script and add this bit of code.

Let’s first take a look at the BankAccount object. We removed the type parameter that was present in our previous example. Instead, we store the accountType inside the object’s prototype and set it to N/A. Now, every instance created with the BankAccount object has their account type set to N/A.

Next, we create 2 instances like before. However, we update the accountType of the JacksBankAccount instance to Checkings. We then output this into the document.

As I stated before, JavaScript will search the object for a property and method that was called. Then, it will search the prototype if nothing was found.

Now, you may think that we’re overwriting the accountType property in the prototype, but instead JavaScript creates the accountType property inside the BankAccount object itself. By doing this, the accountType masks the prototype’s version of accountType . This only applies to JacksBankAccount. Other instances aren’t affected.

This is another advantage of prototypes. You can have default values if one isn’t created in the object’s constructor function.

Why use Prototypes?

There are a couple of advantages such as saving memory and having object creation become faster. Using prototypes can really optimize the performance of your scripts. It’s important to note that properties/methods created inside the prototype object can not be overwritten after they’ve been created.

So, when should I use prototypes?

Whenever you have a property or method that will be consistent throughout all instances of the object. Our latest example has a property called accountType inside the prototype. We know for a fact that not all bank accounts will be N/A. Some will be savings and others checkings. So, change this back to the way it was. However, we know that the getAccountType() method will always be the same so it’s better left inside the prototype object.

Of course, you’re not limited to the prototype’s method and properties. If you decide you need to have a property or method unique to an instance, then you can do so by creating it inside the instance. I’ve already shown how to do this above.

Conclusion

Hopefully you get what prototypes are. If you have any confusion about what prototypes are, then please ask in the comments. I don’t mind clearing anything up just in case you have questions. We will go over more about prototypes in the next tutorial. For more information on prototypes, then go here .

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

3 comments

  1. Hm.. So prototypes are like creating common method/property, by making it program wont have to recreate the space in memory for each instance’s property/methods?

    is that it?

  2. Ruben,
    Your explanation is very lucid. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link