Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,260 --> 00:00:04,740
Let's now go ahead and implement the exact same thing
2
2
00:00:04,740 --> 00:00:06,820
that we did in the last video,
3
3
00:00:06,820 --> 00:00:10,240
but this time using ESXi classes instead
4
4
00:00:10,240 --> 00:00:12,193
of constructor functions.
5
5
00:00:13,870 --> 00:00:15,140
So here again,
6
6
00:00:15,140 --> 00:00:18,200
I copied the initial person class
7
7
00:00:18,200 --> 00:00:20,950
that we built a bit earlier so that now we can
8
8
00:00:20,950 --> 00:00:22,993
inherit from this class.
9
9
00:00:24,178 --> 00:00:25,050
All right.
10
10
00:00:25,050 --> 00:00:28,663
And so down here, let's now create the student class.
11
11
00:00:29,780 --> 00:00:34,780
So class Student like this.
12
12
00:00:35,200 --> 00:00:37,030
Now, as we know already,
13
13
00:00:37,030 --> 00:00:40,980
the class Syntax hides a lot of the details that
14
14
00:00:40,980 --> 00:00:43,600
are actually happening behind the scenes,
15
15
00:00:43,600 --> 00:00:46,210
because classes are really just a layer
16
16
00:00:46,210 --> 00:00:49,404
of obstruction over constructor functions.
17
17
00:00:49,404 --> 00:00:53,130
But that's no problem because we already learned how
18
18
00:00:53,130 --> 00:00:56,240
inheritance between classes actually works
19
19
00:00:56,240 --> 00:00:58,010
behind the scenes.
20
20
00:00:58,010 --> 00:01:00,330
So that's what we did in the last lecture
21
21
00:01:00,330 --> 00:01:01,980
and to coding challenge.
22
22
00:01:01,980 --> 00:01:04,010
And so now that we know how it works,
23
23
00:01:04,010 --> 00:01:07,700
we are ready to implement the same thing using classes,
24
24
00:01:07,700 --> 00:01:09,080
even though that hides,
25
25
00:01:09,080 --> 00:01:11,680
how it actually works behind the scenes.
26
26
00:01:11,680 --> 00:01:16,030
So to implement inheritance between ESXi classes,
27
27
00:01:16,030 --> 00:01:18,390
we only need two ingredients.
28
28
00:01:18,390 --> 00:01:23,160
We need the extent keywords and we need the super function.
29
29
00:01:23,160 --> 00:01:27,380
So to make this student class inherit from the person class,
30
30
00:01:27,380 --> 00:01:31,080
all we need to do is to say extends
31
31
00:01:32,330 --> 00:01:36,960
and then the person class so CL,
32
32
00:01:36,960 --> 00:01:40,580
and this one, I'm also going to call cl here
33
33
00:01:40,580 --> 00:01:44,750
just to follow the same name and that's actually it.
34
34
00:01:44,750 --> 00:01:47,170
So this keyword alone here will then link
35
35
00:01:47,170 --> 00:01:49,840
to prototypes behind the scenes
36
36
00:01:49,840 --> 00:01:52,453
without us even having to think about that.
37
37
00:01:54,340 --> 00:01:57,510
Then of course, we still need a constructor.
38
38
00:01:57,510 --> 00:02:01,040
And this one will just like before receive
39
39
00:02:01,040 --> 00:02:03,800
the same arguments as the parent class,
40
40
00:02:03,800 --> 00:02:05,603
but then some additional ones.
41
41
00:02:07,060 --> 00:02:11,103
So birth year, and also the course. Remember?
42
42
00:02:12,580 --> 00:02:15,060
now here, we actually don't even need
43
43
00:02:15,060 --> 00:02:20,060
to manually call like personcl not call like we did before
44
44
00:02:22,440 --> 00:02:25,230
in the constructor function. Remember?
45
45
00:02:25,230 --> 00:02:27,183
so here we don't need to do that.
46
46
00:02:28,445 --> 00:02:32,830
What we do instead is to call the super function.
47
47
00:02:32,830 --> 00:02:36,180
And so super is basically the constructor function
48
48
00:02:36,180 --> 00:02:38,610
of the parent class.
49
49
00:02:38,610 --> 00:02:41,610
So the idea is still similar to what we did
50
50
00:02:41,610 --> 00:02:43,410
in the constructor function,
51
51
00:02:43,410 --> 00:02:46,000
but here it all happens automatically.
52
52
00:02:46,000 --> 00:02:49,980
We don't need to specify the name of the parent class again,
53
53
00:02:49,980 --> 00:02:52,313
because that already happened up here.
54
54
00:02:53,470 --> 00:02:56,300
So here now all we do is to pass in
55
55
00:02:56,300 --> 00:02:59,723
the arguments for the constructor of the parent class.
56
56
00:03:00,560 --> 00:03:03,700
And so that's these two, because that's exactly
57
57
00:03:03,700 --> 00:03:07,190
the parameters that are also specified here
58
58
00:03:07,190 --> 00:03:08,783
in the parent's constructor.
59
59
00:03:10,730 --> 00:03:14,770
Now here in this constructor. So off the child class,
60
60
00:03:14,770 --> 00:03:16,963
this always needs to happens first.
61
61
00:03:18,170 --> 00:03:20,010
So let me even write that here.
62
62
00:03:20,010 --> 00:03:23,293
needs to happen first.
63
63
00:03:24,420 --> 00:03:27,760
And that's because this call to the super function
64
64
00:03:27,760 --> 00:03:29,830
is responsible for creating
65
65
00:03:29,830 --> 00:03:33,060
the disc keyword in this subclass.
66
66
00:03:33,060 --> 00:03:35,390
And so therefore, without doing this,
67
67
00:03:35,390 --> 00:03:40,173
we wouldn't be able to access the disc keyword to do this.
68
68
00:03:42,450 --> 00:03:45,880
So always first the call to the super
69
69
00:03:45,880 --> 00:03:48,640
so to the parents class constructor.
70
70
00:03:48,640 --> 00:03:50,960
And from there, we will then be able
71
71
00:03:50,960 --> 00:03:53,240
to access the disc keyword.
72
72
00:03:53,240 --> 00:03:55,100
Now, of course we could actually
73
73
00:03:55,100 --> 00:03:58,420
have no other properties here at all.
74
74
00:03:58,420 --> 00:04:02,820
So this is not necessary. I mean, it's not mandatory.
75
75
00:04:02,820 --> 00:04:06,360
And so the same goes for this additional parameter.
76
76
00:04:06,360 --> 00:04:07,490
So in this case,
77
77
00:04:07,490 --> 00:04:10,780
this new student class would simply have new methods
78
78
00:04:10,780 --> 00:04:14,490
and share all the properties with the parent class.
79
79
00:04:14,490 --> 00:04:17,610
So what we're doing here is really just an example,
80
80
00:04:17,610 --> 00:04:21,423
but the possibilities are endless, right?
81
81
00:04:22,280 --> 00:04:25,550
And actually, if we didn't want to do this,
82
82
00:04:25,550 --> 00:04:29,000
then we wouldn't need any constructor function at all.
83
83
00:04:29,000 --> 00:04:29,833
So in this case,
84
84
00:04:29,833 --> 00:04:32,380
the super function would automatically be called
85
85
00:04:32,380 --> 00:04:33,640
with all the arguments
86
86
00:04:33,640 --> 00:04:35,923
that are passed into this constructor.
87
87
00:04:37,810 --> 00:04:39,983
So let me just create a new student here.
88
88
00:04:40,970 --> 00:04:45,593
So that's Martha. So a new studentCL
89
89
00:04:48,540 --> 00:04:53,400
let's say Martha Jones born in 2012
90
90
00:04:53,400 --> 00:04:58,400
and also studying computer science now. Right?
91
91
00:05:00,660 --> 00:05:04,510
But let me duplicate this year very quick,
92
92
00:05:04,510 --> 00:05:07,963
take this one out and only call this with these two.
93
93
00:05:09,520 --> 00:05:10,870
And then as I was saying,
94
94
00:05:10,870 --> 00:05:13,500
we could have no constructor at all,
95
95
00:05:13,500 --> 00:05:15,663
and this would still work just the same.
96
96
00:05:17,880 --> 00:05:20,140
So you see that now we would end up
97
97
00:05:20,140 --> 00:05:23,600
with a student with the full name and the birth year,
98
98
00:05:23,600 --> 00:05:25,003
just as specified.
99
99
00:05:26,400 --> 00:05:30,190
Now, remember that this underscore here still comes from
100
100
00:05:30,190 --> 00:05:32,600
this center function here.
101
101
00:05:32,600 --> 00:05:35,060
So that's what we specified earlier.
102
102
00:05:35,060 --> 00:05:39,280
And so of course now the student will inherit all of that
103
103
00:05:39,280 --> 00:05:42,830
because in the end, these are really just methods too.
104
104
00:05:42,830 --> 00:05:45,460
And so all the students will now inherit
105
105
00:05:45,460 --> 00:05:48,083
all of these methods from the parent class.
106
106
00:05:49,170 --> 00:05:51,960
But anyway, this was just to demonstrate to you
107
107
00:05:51,960 --> 00:05:55,450
that if you do not need any new properties,
108
108
00:05:55,450 --> 00:05:56,920
then you don't even need
109
109
00:05:56,920 --> 00:06:00,853
to bother writing a constructor method in the child class.
110
110
00:06:01,770 --> 00:06:04,163
But now let's take this back,
111
111
00:06:09,170 --> 00:06:12,280
this as well, and of course also this,
112
112
00:06:12,280 --> 00:06:16,170
and now let's see if this worked
113
113
00:06:16,170 --> 00:06:19,313
and yeah, so now we have all the three properties here.
114
114
00:06:20,320 --> 00:06:21,220
Okay?
115
115
00:06:21,220 --> 00:06:23,983
Now let's just quickly add the introduce method.
116
116
00:06:25,050 --> 00:06:27,750
So let me copy that from earlier.
117
117
00:06:27,750 --> 00:06:30,363
There's no need to write the same code.
118
118
00:06:32,030 --> 00:06:34,670
So that's the simple console.log
119
119
00:06:34,670 --> 00:06:36,740
that we're going to execute here.
120
120
00:06:36,740 --> 00:06:38,383
So introduce,
121
121
00:06:40,980 --> 00:06:45,380
and so now we can call that on Martha.introduce
122
122
00:06:48,590 --> 00:06:51,390
and we get, my name is undefined here,
123
123
00:06:51,390 --> 00:06:55,000
but that's because here we actually have the full name
124
124
00:06:55,000 --> 00:06:56,233
and not the first name.
125
125
00:06:58,240 --> 00:07:00,310
And so now that actually works
126
126
00:07:01,270 --> 00:07:04,580
and the same should work for the calcAge method
127
127
00:07:04,580 --> 00:07:06,930
that is in the parent class.
128
128
00:07:06,930 --> 00:07:11,930
So Martha.calcAge and indeed, that works as well.
129
129
00:07:13,400 --> 00:07:16,450
And so let's now take a quick look here
130
130
00:07:16,450 --> 00:07:18,800
at a prototype chain one more time,
131
131
00:07:18,800 --> 00:07:21,700
just so you can see that a prototype chain
132
132
00:07:21,700 --> 00:07:24,860
is actually just the same as before
133
133
00:07:24,860 --> 00:07:26,483
when we created it manually.
134
134
00:07:28,400 --> 00:07:31,830
So you see that indeed in a prototype of Martha,
135
135
00:07:31,830 --> 00:07:34,440
we now have to introduce method.
136
136
00:07:34,440 --> 00:07:37,973
So that's this one right here that we wrote in the class.
137
137
00:07:39,180 --> 00:07:40,013
All right?
138
138
00:07:40,013 --> 00:07:42,890
But now in the prototype after prototype,
139
139
00:07:42,890 --> 00:07:46,340
we have indeed the calcAge method
140
140
00:07:46,340 --> 00:07:49,450
and also the greet method and the age
141
141
00:07:49,450 --> 00:07:51,863
and full name setters and getters.
142
142
00:07:52,710 --> 00:07:56,380
And so this proves us that the prototype chain was
143
143
00:07:56,380 --> 00:08:00,830
indeed set up automatically by basically by
144
144
00:08:00,830 --> 00:08:02,663
this extends keyword here.
145
145
00:08:05,070 --> 00:08:08,760
Now. Finally, just like we did in a previous challenge,
146
146
00:08:08,760 --> 00:08:12,483
let's override one of the methods of the parent class.
147
147
00:08:13,440 --> 00:08:16,623
So let's override the calcAge method here.
148
148
00:08:18,120 --> 00:08:21,613
And so all we have to do is to add a new CalcAge right here,
149
149
00:08:25,870 --> 00:08:29,763
and then let's simply log to the console I'm.
150
150
00:08:30,960 --> 00:08:31,910
And then the age.
151
151
00:08:31,910 --> 00:08:36,910
So 2037 - this.birth year, years old.
152
152
00:08:42,220 --> 00:08:47,220
But as a student, I feel more like,
153
153
00:08:48,520 --> 00:08:52,904
and then let's basically add 10 to this date because
154
154
00:08:52,904 --> 00:08:55,970
when you're in university and you study a lot
155
155
00:08:57,080 --> 00:08:59,710
then you will feel actually a lot older
156
156
00:08:59,710 --> 00:09:02,900
than you actually are now, right?
157
157
00:09:02,900 --> 00:09:04,030
And so now indeed,
158
158
00:09:04,030 --> 00:09:07,930
this new method overrode the one that was already there
159
159
00:09:07,930 --> 00:09:09,790
in the prototype chain.
160
160
00:09:09,790 --> 00:09:11,350
And again, that's because
161
161
00:09:11,350 --> 00:09:13,770
this new calcAge method here
162
162
00:09:13,770 --> 00:09:16,530
appears first in the prototype chain.
163
163
00:09:16,530 --> 00:09:19,180
And so therefore it is essentially overriding
164
164
00:09:19,180 --> 00:09:22,700
the method coming from the parent class.
165
165
00:09:22,700 --> 00:09:24,550
And we can also say that
166
166
00:09:24,550 --> 00:09:27,180
this calcAge method here is shadowing
167
167
00:09:27,180 --> 00:09:29,283
the one that is in the parent class.
168
168
00:09:30,330 --> 00:09:32,430
And so that's actually, it,
169
169
00:09:32,430 --> 00:09:33,880
that's all I have to show you
170
170
00:09:33,880 --> 00:09:37,350
about implementing inheritance between classes,
171
171
00:09:37,350 --> 00:09:40,520
using actual ESXi classes.
172
172
00:09:40,520 --> 00:09:44,040
And just to make sure that you got this 100%,
173
173
00:09:44,040 --> 00:09:47,010
I invite you one more time to check out the slides
174
174
00:09:47,010 --> 00:09:48,890
from the previous lecture.
175
175
00:09:48,890 --> 00:09:51,350
So the lecture where we did the same thing
176
176
00:09:51,350 --> 00:09:54,150
using constructor functions.
177
177
00:09:54,150 --> 00:09:58,320
So these slides, so these theory parts of the video,
178
178
00:09:58,320 --> 00:09:59,380
I believe are really,
179
179
00:09:59,380 --> 00:10:02,520
really helpful to understanding this.
180
180
00:10:02,520 --> 00:10:06,350
Now, to finish this part of inheritance between classes.
181
181
00:10:06,350 --> 00:10:07,341
Let me just say that this mechanism of inheritance
182
182
00:10:07,341 --> 00:10:12,341
that we explored here can actually be very problematic
183
183
00:10:13,421 --> 00:10:16,260
and dangerous in the real world
184
184
00:10:16,260 --> 00:10:18,550
when we are designing software.
185
185
00:10:18,550 --> 00:10:20,080
However, that's going to be a
186
186
00:10:20,080 --> 00:10:22,250
topic for another day.
187
187
00:10:22,250 --> 00:10:25,100
And we're going to talk a little bit about this when we talk
188
188
00:10:25,100 --> 00:10:28,460
about functional programming, which as I've mentioned,
189
189
00:10:28,460 --> 00:10:31,090
a couple of times is kind of the alternative
190
190
00:10:31,090 --> 00:10:32,923
to object oriented programming.
191
191
00:10:33,770 --> 00:10:35,170
Anyway, next up,
192
192
00:10:35,170 --> 00:10:39,030
let's do the same thing with object.create.
193
193
00:10:39,030 --> 00:10:41,900
So that's the third way of implementing object
194
194
00:10:41,900 --> 00:10:44,313
oriented programming in JavaScript.
16760
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.