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.
var honda = new Car();
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.
Car.prototype.mileage = 0;
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.
Car.prototype.drive = function drive ( miles )
this.mileage += miles;
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.
honda.drive( 10 );
document.write( honda.mileage );
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.
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.