Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,080 --> 00:00:02,040
Now it's time
2
00:00:02,040 --> 00:00:05,040
to finally start using prototypes.
3
00:00:05,040 --> 00:00:07,180
And after this, you will feel
4
00:00:07,180 --> 00:00:09,340
like a real pro developer,
5
00:00:09,340 --> 00:00:10,173
believe me.
6
00:00:12,000 --> 00:00:14,550
And we're gonna continue with the example
7
00:00:14,550 --> 00:00:16,063
from the previous video.
8
00:00:17,690 --> 00:00:18,570
Okay.
9
00:00:18,570 --> 00:00:22,880
But now we're gonna talk about prototypes.
10
00:00:22,880 --> 00:00:25,650
So actually, we talked about prototypes,
11
00:00:25,650 --> 00:00:30,420
prototypal inheritance and delegation earlier already.
12
00:00:30,420 --> 00:00:34,020
But how does all of that actually work?
13
00:00:34,020 --> 00:00:37,650
Well, it can be summarized like this.
14
00:00:37,650 --> 00:00:41,600
So, first each and every function in JavaScript
15
00:00:41,600 --> 00:00:45,550
automatically has a property called prototype.
16
00:00:45,550 --> 00:00:49,140
And that includes, of course, constructor functions.
17
00:00:49,140 --> 00:00:51,500
Now every object that's created
18
00:00:51,500 --> 00:00:53,840
by a certain constructor function
19
00:00:53,840 --> 00:00:57,420
will get access to all the methods and properties
20
00:00:57,420 --> 00:01:01,830
that we define on the constructors prototype property.
21
00:01:01,830 --> 00:01:03,260
So just to visualize
22
00:01:04,170 --> 00:01:05,003
in our case,
23
00:01:05,003 --> 00:01:08,637
this would be person dot prototype.
24
00:01:10,980 --> 00:01:13,440
So the prototype property
25
00:01:13,440 --> 00:01:15,880
of the constructor function.
26
00:01:15,880 --> 00:01:18,750
So again, as I was just saying,
27
00:01:18,750 --> 00:01:21,210
all the objects that are created
28
00:01:21,210 --> 00:01:23,850
through this constructor function here
29
00:01:23,850 --> 00:01:25,270
will inherit,
30
00:01:25,270 --> 00:01:26,850
so they will get access
31
00:01:26,850 --> 00:01:28,920
to all the methods and properties
32
00:01:28,920 --> 00:01:32,383
that are defined on this prototype property.
33
00:01:33,320 --> 00:01:35,900
And so let's no actually add a method
34
00:01:35,900 --> 00:01:37,503
to this prototype property.
35
00:01:38,710 --> 00:01:41,420
And so, this is actually an object.
36
00:01:41,420 --> 00:01:44,120
And so we can now say calcAge
37
00:01:46,290 --> 00:01:48,280
and then we can simply set it
38
00:01:48,280 --> 00:01:50,153
to this same function here,
39
00:01:52,550 --> 00:01:56,723
so equal, and that's it.
40
00:01:58,050 --> 00:02:00,510
Now we get some error here
41
00:02:00,510 --> 00:02:04,850
and that's because I misspelled prototype.
42
00:02:04,850 --> 00:02:07,423
So that's type right here.
43
00:02:08,840 --> 00:02:10,930
And then let's actually take a look
44
00:02:10,930 --> 00:02:13,470
at his prototype property
45
00:02:13,470 --> 00:02:15,053
just for curiosity.
46
00:02:19,200 --> 00:02:22,373
So that's not comma, of course, it's the dot.
47
00:02:23,900 --> 00:02:27,110
And so here is that prototype property.
48
00:02:27,110 --> 00:02:28,610
And so you see that right now
49
00:02:28,610 --> 00:02:32,490
we already have the calcAge method in there.
50
00:02:32,490 --> 00:02:35,990
So before it was kind of an empty object
51
00:02:35,990 --> 00:02:39,450
so nevermind these two here.
52
00:02:39,450 --> 00:02:42,010
So basically it was empty before
53
00:02:42,010 --> 00:02:44,700
but now there is the calcAge method
54
00:02:44,700 --> 00:02:46,400
already in here,
55
00:02:46,400 --> 00:02:48,653
so this one that we just defined down here.
56
00:02:50,010 --> 00:02:51,160
Alright.
57
00:02:51,160 --> 00:02:53,950
And once again, remember how I said
58
00:02:53,950 --> 00:02:56,190
that each object created
59
00:02:56,190 --> 00:02:58,220
by this constructor function
60
00:02:58,220 --> 00:03:00,670
will now get access to all the methods
61
00:03:00,670 --> 00:03:03,110
of this prototype property.
62
00:03:03,110 --> 00:03:04,160
And so of course,
63
00:03:04,160 --> 00:03:06,110
also to calcAge.
64
00:03:06,110 --> 00:03:08,923
And so we should be able to do this.
65
00:03:10,030 --> 00:03:13,160
So Jonas, which is this object here
66
00:03:13,160 --> 00:03:14,970
which was of course created
67
00:03:14,970 --> 00:03:16,823
by this constructor function.
68
00:03:18,290 --> 00:03:19,713
And so, calcAge.
69
00:03:20,890 --> 00:03:22,760
And let's see.
70
00:03:22,760 --> 00:03:26,320
And indeed, we get to the correct age here.
71
00:03:26,320 --> 00:03:28,110
So it worked.
72
00:03:28,110 --> 00:03:29,350
Great.
73
00:03:29,350 --> 00:03:30,960
That's amazing.
74
00:03:30,960 --> 00:03:34,190
So we can now use this method here
75
00:03:34,190 --> 00:03:35,850
on the Jonas object
76
00:03:35,850 --> 00:03:38,020
even though it is not really
77
00:03:38,020 --> 00:03:40,630
on the object itself, right?
78
00:03:40,630 --> 00:03:42,433
So if we check our Jonas here,
79
00:03:43,690 --> 00:03:46,350
then you see that it contains of course
80
00:03:46,350 --> 00:03:48,830
the birth year and the first name,
81
00:03:48,830 --> 00:03:52,340
but it does not contain the calcAge method.
82
00:03:52,340 --> 00:03:54,640
But still, we have access to it
83
00:03:54,640 --> 00:03:57,163
because of prototypal inheritance.
84
00:03:58,240 --> 00:03:59,750
Okay.
85
00:03:59,750 --> 00:04:01,650
And of course the same is gonna work
86
00:04:01,650 --> 00:04:03,500
for Matilda here,
87
00:04:03,500 --> 00:04:07,320
and of course, also for the Jack object.
88
00:04:07,320 --> 00:04:08,730
Beautiful.
89
00:04:08,730 --> 00:04:12,720
So that effectively solves this problem
90
00:04:12,720 --> 00:04:13,960
that we had before
91
00:04:13,960 --> 00:04:16,160
when we added the calcAge method
92
00:04:16,160 --> 00:04:20,490
directly to each of the objects, remember that?
93
00:04:20,490 --> 00:04:23,070
So here we would have created a copy
94
00:04:23,070 --> 00:04:24,610
of this method here
95
00:04:24,610 --> 00:04:27,750
and attached it to every single object.
96
00:04:27,750 --> 00:04:30,350
And so that's why we don't do this.
97
00:04:30,350 --> 00:04:32,880
Instead, what we do is this.
98
00:04:32,880 --> 00:04:35,940
Because now there exists only one copy
99
00:04:35,940 --> 00:04:37,800
of this function.
100
00:04:37,800 --> 00:04:39,840
So only one of them exists,
101
00:04:39,840 --> 00:04:43,190
but then all of the objects that are created
102
00:04:43,190 --> 00:04:45,380
using this constructor function
103
00:04:45,380 --> 00:04:47,850
can basically reuse this function
104
00:04:47,850 --> 00:04:49,460
on themselves.
105
00:04:49,460 --> 00:04:51,010
And so, the disc keyword,
106
00:04:51,010 --> 00:04:53,220
of course, in each of them
107
00:04:53,220 --> 00:04:55,740
is as always set to the object
108
00:04:55,740 --> 00:04:57,560
that is calling the method.
109
00:04:57,560 --> 00:04:59,030
And so here that's Jonas
110
00:04:59,030 --> 00:05:01,480
and here that's gonna be Matilda.
111
00:05:01,480 --> 00:05:03,460
So just like we learned previously,
112
00:05:03,460 --> 00:05:06,330
the disc keyword is set to the object
113
00:05:06,330 --> 00:05:08,030
that is calling the method.
114
00:05:08,030 --> 00:05:08,990
Now right.
115
00:05:08,990 --> 00:05:11,960
So, in a nutshell, this is how we implement
116
00:05:11,960 --> 00:05:14,430
very basic prototypal inheritance
117
00:05:14,430 --> 00:05:16,920
in JavaScript and practice.
118
00:05:16,920 --> 00:05:19,900
So we just observed, that the Jonas
119
00:05:19,900 --> 00:05:21,960
and the Matilda objects
120
00:05:21,960 --> 00:05:26,600
are kind of somehow connected to the person, right?
121
00:05:26,600 --> 00:05:30,120
That's why they can have access to these methods
122
00:05:30,120 --> 00:05:32,470
or in this case to just this method
123
00:05:32,470 --> 00:05:37,040
that is located inside the prototype property of person.
124
00:05:37,040 --> 00:05:40,770
But how and why does this actually work?
125
00:05:40,770 --> 00:05:43,870
Well, it works because any object always
126
00:05:43,870 --> 00:05:46,820
has access to the methods and properties
127
00:05:46,820 --> 00:05:48,980
from its prototype.
128
00:05:48,980 --> 00:05:51,790
And the prototype of Jonas and Matilda
129
00:05:51,790 --> 00:05:53,993
is person dot prototype.
130
00:05:55,050 --> 00:05:57,290
And we can actually confirm that
131
00:05:57,290 --> 00:06:00,450
because each object has a special property
132
00:06:00,450 --> 00:06:03,513
called a underscore underscore proto.
133
00:06:04,820 --> 00:06:05,943
So like this.
134
00:06:06,840 --> 00:06:09,800
Underscore underscore proto
135
00:06:09,800 --> 00:06:12,910
and then again, underscore underscore.
136
00:06:12,910 --> 00:06:15,233
So this looks a bit weird, but,
137
00:06:16,378 --> 00:06:18,660
and this is just kind of how it works.
138
00:06:18,660 --> 00:06:20,550
So let's take a look.
139
00:06:20,550 --> 00:06:24,390
And so this is the prototype of Jonas.
140
00:06:24,390 --> 00:06:26,520
It's not the prototype property
141
00:06:26,520 --> 00:06:30,020
but it is simply the prototype, okay?
142
00:06:30,020 --> 00:06:33,010
And so here again, we see the calcAge function
143
00:06:33,010 --> 00:06:36,510
and that's why Jonas is able to use this.
144
00:06:36,510 --> 00:06:39,270
So to prototype of the Jonas object
145
00:06:39,270 --> 00:06:42,210
is essentially the prototype property
146
00:06:42,210 --> 00:06:43,893
of the constructor function.
147
00:06:44,920 --> 00:06:48,073
So let's quickly see that as well.
148
00:06:49,490 --> 00:06:51,663
So we can check that.
149
00:06:52,560 --> 00:06:55,510
So person dot prototype.
150
00:06:55,510 --> 00:06:57,690
And so this should not be true,
151
00:06:57,690 --> 00:06:59,523
and indeed it is.
152
00:07:00,460 --> 00:07:01,570
All right?
153
00:07:01,570 --> 00:07:03,590
But what I just said
154
00:07:03,590 --> 00:07:07,140
sounded incredibly confusing, didn't it?
155
00:07:07,140 --> 00:07:09,900
So shouldn't person dot prototype
156
00:07:09,900 --> 00:07:12,530
be the prototype of person,
157
00:07:12,530 --> 00:07:13,363
I mean
158
00:07:13,363 --> 00:07:15,450
should this prototype property here
159
00:07:15,450 --> 00:07:19,110
not be the prototype of person?
160
00:07:19,110 --> 00:07:21,530
Well, actually, no.
161
00:07:21,530 --> 00:07:24,280
So this is the confusing part.
162
00:07:24,280 --> 00:07:26,440
So person dot prototype here
163
00:07:26,440 --> 00:07:30,040
is actually not the prototype of person.
164
00:07:30,040 --> 00:07:33,600
But instead, it is what's gonna be used
165
00:07:33,600 --> 00:07:36,410
as the prototype of all the objects
166
00:07:36,410 --> 00:07:40,290
that are created with the person constructor function.
167
00:07:40,290 --> 00:07:43,420
So that's a subtle but important difference
168
00:07:43,420 --> 00:07:45,620
that you need to keep in mind.
169
00:07:45,620 --> 00:07:48,180
And, in fact, what I just said
170
00:07:48,180 --> 00:07:51,340
that is confirmed by this comparison
171
00:07:51,340 --> 00:07:53,020
that we just did here.
172
00:07:53,020 --> 00:07:57,110
So we just saw that Jonas's prototype
173
00:07:57,110 --> 00:07:59,800
which is this, is the prototype property
174
00:07:59,800 --> 00:08:02,870
of the person constructor function.
175
00:08:02,870 --> 00:08:05,450
And there are actually other built in methods
176
00:08:05,450 --> 00:08:07,533
that we can use to prove this.
177
00:08:10,010 --> 00:08:11,670
So on any object,
178
00:08:11,670 --> 00:08:15,000
for example, object dot prototype,
179
00:08:15,000 --> 00:08:19,220
we can test if this is a prototype of another object.
180
00:08:19,220 --> 00:08:21,713
So we can call is prototype,
181
00:08:24,600 --> 00:08:28,300
so is prototype
182
00:08:28,300 --> 00:08:33,300
like this of and then Jonas.
183
00:08:34,220 --> 00:08:37,000
And so this should also become true.
184
00:08:37,000 --> 00:08:39,100
And indeed it is.
185
00:08:39,100 --> 00:08:41,490
So this confirms one more time
186
00:08:41,490 --> 00:08:43,740
that person dot prototype
187
00:08:43,740 --> 00:08:47,730
is indeed the prototype of Jonas.
188
00:08:47,730 --> 00:08:52,420
And the same for Matilda, of course as well.
189
00:08:52,420 --> 00:08:54,222
But person dot prototype
190
00:08:54,222 --> 00:08:56,883
is not the prototype of person.
191
00:08:59,130 --> 00:09:01,193
So you see, it is false here.
192
00:09:02,840 --> 00:09:05,420
So, this very common confusion
193
00:09:05,420 --> 00:09:09,823
comes from bad naming of this property.
194
00:09:10,830 --> 00:09:13,270
So the fact that it's called prototype
195
00:09:13,270 --> 00:09:17,690
kind of implies that this is the prototype of person,
196
00:09:17,690 --> 00:09:21,310
but as we just learned, it is actually not.
197
00:09:21,310 --> 00:09:23,470
Probably shouldn't be called prototype
198
00:09:23,470 --> 00:09:28,470
but instead something like prototype of linked objects
199
00:09:29,380 --> 00:09:30,563
or something like this.
200
00:09:33,270 --> 00:09:34,800
So if this makes it easier
201
00:09:34,800 --> 00:09:37,310
you can think of the prototype property
202
00:09:37,310 --> 00:09:41,660
as prototype of linked objects property.
203
00:09:41,660 --> 00:09:44,970
Even though of course it's not called like this,
204
00:09:44,970 --> 00:09:48,400
but this would be a more honest name.
205
00:09:48,400 --> 00:09:50,930
So take some time to really understand
206
00:09:50,930 --> 00:09:54,823
what the prototype of what object actually is here.
207
00:09:55,740 --> 00:09:59,620
Now, anyway, where does this proto,
208
00:09:59,620 --> 00:10:02,040
property here, on the Jonas object
209
00:10:02,040 --> 00:10:03,880
actually come from?
210
00:10:03,880 --> 00:10:07,250
Well, remember the new operator
211
00:10:07,250 --> 00:10:08,723
that we talked about before,
212
00:10:09,610 --> 00:10:12,760
well, it contains this step number three
213
00:10:12,760 --> 00:10:15,310
which links the empty new object
214
00:10:15,310 --> 00:10:17,120
to the prototype.
215
00:10:17,120 --> 00:10:20,510
And so basically, it is this step number three
216
00:10:20,510 --> 00:10:24,500
which will create this proto property.
217
00:10:24,500 --> 00:10:27,220
So it creates this proto property
218
00:10:27,220 --> 00:10:31,040
and it sets its value to the prototype property
219
00:10:31,040 --> 00:10:33,440
of the function that is being called.
220
00:10:33,440 --> 00:10:37,720
And so that's exactly what is written here, right?
221
00:10:37,720 --> 00:10:40,360
So again, it sets the proto property
222
00:10:40,360 --> 00:10:43,980
on the object to the prototype property
223
00:10:43,980 --> 00:10:47,360
of the constructor function.
224
00:10:47,360 --> 00:10:50,400
And so this is how JavaScript knows internally
225
00:10:50,400 --> 00:10:52,890
that the Jonas object is connected
226
00:10:52,890 --> 00:10:54,653
to person dot prototype.
227
00:10:55,570 --> 00:10:57,640
And in fact, when we check out
228
00:10:57,640 --> 00:10:59,980
the Jonas object here
229
00:10:59,980 --> 00:11:03,690
we can indeed also see that property in here.
230
00:11:03,690 --> 00:11:05,780
So it's also right here,
231
00:11:05,780 --> 00:11:07,870
and if we open that up,
232
00:11:07,870 --> 00:11:10,830
then you see exactly person dot prototype
233
00:11:10,830 --> 00:11:15,310
which contains this calcAge function, all right?
234
00:11:15,310 --> 00:11:17,530
So I'm spending a lot of time here
235
00:11:17,530 --> 00:11:19,040
for you to really understand
236
00:11:19,040 --> 00:11:21,610
what this proto property here is
237
00:11:21,610 --> 00:11:24,570
and what the prototype of the constructor is
238
00:11:24,570 --> 00:11:26,580
and how they are all linked
239
00:11:26,580 --> 00:11:29,870
because this is one of the most important things,
240
00:11:29,870 --> 00:11:32,210
and also one of the most difficult things
241
00:11:32,210 --> 00:11:34,590
to understand in JavaScript.
242
00:11:34,590 --> 00:11:37,710
But I hope that it's becoming increasingly clear
243
00:11:37,710 --> 00:11:40,010
and there will also be a couple of diagrams
244
00:11:40,010 --> 00:11:42,610
in the next video that will basically
245
00:11:42,610 --> 00:11:44,670
bring all this knowledge together
246
00:11:44,670 --> 00:11:46,623
in an easier to understand way.
247
00:11:47,690 --> 00:11:50,400
So, by now you're probably sick
248
00:11:50,400 --> 00:11:52,730
of hearing the word prototype
249
00:11:52,730 --> 00:11:55,073
but I just wanted to quickly show you
250
00:11:55,073 --> 00:11:58,840
that we can also set properties on the prototype.
251
00:11:58,840 --> 00:12:01,170
And so not just methods.
252
00:12:01,170 --> 00:12:04,403
So let's say person dot prototype,
253
00:12:05,260 --> 00:12:06,573
dot species,
254
00:12:07,520 --> 00:12:09,010
and so this is something
255
00:12:09,010 --> 00:12:10,897
that all of the objects here
256
00:12:10,897 --> 00:12:13,260
will have in common,
257
00:12:13,260 --> 00:12:15,273
and so that's Homo Sapiens.
258
00:12:17,780 --> 00:12:18,613
Now, right?
259
00:12:18,613 --> 00:12:21,720
And so, if we now take a look at Jonas
260
00:12:21,720 --> 00:12:24,220
and at Matilda also,
261
00:12:24,220 --> 00:12:27,080
then we should see this property,
262
00:12:27,080 --> 00:12:29,620
so the species on both of them
263
00:12:30,700 --> 00:12:33,070
and actually not directly here
264
00:12:33,070 --> 00:12:36,120
but indeed they will be here
265
00:12:36,120 --> 00:12:38,070
in this prototype.
266
00:12:38,070 --> 00:12:42,680
And so, we will be able to do Jonas dot species
267
00:12:42,680 --> 00:12:45,023
and Matilda dot species.
268
00:12:46,300 --> 00:12:49,680
And both of these objects will then inherit
269
00:12:49,680 --> 00:12:52,700
so they will get access to this property
270
00:12:52,700 --> 00:12:54,820
from the prototype.
271
00:12:54,820 --> 00:12:57,360
So, you see, in both cases,
272
00:12:57,360 --> 00:12:59,743
we indeed get Homo Sapiens.
273
00:13:00,700 --> 00:13:04,110
Now however, since when we take a look
274
00:13:04,110 --> 00:13:05,303
at these objects,
275
00:13:06,390 --> 00:13:10,020
well, as we just saw this property is not really
276
00:13:10,020 --> 00:13:11,820
directly in the object,
277
00:13:11,820 --> 00:13:14,350
so it's not its own property.
278
00:13:14,350 --> 00:13:16,950
So own properties are only the ones
279
00:13:16,950 --> 00:13:20,690
that are declared directly on the object itself.
280
00:13:20,690 --> 00:13:24,390
So, not including the inherited properties.
281
00:13:24,390 --> 00:13:26,630
And actually in JavaScript, there is a way
282
00:13:26,630 --> 00:13:28,600
of checking for that.
283
00:13:28,600 --> 00:13:30,290
So, we can do Jonas
284
00:13:30,290 --> 00:13:34,393
as own property.
285
00:13:35,500 --> 00:13:37,933
So that's with a capital P here.
286
00:13:38,950 --> 00:13:40,560
And so let's first check
287
00:13:40,560 --> 00:13:42,963
for first name,
288
00:13:43,980 --> 00:13:47,000
and indeed this object does have its own property
289
00:13:47,000 --> 00:13:48,760
with this name
290
00:13:48,760 --> 00:13:50,513
but now if we try species,
291
00:13:51,835 --> 00:13:54,370
then that is gonna be false.
292
00:13:54,370 --> 00:13:57,240
And again, that's because this property
293
00:13:57,240 --> 00:14:00,890
is not really inside of the Jonas object.
294
00:14:00,890 --> 00:14:02,900
It simply has access to it
295
00:14:02,900 --> 00:14:05,130
because of its prototype.
296
00:14:05,130 --> 00:14:09,113
So because it's in the prototype property of person.
297
00:14:10,250 --> 00:14:13,933
So right here, right?
298
00:14:15,030 --> 00:14:17,500
And sometimes, this method here
299
00:14:17,500 --> 00:14:21,210
can be quite helpful in certain situations.
300
00:14:21,210 --> 00:14:24,040
Now right, and that is probably enough
301
00:14:24,040 --> 00:14:25,660
for one lecture.
302
00:14:25,660 --> 00:14:27,770
And as I just mentioned earlier
303
00:14:27,770 --> 00:14:28,840
in the next video
304
00:14:28,840 --> 00:14:30,950
I'm gonna show you a nice diagram
305
00:14:30,950 --> 00:14:32,380
of all of this.
306
00:14:32,380 --> 00:14:34,493
So, stay tuned for that one.
20568
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.