Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,320 --> 00:00:04,160
Let's now check out prototypal inheritance
2
2
00:00:04,160 --> 00:00:07,640
and the prototype chain on built in objects
3
3
00:00:07,640 --> 00:00:09,073
such as arrays.
4
4
00:00:10,830 --> 00:00:13,550
But actually let's start this lecture
5
5
00:00:13,550 --> 00:00:15,720
by inspecting some of the stuff
6
6
00:00:15,720 --> 00:00:19,040
that we just talked about in the last lecture.
7
7
00:00:19,040 --> 00:00:22,033
And we will keep using this person example
8
8
00:00:22,033 --> 00:00:23,493
that we have been building.
9
9
00:00:26,790 --> 00:00:31,663
So let's start by taking a look at Jonas._ _ proto
10
10
00:00:34,890 --> 00:00:38,300
And we already know that this is the prototype of Jonas
11
11
00:00:38,300 --> 00:00:42,710
which is exactly the prototype property of person.
12
12
00:00:42,710 --> 00:00:44,900
And so therefore it is this object
13
13
00:00:44,900 --> 00:00:49,870
which contains the Clock H-method that we defined earlier.
14
14
00:00:49,870 --> 00:00:52,970
So up here and also this property
15
15
00:00:52,970 --> 00:00:57,730
so this species property, but now let's actually move up
16
16
00:00:57,730 --> 00:01:01,350
in the prototype chain and essentially take a look
17
17
00:01:01,350 --> 00:01:05,460
at the prototype of Jonas's prototype.
18
18
00:01:05,460 --> 00:01:06,900
And do you remember
19
19
00:01:06,900 --> 00:01:09,723
from the last video, what that's gonna be?
20
20
00:01:10,900 --> 00:01:12,383
Well, let's see.
21
21
00:01:13,230 --> 00:01:17,523
And it is indeed the prototype property of object.
22
22
00:01:19,090 --> 00:01:20,690
So that's why you can see
23
23
00:01:20,690 --> 00:01:23,800
that constructor is the object here.
24
24
00:01:23,800 --> 00:01:26,580
And then right away, we see this method
25
25
00:01:26,580 --> 00:01:29,760
that we actually already studied in the last video.
26
26
00:01:29,760 --> 00:01:32,040
So this has own property.
27
27
00:01:32,040 --> 00:01:35,620
And so this is the reason why we can do this.
28
28
00:01:35,620 --> 00:01:38,320
So why we can call has own property
29
29
00:01:38,320 --> 00:01:42,423
on Jonas like we did here in one of the earlier videos.
30
30
00:01:44,310 --> 00:01:48,410
So again, we learned in the last lecture that this works
31
31
00:01:48,410 --> 00:01:50,720
because of the prototype chain
32
32
00:01:50,720 --> 00:01:52,100
and in particular,
33
33
00:01:52,100 --> 00:01:55,700
because this method here is in this prototype
34
34
00:01:55,700 --> 00:01:57,510
of Jonas's prototype.
35
35
00:01:57,510 --> 00:02:00,460
And so, yeah, that's this object
36
36
00:02:00,460 --> 00:02:02,683
that we are inspecting right now.
37
37
00:02:04,020 --> 00:02:04,853
All right.
38
38
00:02:06,570 --> 00:02:09,580
Okay, but let's take this one step further
39
39
00:02:09,580 --> 00:02:11,150
and check out the prototype
40
40
00:02:11,150 --> 00:02:12,647
of the prototype
41
41
00:02:12,647 --> 00:02:14,550
of the prototype.
42
42
00:02:14,550 --> 00:02:17,513
And do you remember what this one is?
43
43
00:02:18,600 --> 00:02:19,570
That's right.
44
44
00:02:19,570 --> 00:02:21,130
It is no.
45
45
00:02:21,130 --> 00:02:25,180
And so that's because object.prototype is usually the top
46
46
00:02:25,180 --> 00:02:27,110
of the scope chain.
47
47
00:02:27,110 --> 00:02:29,830
So this one here right?
48
48
00:02:29,830 --> 00:02:33,497
So this one is gonna be object.prototype.
49
49
00:02:36,440 --> 00:02:38,310
And so that's the top of
50
50
00:02:40,330 --> 00:02:42,380
the prototype chain.
51
51
00:02:42,380 --> 00:02:43,213
Okay.
52
52
00:02:44,060 --> 00:02:45,460
Now we can also take a look
53
53
00:02:45,460 --> 00:02:48,320
at that strange constructor property
54
54
00:02:48,320 --> 00:02:50,993
that we also saw earlier.
55
55
00:02:52,800 --> 00:02:57,070
So remember person.prototype itself
56
56
00:02:57,070 --> 00:02:59,600
has a constructor property
57
57
00:02:59,600 --> 00:03:04,250
which as we said, will point back to the person itself.
58
58
00:03:04,250 --> 00:03:07,453
So constructor, like this.
59
59
00:03:08,370 --> 00:03:12,260
And so here we actually get the function itself.
60
60
00:03:12,260 --> 00:03:15,000
Now, if we want to inspect that function here
61
61
00:03:15,000 --> 00:03:16,450
we need to use console.dir
62
62
00:03:18,780 --> 00:03:20,340
And so here, indeed
63
63
00:03:20,340 --> 00:03:24,803
we see that the constructor property points back at person.
64
64
00:03:25,640 --> 00:03:27,170
So that's this.
65
65
00:03:27,170 --> 00:03:30,010
Now to make things a bit more complicated even,
66
66
00:03:30,010 --> 00:03:33,763
let's now take a look at the prototype of a function.
67
67
00:03:34,700 --> 00:03:37,870
So any function of course is also an object.
68
68
00:03:37,870 --> 00:03:41,640
And so therefore it also has a prototype
69
69
00:03:41,640 --> 00:03:44,352
but maybe this is a bit too confusing.
70
70
00:03:44,352 --> 00:03:47,030
So let's just leave it here.
71
71
00:03:47,030 --> 00:03:50,710
So I will first show you the prototype of arrays
72
72
00:03:50,710 --> 00:03:54,780
and maybe then we can move a bit further to functions.
73
73
00:03:54,780 --> 00:03:57,070
So actually let's do that now.
74
74
00:03:57,070 --> 00:03:58,540
So let's create an array
75
75
00:04:01,470 --> 00:04:04,403
just like with any random numbers.
76
76
00:04:06,300 --> 00:04:08,653
So the values here don't matter at all.
77
77
00:04:09,620 --> 00:04:11,390
All I am interested in
78
78
00:04:11,390 --> 00:04:15,293
is now to take a look at the proto property.
79
79
00:04:16,980 --> 00:04:18,963
So the prototype of the array.
80
80
00:04:20,230 --> 00:04:21,900
So let's see.
81
81
00:04:21,900 --> 00:04:23,783
And here it is.
82
82
00:04:24,700 --> 00:04:27,460
So this is the prototype of array
83
83
00:04:28,410 --> 00:04:29,910
and you see that here
84
84
00:04:29,910 --> 00:04:33,500
we have all these methods that we already know.
85
85
00:04:33,500 --> 00:04:35,640
So we have fill, we have filter,
86
86
00:04:35,640 --> 00:04:40,260
find, find index and all of these methods that we studied
87
87
00:04:40,260 --> 00:04:42,590
in one of the earlier sections.
88
88
00:04:42,590 --> 00:04:46,260
And so this is the reason why all the arrays get access
89
89
00:04:46,260 --> 00:04:47,883
to all of these methods.
90
90
00:04:48,810 --> 00:04:50,010
So each array
91
91
00:04:50,010 --> 00:04:53,270
does of course not contain all of these methods
92
92
00:04:53,270 --> 00:04:57,150
but instead, each array will inherit these methods
93
93
00:04:57,150 --> 00:04:58,483
from its prototype.
94
94
00:04:59,500 --> 00:05:00,913
Am I right?
95
95
00:05:00,913 --> 00:05:02,770
And we can also check out
96
96
00:05:02,770 --> 00:05:05,550
that this prototype has got to be
97
97
00:05:05,550 --> 00:05:10,550
exactly array which is the constructor function.prototype.
98
98
00:05:12,550 --> 00:05:15,490
So one more time, the prototype property
99
99
00:05:15,490 --> 00:05:19,460
of the constructor is gonna be the prototype
100
100
00:05:19,460 --> 00:05:22,933
of all the objects created by that constructor.
101
101
00:05:24,110 --> 00:05:27,113
And so let's see, and it is true indeed.
102
102
00:05:28,140 --> 00:05:30,550
And just like an object
103
103
00:05:30,550 --> 00:05:34,210
using this shorthand, basically ,
104
104
00:05:34,210 --> 00:05:37,033
is the same as using new array.
105
105
00:05:38,470 --> 00:05:41,000
And so therefore whenever we create an array
106
106
00:05:41,000 --> 00:05:46,000
like this, it is indeed created by the array constructor.
107
107
00:05:46,120 --> 00:05:49,520
And so that's why all of this works behind the scenes.
108
108
00:05:49,520 --> 00:05:52,560
But of course, this is not yet the end
109
109
00:05:52,560 --> 00:05:56,403
of the prototype chain as we saw in the last video.
110
110
00:05:59,120 --> 00:06:01,660
So let's see.
111
111
00:06:01,660 --> 00:06:05,233
And so now we are back to having object dot prototype.
112
112
00:06:06,362 --> 00:06:07,220
And you see.
113
113
00:06:07,220 --> 00:06:10,243
So this again now has on property
114
114
00:06:10,243 --> 00:06:11,610
and then all of these methods
115
115
00:06:11,610 --> 00:06:15,100
here that are available for objects.
116
116
00:06:15,100 --> 00:06:16,500
And one more time,
117
117
00:06:16,500 --> 00:06:19,440
that is simply because the prototype itself here
118
118
00:06:19,440 --> 00:06:20,850
is an object.
119
119
00:06:20,850 --> 00:06:25,450
And so any object has access to all of these methods.
120
120
00:06:25,450 --> 00:06:28,720
All right, now we would be able to
121
121
00:06:28,720 --> 00:06:32,623
see the exact same thing also directly in the console.
122
122
00:06:33,570 --> 00:06:36,740
So if I check out the array here
123
123
00:06:36,740 --> 00:06:39,310
and open it, then here in the bottom
124
124
00:06:39,310 --> 00:06:44,070
you will see that we have the prototype property right here.
125
125
00:06:44,070 --> 00:06:47,320
So if we click that, then here, one more time
126
126
00:06:47,320 --> 00:06:50,493
we get all these array methods that we already know.
127
127
00:06:51,410 --> 00:06:52,450
Okay.
128
128
00:06:52,450 --> 00:06:55,220
And if we check the documentation on MDN
129
129
00:06:56,730 --> 00:07:00,290
for example, for filter, then you see
130
130
00:07:00,290 --> 00:07:02,150
that actually the name
131
131
00:07:02,150 --> 00:07:07,110
of the method is array.prototype.filter.
132
132
00:07:07,110 --> 00:07:10,840
And that is because this filter method, does of course,
133
133
00:07:10,840 --> 00:07:15,093
live in the prototype property of the array constructor.
134
134
00:07:17,760 --> 00:07:20,180
So one more time you can see
135
135
00:07:20,180 --> 00:07:24,370
that the prototypal inheritance is really a mechanism
136
136
00:07:24,370 --> 00:07:26,350
for reusing code.
137
137
00:07:26,350 --> 00:07:28,570
So all of these built-in methods here
138
138
00:07:28,570 --> 00:07:32,850
have to exist only once somewhere in the JavaScript engine
139
139
00:07:32,850 --> 00:07:35,210
and then all the arrays in our code
140
140
00:07:35,210 --> 00:07:37,210
get access to the functions
141
141
00:07:37,210 --> 00:07:41,640
through the prototype chain and prototypal inheritance.
142
142
00:07:41,640 --> 00:07:42,930
Great.
143
143
00:07:42,930 --> 00:07:46,900
So let's actually take this one step further.
144
144
00:07:46,900 --> 00:07:48,430
So we know at this point,
145
145
00:07:48,430 --> 00:07:51,690
that any array inherits all their methods
146
146
00:07:51,690 --> 00:07:53,390
from it's a prototype.
147
147
00:07:53,390 --> 00:07:56,000
And therefore we can use that knowledge
148
148
00:07:56,000 --> 00:08:00,290
to extend the functionality of arrays even further.
149
149
00:08:00,290 --> 00:08:04,747
So all we would have to do is to say array.prototype.
150
150
00:08:06,090 --> 00:08:08,650
And then here we can add any new method
151
151
00:08:08,650 --> 00:08:13,140
to this prototype and all the arrays will then inherit it.
152
152
00:08:13,140 --> 00:08:16,130
So let's say that we wanted to create a method
153
153
00:08:16,130 --> 00:08:20,030
which returns all the unique elements of an array.
154
154
00:08:20,030 --> 00:08:23,223
So let's add a method called unique.
155
155
00:08:24,830 --> 00:08:28,730
So we set the unique property to a function
156
156
00:08:28,730 --> 00:08:31,900
and then to get the unique values of an array
157
157
00:08:31,900 --> 00:08:34,810
all we have to do is to create a new set
158
158
00:08:34,810 --> 00:08:37,320
and pass the array in there.
159
159
00:08:37,320 --> 00:08:39,710
And this keyboard is going to be the array
160
160
00:08:39,710 --> 00:08:42,940
on which this method will be called.
161
161
00:08:42,940 --> 00:08:45,370
And so now we just need to put this
162
162
00:08:45,370 --> 00:08:46,340
into an array
163
163
00:08:47,510 --> 00:08:49,720
and spread it like this,
164
164
00:08:49,720 --> 00:08:52,573
as we have already done multiple times before.
165
165
00:08:53,860 --> 00:08:58,540
And so we can now use that.
166
166
00:08:58,540 --> 00:09:01,953
So array.unique,
167
167
00:09:02,840 --> 00:09:05,340
and this should now return an array
168
168
00:09:05,340 --> 00:09:07,600
with only the unique values.
169
169
00:09:07,600 --> 00:09:10,060
While we don't have a lot of duplicates here
170
170
00:09:10,060 --> 00:09:14,830
let's add another six here and maybe another nine.
171
171
00:09:14,830 --> 00:09:16,280
And so let's see what happens
172
172
00:09:17,280 --> 00:09:19,243
and indeed that worked.
173
173
00:09:20,410 --> 00:09:22,010
Beautiful.
174
174
00:09:22,010 --> 00:09:24,920
So just to recap, we added a new method
175
175
00:09:24,920 --> 00:09:28,730
to the prototype property of the array constructor.
176
176
00:09:28,730 --> 00:09:33,500
And so therefore now all arrays will inherit this method.
177
177
00:09:33,500 --> 00:09:35,650
And so we can then call that method
178
178
00:09:35,650 --> 00:09:37,483
on any array that we want.
179
179
00:09:39,050 --> 00:09:41,590
However, what we just did here.
180
180
00:09:41,590 --> 00:09:43,480
So extending the prototype
181
181
00:09:43,480 --> 00:09:48,040
of a built-in object is generally not a good idea.
182
182
00:09:48,040 --> 00:09:52,130
I mean if you're working just on a small project on your own
183
183
00:09:52,130 --> 00:09:54,370
then I guess you could do this,
184
184
00:09:54,370 --> 00:09:57,310
but really don't get into the habit of doing this
185
185
00:09:57,310 --> 00:09:59,210
for multiple reasons.
186
186
00:09:59,210 --> 00:10:02,550
The first reason is that the next version of JavaScript
187
187
00:10:02,550 --> 00:10:05,240
might add a method with the same name
188
188
00:10:05,240 --> 00:10:08,143
that we are adding, for example this one here,
189
189
00:10:09,170 --> 00:10:11,680
but it might work in a different way.
190
190
00:10:11,680 --> 00:10:14,970
And so your code will then use that new method
191
191
00:10:14,970 --> 00:10:17,310
which, remember, works differently.
192
192
00:10:17,310 --> 00:10:20,830
And then that will probably break your code.
193
193
00:10:20,830 --> 00:10:23,450
And the second reason why you shouldn't do this
194
194
00:10:23,450 --> 00:10:26,430
is because when you work on a team of developers,
195
195
00:10:26,430 --> 00:10:29,350
then this is really gonna be a bad idea
196
196
00:10:29,350 --> 00:10:32,550
because if multiple developers implement the same method
197
197
00:10:32,550 --> 00:10:33,920
with a different name
198
198
00:10:33,920 --> 00:10:36,970
then that's just going to create so many bugs
199
199
00:10:36,970 --> 00:10:40,300
that it's just not worth doing this.
200
200
00:10:40,300 --> 00:10:43,650
So it's just a nice and fun experiment
201
201
00:10:43,650 --> 00:10:46,493
but in practice, you should probably not do it.
202
202
00:10:47,430 --> 00:10:51,260
Now for a little bit of fun to finish this video.
203
203
00:10:51,260 --> 00:10:52,240
Let's take a look
204
204
00:10:52,240 --> 00:10:55,950
at some more built-in objects here in the console.
205
205
00:10:55,950 --> 00:10:59,523
So for example, we can select this DOM element here.
206
206
00:11:00,570 --> 00:11:02,550
And so let's do that.
207
207
00:11:02,550 --> 00:11:03,543
This H1.
208
208
00:11:04,730 --> 00:11:06,887
So that's document.querySelector
209
209
00:11:09,073 --> 00:11:10,077
H1,
210
210
00:11:10,077 --> 00:11:13,410
and we already know that all the DOM elements
211
211
00:11:13,410 --> 00:11:16,450
are behind the scenes objects.
212
212
00:11:16,450 --> 00:11:19,333
And so let's take a look at this object.
213
213
00:11:20,330 --> 00:11:22,273
Well, that doesn't really work.
214
214
00:11:23,470 --> 00:11:25,620
So that just gives us the object.
215
215
00:11:25,620 --> 00:11:28,330
So let's try a console.dir
216
216
00:11:30,810 --> 00:11:31,803
on this H1.
217
217
00:11:33,650 --> 00:11:36,710
And so now we get the actual object.
218
218
00:11:36,710 --> 00:11:39,570
So here we have all this different stuff
219
219
00:11:39,570 --> 00:11:41,930
and all these properties
220
220
00:11:41,930 --> 00:11:44,570
and methods that we already worked with.
221
221
00:11:44,570 --> 00:11:49,130
But what I'm interested in here is the prototype
222
222
00:11:49,130 --> 00:11:53,203
and you see that the prototype is an HTML heading element.
223
223
00:11:55,180 --> 00:11:56,013
All right?
224
224
00:11:56,013 --> 00:11:59,330
And so that itself will contain a lot of different stuff,
225
225
00:11:59,330 --> 00:12:01,070
one more time.
226
226
00:12:01,070 --> 00:12:03,310
So let's scroll all the way down.
227
227
00:12:03,310 --> 00:12:06,850
And so this is now an HTML element.
228
228
00:12:06,850 --> 00:12:10,700
And do you remember these names here from somewhere?
229
229
00:12:10,700 --> 00:12:13,540
Well, these are exactly the types of objects
230
230
00:12:13,540 --> 00:12:16,990
that we talked about in one of the first lectures
231
231
00:12:16,990 --> 00:12:18,390
in the DOM section.
232
232
00:12:18,390 --> 00:12:19,560
Remember that?
233
233
00:12:19,560 --> 00:12:21,250
So we had this big diagram
234
234
00:12:21,250 --> 00:12:23,980
with all these different types of elements.
235
235
00:12:23,980 --> 00:12:26,920
And so now here we can actually inspect them.
236
236
00:12:26,920 --> 00:12:28,500
And so behind the scenes
237
237
00:12:28,500 --> 00:12:31,580
these different elements are really different
238
238
00:12:31,580 --> 00:12:33,790
like constructor functions.
239
239
00:12:33,790 --> 00:12:35,180
So if we go down here
240
240
00:12:35,180 --> 00:12:36,710
we should now see element
241
241
00:12:38,640 --> 00:12:40,850
and indeed, here it is.
242
242
00:12:40,850 --> 00:12:42,340
And so again,
243
243
00:12:42,340 --> 00:12:45,880
you can recall that diagram that we inspected there.
244
244
00:12:45,880 --> 00:12:47,350
And then you will remember
245
245
00:12:47,350 --> 00:12:52,010
that HTML element was a child element of element
246
246
00:12:52,010 --> 00:12:56,100
and element itself was a child of node, right?
247
247
00:12:56,100 --> 00:12:58,420
And so therefore the prototype of element
248
248
00:12:58,420 --> 00:12:59,653
is gonna be node.
249
249
00:13:00,690 --> 00:13:02,890
So if we scroll all the way down here
250
250
00:13:02,890 --> 00:13:07,890
then you see indeed node, and now this one is event target.
251
251
00:13:08,210 --> 00:13:12,380
And so you'll see, this is a huge, huge prototype chain.
252
252
00:13:12,380 --> 00:13:15,370
And only now we are at the end.
253
253
00:13:15,370 --> 00:13:17,280
And so the end is an object
254
254
00:13:18,740 --> 00:13:20,310
and that's it.
255
255
00:13:20,310 --> 00:13:24,323
So this prototype chain has easily six or seven levels.
256
256
00:13:25,508 --> 00:13:28,763
And so you see that it can go really, really deep.
257
257
00:13:29,600 --> 00:13:33,630
So if you want to go and check this out by yourself
258
258
00:13:33,630 --> 00:13:36,733
then that would probably be a really nice exercise.
259
259
00:13:37,880 --> 00:13:40,820
And finally, let's just also
260
260
00:13:40,820 --> 00:13:44,113
console.dir some random function.
261
261
00:13:46,150 --> 00:13:47,770
So the function doesn't matter.
262
262
00:13:47,770 --> 00:13:50,443
I just want to be able to look at the function.
263
263
00:13:51,910 --> 00:13:52,890
Okay.
264
264
00:13:52,890 --> 00:13:55,550
And so, as I mentioned a bit earlier in this video
265
265
00:13:55,550 --> 00:13:58,410
the function itself is also an object.
266
266
00:13:58,410 --> 00:14:01,970
And so therefore it also has a prototype.
267
267
00:14:01,970 --> 00:14:05,750
And in this case to prototype will then contain the methods
268
268
00:14:05,750 --> 00:14:08,670
that we have used previously on functions.
269
269
00:14:08,670 --> 00:14:13,670
So that's apply, bind and call, remember.
270
270
00:14:14,150 --> 00:14:15,640
And so once again
271
271
00:14:15,640 --> 00:14:17,860
this is the reason why we can actually
272
272
00:14:17,860 --> 00:14:20,270
call methods on functions.
273
273
00:14:20,270 --> 00:14:24,400
It's because they are objects and objects have prototypes.
274
274
00:14:24,400 --> 00:14:27,243
And in this case, this function prototype.
275
275
00:14:28,670 --> 00:14:30,940
So you can spend a lot more time
276
276
00:14:30,940 --> 00:14:34,110
if you're really interested in exploring all of this.
277
277
00:14:34,110 --> 00:14:36,800
But once you think you have a good understanding
278
278
00:14:36,800 --> 00:14:38,740
of all the previous lectures
279
279
00:14:38,740 --> 00:14:40,870
then you can move on to the next video
280
280
00:14:40,870 --> 00:14:43,320
which is gonna be the first coding challenge
281
281
00:14:43,320 --> 00:14:44,483
of this section.
23702
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.