In the last video we saw how to create objects from constructor functions using the new keyword in this
video.
We're going to learn how to use multiple constructor functions without duplicating code.
The material here is going to be challenging.
So make sure that you've watched the video series on the keyword this before going forward.
Now let's imagine that we have two constructor functions one for a car and one for a motorcycle.
Here's the code for both of them and what we see here is nothing special just some functions that construct
objects using the new keyword.
But what's not great about this code.
Look how much code we're duplicating in the motorcycle function.
It would be really neat if we could somehow borrow the code from the card function and put it in the
motorcycle function.
So you might be thinking why don't we just call the car function inside of the motorcycle function.
The problem here is when we call the car function the key word this refers to the object that will be
created from the car function.
But that's the wrong thing.
What we need to do here is change the value of the keyword this to be the object created from the motor
cycle function.
So how can we change the value of the keyword.
This we go back to our third rule of figuring out the value of the keyword this with explicit binding
.
This means we want to use call apply or bind we can dismiss using bind because we don't want to return
a function definition so let's choose call or apply.
Better yet let's look at both and see which one might be a better choice as a warning.
The code I'm going to show you can be pretty confusing at first.
So feel free to pause the video try to read it first and put it in the chrome console to see exactly
what's happening.
So the car function looks the same but the fun stuff is happening in the motorcycle function instead
of duplicating the code from the car function.
We invoke the car function but change the context of the key word this to be the key word this.
What does that mean.
Well think back to our problem before when we didn't use call we lost the correct context of the key
word.
This the right value of the keyword.
This should be whatever object is being created from the motorcycle function.
When the new keyword is used the way we access that object is by using the keyword this inside of the
motorcycle function.
This is quite confusing.
So let's try to understand it again.
We want to remove duplication from our motorcycle function.
So what we're doing is borrowing the code from the car function by calling it inside of the motor cycle
function.
The problem here is that the keyword this inside of the car function is not the keyword this that we
want to use.
So we need to change the value of the keyword this to do that we use caller apply.
And as the first parameter to call or apply we specify what we would like the value of the keyword this
to be the value that we want.
The keyword this to be is the object that will be created from the motorcycle function.
The way that we get access to that object is by using the keyword this inside of the motorcycle function
.
That's why the first argument to call or apply is the keyword this which refers to the object created
from the motorcycle function.
When the new keyword is used if you're still tripped up on this no worries.
We're doing some pretty advanced javascript right here.
Pause the video and try these code examples.
And as always ask us any questions so we can use call or apply.
But remember the only difference is the second parameter with apply the second parameter to apply is
an array of arguments that are passed to the function so we can either place make model and year in
an array or we can make use of another special keyword the arguments keyword.
You may have seen arguments before but if not arguments is a list of all of the arguments that are passed
to a function it's not technically an array.
But for our purposes you can think of it as one for now here's a quick example using the arguments array
.
I'm going to make a function called list arguments which will return the arguments passed to the function
.
Now let's call list arguments with one two and three.
We will see we get back an array of the arguments passed to that function.
Now in our example we can use the arguments array instead of listing.
Make model and year.
Puts a pretty nice refactor.
We've gone from copying and pasting three lines of our car function to borrowing the car function changing
the context of the keyword this and passing in any arguments to that function in the next video.
We're going to recap what we learned about constructor functions and the new keyword.
See either