1
00:00:00,420 --> 00:00:01,470
Welcome back.

2
00:00:01,470 --> 00:00:04,840
In this video we're going to be talking about prototypes.

3
00:00:04,920 --> 00:00:10,590
We'll first understand what the prototype object is we'll then describe and diagram the relationship

4
00:00:10,590 --> 00:00:16,290
between Dunder Prato prototype and constructor will then add methods and properties on the prototype

5
00:00:16,290 --> 00:00:18,720
object to write more efficient code.

6
00:00:18,750 --> 00:00:23,730
And finally we'll be able to explain the difference between adding methods and properties to the prototype

7
00:00:24,060 --> 00:00:25,890
versus the constructor function.

8
00:00:26,370 --> 00:00:31,920
But before we get deep into prototypes Let's quickly review one more time with the new keyword does

9
00:00:32,610 --> 00:00:35,730
first it creates an object out of thin air.

10
00:00:35,730 --> 00:00:42,180
Second it sets the value of the key word this to be that object created in the previous step.

11
00:00:42,190 --> 00:00:46,200
Third it adds a return to the constructor function.

12
00:00:46,200 --> 00:00:53,280
Finally it creates a link which we can access as Dunder Prato between the object created and the prototype

13
00:00:53,280 --> 00:00:55,950
property of the constructor function.

14
00:00:55,950 --> 00:00:58,020
Let's talk a bit more about that point.

15
00:00:58,050 --> 00:01:01,330
Better yet let's diagram this relationship.

16
00:01:01,440 --> 00:01:03,170
Don't be too intimidated by this diagram.

17
00:01:03,240 --> 00:01:06,330
Let's walk through it step by step as a guide.

18
00:01:06,330 --> 00:01:10,280
A circle is a function and a square is an object.

19
00:01:10,290 --> 00:01:16,500
So here we have a person constructor function which has a property called prototype which is an object

20
00:01:17,250 --> 00:01:23,160
that object has a property on it called constructor which points back to the original constructor function

21
00:01:23,160 --> 00:01:24,360
.

22
00:01:24,360 --> 00:01:31,320
If properties or methods are placed on the person prototype they can be accessible from any object created

23
00:01:31,320 --> 00:01:37,860
from that constructor function the way in which these objects which are created by the constructor function

24
00:01:38,190 --> 00:01:43,650
get access to the prototype object is through the donder Prato link.

25
00:01:43,890 --> 00:01:47,720
This link gets established when the new keyword is used.

26
00:01:47,940 --> 00:01:52,860
To recap every constructor function has a property on it called prototype.

27
00:01:52,860 --> 00:01:58,150
The prototype property is an object which can also have methods and properties attached to it.

28
00:01:58,200 --> 00:02:04,320
These methods and properties are shared and accessible by any object that is created from that constructor

29
00:02:04,320 --> 00:02:05,100
function.

30
00:02:05,130 --> 00:02:07,620
When the new keyword is used.

31
00:02:07,710 --> 00:02:10,360
Now let's see what this looks like with the code example.

32
00:02:10,410 --> 00:02:14,370
I'm going to copy and paste this code in the chrome console and we can walk through each line of it

33
00:02:14,370 --> 00:02:14,970
.

34
00:02:15,180 --> 00:02:20,560
First I have the constructor function called person with a property called name.

35
00:02:20,610 --> 00:02:26,220
Since I created a function we can already see that there is a property on the function called prototype

36
00:02:26,220 --> 00:02:27,480
.

37
00:02:27,480 --> 00:02:33,830
Now I'm going to create two objects called an LP from my constructor function using the new key.

38
00:02:34,350 --> 00:02:40,110
Since I use the new keyword a property has been added to each of these objects called Dunder produ which

39
00:02:40,110 --> 00:02:43,400
points to the prototype property on the person constructor.

40
00:02:43,710 --> 00:02:48,360
We'll discuss in the next video why this prototype property is so useful.

41
00:02:48,360 --> 00:02:53,910
Finally the prototype object has a property on it called constructor which points back to the original

42
00:02:53,910 --> 00:02:55,440
constructor function.

43
00:02:55,530 --> 00:03:00,540
The constructor property is not something you'll be using or manipulating frequently but it's an important

44
00:03:00,540 --> 00:03:06,150
part in a concept called inheritance which we'll discuss in another series before we end this video

45
00:03:06,150 --> 00:03:06,340
.

46
00:03:06,360 --> 00:03:11,070
I want to jump back a couple of slides to the diagram so that we can go over it one more time.

47
00:03:11,340 --> 00:03:15,480
Remember circles are functions and squares are objects.

48
00:03:15,480 --> 00:03:20,820
So here I have two objects called Ellie and cold which were created from the person constructor function

49
00:03:20,820 --> 00:03:21,270
.

50
00:03:21,270 --> 00:03:22,290
The green circle.

51
00:03:22,290 --> 00:03:24,780
Since I use the new keyword when I created them.

52
00:03:24,960 --> 00:03:30,960
Each of these objects has a property called Dunder Prado which points to the prototype property on the

53
00:03:30,960 --> 00:03:32,530
person constructor.

54
00:03:32,940 --> 00:03:38,010
In the next video we'll examine the prototype object and see just how useful it is.

55
00:03:38,010 --> 00:03:38,460
See that