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

Prototypes – JavaScript Tutorial

This tutorial is part of the JavaScript tutorial series for beginners. To view the whole list of tutorials available and the order in which you should follow them, then click here.

Prototypes in JavaScript can get very complex. There’s a lot to go over. In this tutorial, we’ll only talk about the basics and it’s use for creating methods or properties after the creation of the object.

Whenever you drive a car, the amount of mileage goes up. So, let’s create a property that will hold the mileage and create a method for when you drive the car. However, we’re not going to create these inside the Car object. Instead, let’s add these properties and methods after we create the object.

If you don’t get what I mean, don’t worry, you will in a moment. Open up the script.js and clear your script. Next, add this bit of code.

Alright, nothing new here. We’re just creating an instance of the Car object and storing it in a variable named honda. Next add this bit of code after it.

So, we’re directly accessing the Car object. We’re then accessing the prototype property. What is the prototype property? After defining your class, you can’t just add properties and methods. You have to use the prototype property to add them. If someone tries accessing a method that doesn’t naturally exist in your class, then JavaScript will then look into that class’s prototypes. From there, if it finds one, then it’ll use the class’s prototypes.

After accessing the prototype property, then you just give your property or method a name. In our case, we want to create a property named mileage and assign this property a value of 0.

Let’s learn how to create a method with the prototype property now. Add this bit of code into your script.

Just like before, we’re accessing the Car object directly and then accessing the prototype property. We then define a method named drive. Next, we assign it a function instead of a value. We name this method drive(). The drive() method has 1 parameter which is the amount of miles the car is driven.

To access the mileage property. We use the this keyword. You don’t have to type the prototype property again. The mileage property has already been created and now we access this property directly. You use the this keyword because you’re inside the object again even though this method is defined within the prototype property. Just remember to use the this keyword when creating methods using the prototype property.

This method simply adds the amount of miles driven to the mileage.

So, let’s see this in action now. Add this bit of code into your script.

Our honda instance can now use the drive() method. We then output the mileage into the document. You should see 10 as the outputted message.

Why use Prototypes?

Let’s say you created a class and you decided to share it with other developers. You’re the kind of person to keep your class updated with new methods and properties. Sometimes you’ll even have to fix bugs. Because of this possibility, if a developer decides to go directly into your class and update the code. It can be overwritten if new code is released. Therefore, they have to rewrite their changes again. With prototypes, they can do this outside the class. If they need to make any changes, then they just do so with their prototypes. It helps separate the original code with the modified code.

This situation can be flipped where you need to add some code and the developer constantly updates the library.

Conclusion

All objects have the prototype property. Including the string, number, and math object. There’s more to prototypes than what I just said, but this is the basics of it. If you would like to learn more about prototypes, then after you’re finished this tutorial series, you should watch the advance series. It goes more in depth into prototypes. If you can’t wait, then here’s the documentation to the prototype property.

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 …

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