1
00:00:00,480 --> 00:00:06,030
In the last video we saw how to create objects from constructor functions using the new keyword in this

2
00:00:06,030 --> 00:00:06,720
video.

3
00:00:06,720 --> 00:00:11,690
We're going to learn how to use multiple constructor functions without duplicating code.

4
00:00:11,700 --> 00:00:13,790
The material here is going to be challenging.

5
00:00:13,860 --> 00:00:18,810
So make sure that you've watched the video series on the keyword this before going forward.

6
00:00:18,810 --> 00:00:24,030
Now let's imagine that we have two constructor functions one for a car and one for a motorcycle.

7
00:00:24,300 --> 00:00:29,520
Here's the code for both of them and what we see here is nothing special just some functions that construct

8
00:00:29,550 --> 00:00:31,660
objects using the new keyword.

9
00:00:31,890 --> 00:00:34,000
But what's not great about this code.

10
00:00:34,190 --> 00:00:38,010
Look how much code we're duplicating in the motorcycle function.

11
00:00:38,400 --> 00:00:43,950
It would be really neat if we could somehow borrow the code from the card function and put it in the

12
00:00:43,950 --> 00:00:45,360
motorcycle function.

13
00:00:45,780 --> 00:00:53,040
So you might be thinking why don't we just call the car function inside of the motorcycle function.

14
00:00:53,040 --> 00:00:59,760
The problem here is when we call the car function the key word this refers to the object that will be

15
00:00:59,760 --> 00:01:01,620
created from the car function.

16
00:01:01,890 --> 00:01:03,770
But that's the wrong thing.

17
00:01:03,780 --> 00:01:10,190
What we need to do here is change the value of the keyword this to be the object created from the motor

18
00:01:10,190 --> 00:01:12,660
cycle function.

19
00:01:12,780 --> 00:01:15,120
So how can we change the value of the keyword.

20
00:01:15,120 --> 00:01:21,600
This we go back to our third rule of figuring out the value of the keyword this with explicit binding

21
00:01:21,620 --> 00:01:21,990
.

22
00:01:22,350 --> 00:01:28,890
This means we want to use call apply or bind we can dismiss using bind because we don't want to return

23
00:01:28,950 --> 00:01:32,450
a function definition so let's choose call or apply.

24
00:01:32,460 --> 00:01:38,220
Better yet let's look at both and see which one might be a better choice as a warning.

25
00:01:38,220 --> 00:01:41,260
The code I'm going to show you can be pretty confusing at first.

26
00:01:41,550 --> 00:01:47,730
So feel free to pause the video try to read it first and put it in the chrome console to see exactly

27
00:01:47,790 --> 00:01:49,120
what's happening.

28
00:01:49,140 --> 00:01:54,570
So the car function looks the same but the fun stuff is happening in the motorcycle function instead

29
00:01:54,570 --> 00:01:57,000
of duplicating the code from the car function.

30
00:01:57,120 --> 00:02:03,870
We invoke the car function but change the context of the key word this to be the key word this.

31
00:02:03,930 --> 00:02:05,090
What does that mean.

32
00:02:05,490 --> 00:02:11,040
Well think back to our problem before when we didn't use call we lost the correct context of the key

33
00:02:11,040 --> 00:02:11,420
word.

34
00:02:11,450 --> 00:02:14,070
This the right value of the keyword.

35
00:02:14,070 --> 00:02:19,330
This should be whatever object is being created from the motorcycle function.

36
00:02:19,380 --> 00:02:27,000
When the new keyword is used the way we access that object is by using the keyword this inside of the

37
00:02:27,000 --> 00:02:28,560
motorcycle function.

38
00:02:28,620 --> 00:02:29,710
This is quite confusing.

39
00:02:29,760 --> 00:02:31,540
So let's try to understand it again.

40
00:02:31,890 --> 00:02:34,940
We want to remove duplication from our motorcycle function.

41
00:02:35,220 --> 00:02:41,100
So what we're doing is borrowing the code from the car function by calling it inside of the motor cycle

42
00:02:41,100 --> 00:02:42,420
function.

43
00:02:42,420 --> 00:02:48,780
The problem here is that the keyword this inside of the car function is not the keyword this that we

44
00:02:48,780 --> 00:02:50,170
want to use.

45
00:02:50,310 --> 00:02:56,010
So we need to change the value of the keyword this to do that we use caller apply.

46
00:02:56,310 --> 00:03:02,190
And as the first parameter to call or apply we specify what we would like the value of the keyword this

47
00:03:02,190 --> 00:03:04,470
to be the value that we want.

48
00:03:04,470 --> 00:03:10,020
The keyword this to be is the object that will be created from the motorcycle function.

49
00:03:10,020 --> 00:03:16,260
The way that we get access to that object is by using the keyword this inside of the motorcycle function

50
00:03:16,270 --> 00:03:16,730
.

51
00:03:17,160 --> 00:03:24,120
That's why the first argument to call or apply is the keyword this which refers to the object created

52
00:03:24,180 --> 00:03:25,980
from the motorcycle function.

53
00:03:26,040 --> 00:03:30,740
When the new keyword is used if you're still tripped up on this no worries.

54
00:03:30,870 --> 00:03:33,630
We're doing some pretty advanced javascript right here.

55
00:03:33,630 --> 00:03:36,300
Pause the video and try these code examples.

56
00:03:36,300 --> 00:03:41,150
And as always ask us any questions so we can use call or apply.

57
00:03:41,400 --> 00:03:47,460
But remember the only difference is the second parameter with apply the second parameter to apply is

58
00:03:47,460 --> 00:03:53,820
an array of arguments that are passed to the function so we can either place make model and year in

59
00:03:53,820 --> 00:04:00,440
an array or we can make use of another special keyword the arguments keyword.

60
00:04:00,540 --> 00:04:06,630
You may have seen arguments before but if not arguments is a list of all of the arguments that are passed

61
00:04:06,720 --> 00:04:09,610
to a function it's not technically an array.

62
00:04:09,780 --> 00:04:15,300
But for our purposes you can think of it as one for now here's a quick example using the arguments array

63
00:04:15,300 --> 00:04:15,970
.

64
00:04:16,170 --> 00:04:21,480
I'm going to make a function called list arguments which will return the arguments passed to the function

65
00:04:21,480 --> 00:04:22,170
.

66
00:04:22,170 --> 00:04:26,120
Now let's call list arguments with one two and three.

67
00:04:26,280 --> 00:04:30,480
We will see we get back an array of the arguments passed to that function.

68
00:04:30,570 --> 00:04:35,210
Now in our example we can use the arguments array instead of listing.

69
00:04:35,250 --> 00:04:37,220
Make model and year.

70
00:04:37,340 --> 00:04:38,870
Puts a pretty nice refactor.

71
00:04:39,090 --> 00:04:45,300
We've gone from copying and pasting three lines of our car function to borrowing the car function changing

72
00:04:45,300 --> 00:04:51,180
the context of the keyword this and passing in any arguments to that function in the next video.

73
00:04:51,210 --> 00:04:54,980
We're going to recap what we learned about constructor functions and the new keyword.

74
00:04:55,060 --> 00:04:55,700
See either