1
00:00:01,080 --> 00:00:02,040
<v Instructor>Now it's time</v>

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.