WEBVTT 1 00:00:01.260 --> 00:00:04.740 Let's now go ahead and implement the exact same thing 2 00:00:04.740 --> 00:00:06.820 that we did in the last video, 3 00:00:06.820 --> 00:00:10.240 but this time using ESXi classes instead 4 00:00:10.240 --> 00:00:12.193 of constructor functions. 5 00:00:13.870 --> 00:00:15.140 So here again, 6 00:00:15.140 --> 00:00:18.200 I copied the initial person class 7 00:00:18.200 --> 00:00:20.950 that we built a bit earlier so that now we can 8 00:00:20.950 --> 00:00:22.993 inherit from this class. 9 00:00:24.178 --> 00:00:25.050 All right. 10 00:00:25.050 --> 00:00:28.663 And so down here, let's now create the student class. 11 00:00:29.780 --> 00:00:34.780 So class Student like this. 12 00:00:35.200 --> 00:00:37.030 Now, as we know already, 13 00:00:37.030 --> 00:00:40.980 the class Syntax hides a lot of the details that 14 00:00:40.980 --> 00:00:43.600 are actually happening behind the scenes, 15 00:00:43.600 --> 00:00:46.210 because classes are really just a layer 16 00:00:46.210 --> 00:00:49.404 of obstruction over constructor functions. 17 00:00:49.404 --> 00:00:53.130 But that's no problem because we already learned how 18 00:00:53.130 --> 00:00:56.240 inheritance between classes actually works 19 00:00:56.240 --> 00:00:58.010 behind the scenes. 20 00:00:58.010 --> 00:01:00.330 So that's what we did in the last lecture 21 00:01:00.330 --> 00:01:01.980 and to coding challenge. 22 00:01:01.980 --> 00:01:04.010 And so now that we know how it works, 23 00:01:04.010 --> 00:01:07.700 we are ready to implement the same thing using classes, 24 00:01:07.700 --> 00:01:09.080 even though that hides, 25 00:01:09.080 --> 00:01:11.680 how it actually works behind the scenes. 26 00:01:11.680 --> 00:01:16.030 So to implement inheritance between ESXi classes, 27 00:01:16.030 --> 00:01:18.390 we only need two ingredients. 28 00:01:18.390 --> 00:01:23.160 We need the extent keywords and we need the super function. 29 00:01:23.160 --> 00:01:27.380 So to make this student class inherit from the person class, 30 00:01:27.380 --> 00:01:31.080 all we need to do is to say extends 31 00:01:32.330 --> 00:01:36.960 and then the person class so CL, 32 00:01:36.960 --> 00:01:40.580 and this one, I'm also going to call cl here 33 00:01:40.580 --> 00:01:44.750 just to follow the same name and that's actually it. 34 00:01:44.750 --> 00:01:47.170 So this keyword alone here will then link 35 00:01:47.170 --> 00:01:49.840 to prototypes behind the scenes 36 00:01:49.840 --> 00:01:52.453 without us even having to think about that. 37 00:01:54.340 --> 00:01:57.510 Then of course, we still need a constructor. 38 00:01:57.510 --> 00:02:01.040 And this one will just like before receive 39 00:02:01.040 --> 00:02:03.800 the same arguments as the parent class, 40 00:02:03.800 --> 00:02:05.603 but then some additional ones. 41 00:02:07.060 --> 00:02:11.103 So birth year, and also the course. Remember? 42 00:02:12.580 --> 00:02:15.060 now here, we actually don't even need 43 00:02:15.060 --> 00:02:20.060 to manually call like personcl not call like we did before 44 00:02:22.440 --> 00:02:25.230 in the constructor function. Remember? 45 00:02:25.230 --> 00:02:27.183 so here we don't need to do that. 46 00:02:28.445 --> 00:02:32.830 What we do instead is to call the super function. 47 00:02:32.830 --> 00:02:36.180 And so super is basically the constructor function 48 00:02:36.180 --> 00:02:38.610 of the parent class. 49 00:02:38.610 --> 00:02:41.610 So the idea is still similar to what we did 50 00:02:41.610 --> 00:02:43.410 in the constructor function, 51 00:02:43.410 --> 00:02:46.000 but here it all happens automatically. 52 00:02:46.000 --> 00:02:49.980 We don't need to specify the name of the parent class again, 53 00:02:49.980 --> 00:02:52.313 because that already happened up here. 54 00:02:53.470 --> 00:02:56.300 So here now all we do is to pass in 55 00:02:56.300 --> 00:02:59.723 the arguments for the constructor of the parent class. 56 00:03:00.560 --> 00:03:03.700 And so that's these two, because that's exactly 57 00:03:03.700 --> 00:03:07.190 the parameters that are also specified here 58 00:03:07.190 --> 00:03:08.783 in the parent's constructor. 59 00:03:10.730 --> 00:03:14.770 Now here in this constructor. So off the child class, 60 00:03:14.770 --> 00:03:16.963 this always needs to happens first. 61 00:03:18.170 --> 00:03:20.010 So let me even write that here. 62 00:03:20.010 --> 00:03:23.293 needs to happen first. 63 00:03:24.420 --> 00:03:27.760 And that's because this call to the super function 64 00:03:27.760 --> 00:03:29.830 is responsible for creating 65 00:03:29.830 --> 00:03:33.060 the disc keyword in this subclass. 66 00:03:33.060 --> 00:03:35.390 And so therefore, without doing this, 67 00:03:35.390 --> 00:03:40.173 we wouldn't be able to access the disc keyword to do this. 68 00:03:42.450 --> 00:03:45.880 So always first the call to the super 69 00:03:45.880 --> 00:03:48.640 so to the parents class constructor. 70 00:03:48.640 --> 00:03:50.960 And from there, we will then be able 71 00:03:50.960 --> 00:03:53.240 to access the disc keyword. 72 00:03:53.240 --> 00:03:55.100 Now, of course we could actually 73 00:03:55.100 --> 00:03:58.420 have no other properties here at all. 74 00:03:58.420 --> 00:04:02.820 So this is not necessary. I mean, it's not mandatory. 75 00:04:02.820 --> 00:04:06.360 And so the same goes for this additional parameter. 76 00:04:06.360 --> 00:04:07.490 So in this case, 77 00:04:07.490 --> 00:04:10.780 this new student class would simply have new methods 78 00:04:10.780 --> 00:04:14.490 and share all the properties with the parent class. 79 00:04:14.490 --> 00:04:17.610 So what we're doing here is really just an example, 80 00:04:17.610 --> 00:04:21.423 but the possibilities are endless, right? 81 00:04:22.280 --> 00:04:25.550 And actually, if we didn't want to do this, 82 00:04:25.550 --> 00:04:29.000 then we wouldn't need any constructor function at all. 83 00:04:29.000 --> 00:04:29.833 So in this case, 84 00:04:29.833 --> 00:04:32.380 the super function would automatically be called 85 00:04:32.380 --> 00:04:33.640 with all the arguments 86 00:04:33.640 --> 00:04:35.923 that are passed into this constructor. 87 00:04:37.810 --> 00:04:39.983 So let me just create a new student here. 88 00:04:40.970 --> 00:04:45.593 So that's Martha. So a new studentCL 89 00:04:48.540 --> 00:04:53.400 let's say Martha Jones born in 2012 90 00:04:53.400 --> 00:04:58.400 and also studying computer science now. Right? 91 00:05:00.660 --> 00:05:04.510 But let me duplicate this year very quick, 92 00:05:04.510 --> 00:05:07.963 take this one out and only call this with these two. 93 00:05:09.520 --> 00:05:10.870 And then as I was saying, 94 00:05:10.870 --> 00:05:13.500 we could have no constructor at all, 95 00:05:13.500 --> 00:05:15.663 and this would still work just the same. 96 00:05:17.880 --> 00:05:20.140 So you see that now we would end up 97 00:05:20.140 --> 00:05:23.600 with a student with the full name and the birth year, 98 00:05:23.600 --> 00:05:25.003 just as specified. 99 00:05:26.400 --> 00:05:30.190 Now, remember that this underscore here still comes from 100 00:05:30.190 --> 00:05:32.600 this center function here. 101 00:05:32.600 --> 00:05:35.060 So that's what we specified earlier. 102 00:05:35.060 --> 00:05:39.280 And so of course now the student will inherit all of that 103 00:05:39.280 --> 00:05:42.830 because in the end, these are really just methods too. 104 00:05:42.830 --> 00:05:45.460 And so all the students will now inherit 105 00:05:45.460 --> 00:05:48.083 all of these methods from the parent class. 106 00:05:49.170 --> 00:05:51.960 But anyway, this was just to demonstrate to you 107 00:05:51.960 --> 00:05:55.450 that if you do not need any new properties, 108 00:05:55.450 --> 00:05:56.920 then you don't even need 109 00:05:56.920 --> 00:06:00.853 to bother writing a constructor method in the child class. 110 00:06:01.770 --> 00:06:04.163 But now let's take this back, 111 00:06:09.170 --> 00:06:12.280 this as well, and of course also this, 112 00:06:12.280 --> 00:06:16.170 and now let's see if this worked 113 00:06:16.170 --> 00:06:19.313 and yeah, so now we have all the three properties here. 114 00:06:20.320 --> 00:06:21.220 Okay? 115 00:06:21.220 --> 00:06:23.983 Now let's just quickly add the introduce method. 116 00:06:25.050 --> 00:06:27.750 So let me copy that from earlier. 117 00:06:27.750 --> 00:06:30.363 There's no need to write the same code. 118 00:06:32.030 --> 00:06:34.670 So that's the simple console.log 119 00:06:34.670 --> 00:06:36.740 that we're going to execute here. 120 00:06:36.740 --> 00:06:38.383 So introduce, 121 00:06:40.980 --> 00:06:45.380 and so now we can call that on Martha.introduce 122 00:06:48.590 --> 00:06:51.390 and we get, my name is undefined here, 123 00:06:51.390 --> 00:06:55.000 but that's because here we actually have the full name 124 00:06:55.000 --> 00:06:56.233 and not the first name. 125 00:06:58.240 --> 00:07:00.310 And so now that actually works 126 00:07:01.270 --> 00:07:04.580 and the same should work for the calcAge method 127 00:07:04.580 --> 00:07:06.930 that is in the parent class. 128 00:07:06.930 --> 00:07:11.930 So Martha.calcAge and indeed, that works as well. 129 00:07:13.400 --> 00:07:16.450 And so let's now take a quick look here 130 00:07:16.450 --> 00:07:18.800 at a prototype chain one more time, 131 00:07:18.800 --> 00:07:21.700 just so you can see that a prototype chain 132 00:07:21.700 --> 00:07:24.860 is actually just the same as before 133 00:07:24.860 --> 00:07:26.483 when we created it manually. 134 00:07:28.400 --> 00:07:31.830 So you see that indeed in a prototype of Martha, 135 00:07:31.830 --> 00:07:34.440 we now have to introduce method. 136 00:07:34.440 --> 00:07:37.973 So that's this one right here that we wrote in the class. 137 00:07:39.180 --> 00:07:40.013 All right? 138 00:07:40.013 --> 00:07:42.890 But now in the prototype after prototype, 139 00:07:42.890 --> 00:07:46.340 we have indeed the calcAge method 140 00:07:46.340 --> 00:07:49.450 and also the greet method and the age 141 00:07:49.450 --> 00:07:51.863 and full name setters and getters. 142 00:07:52.710 --> 00:07:56.380 And so this proves us that the prototype chain was 143 00:07:56.380 --> 00:08:00.830 indeed set up automatically by basically by 144 00:08:00.830 --> 00:08:02.663 this extends keyword here. 145 00:08:05.070 --> 00:08:08.760 Now. Finally, just like we did in a previous challenge, 146 00:08:08.760 --> 00:08:12.483 let's override one of the methods of the parent class. 147 00:08:13.440 --> 00:08:16.623 So let's override the calcAge method here. 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 00:08:25.870 --> 00:08:29.763 and then let's simply log to the console I'm. 150 00:08:30.960 --> 00:08:31.910 And then the age. 151 00:08:31.910 --> 00:08:36.910 So 2037 - this.birth year, years old. 152 00:08:42.220 --> 00:08:47.220 But as a student, I feel more like, 153 00:08:48.520 --> 00:08:52.904 and then let's basically add 10 to this date because 154 00:08:52.904 --> 00:08:55.970 when you're in university and you study a lot 155 00:08:57.080 --> 00:08:59.710 then you will feel actually a lot older 156 00:08:59.710 --> 00:09:02.900 than you actually are now, right? 157 00:09:02.900 --> 00:09:04.030 And so now indeed, 158 00:09:04.030 --> 00:09:07.930 this new method overrode the one that was already there 159 00:09:07.930 --> 00:09:09.790 in the prototype chain. 160 00:09:09.790 --> 00:09:11.350 And again, that's because 161 00:09:11.350 --> 00:09:13.770 this new calcAge method here 162 00:09:13.770 --> 00:09:16.530 appears first in the prototype chain. 163 00:09:16.530 --> 00:09:19.180 And so therefore it is essentially overriding 164 00:09:19.180 --> 00:09:22.700 the method coming from the parent class. 165 00:09:22.700 --> 00:09:24.550 And we can also say that 166 00:09:24.550 --> 00:09:27.180 this calcAge method here is shadowing 167 00:09:27.180 --> 00:09:29.283 the one that is in the parent class. 168 00:09:30.330 --> 00:09:32.430 And so that's actually, it, 169 00:09:32.430 --> 00:09:33.880 that's all I have to show you 170 00:09:33.880 --> 00:09:37.350 about implementing inheritance between classes, 171 00:09:37.350 --> 00:09:40.520 using actual ESXi classes. 172 00:09:40.520 --> 00:09:44.040 And just to make sure that you got this 100%, 173 00:09:44.040 --> 00:09:47.010 I invite you one more time to check out the slides 174 00:09:47.010 --> 00:09:48.890 from the previous lecture. 175 00:09:48.890 --> 00:09:51.350 So the lecture where we did the same thing 176 00:09:51.350 --> 00:09:54.150 using constructor functions. 177 00:09:54.150 --> 00:09:58.320 So these slides, so these theory parts of the video, 178 00:09:58.320 --> 00:09:59.380 I believe are really, 179 00:09:59.380 --> 00:10:02.520 really helpful to understanding this. 180 00:10:02.520 --> 00:10:06.350 Now, to finish this part of inheritance between classes. 181 00:10:06.350 --> 00:10:07.341 Let me just say that this mechanism of inheritance 182 00:10:07.341 --> 00:10:12.341 that we explored here can actually be very problematic 183 00:10:13.421 --> 00:10:16.260 and dangerous in the real world 184 00:10:16.260 --> 00:10:18.550 when we are designing software. 185 00:10:18.550 --> 00:10:20.080 However, that's going to be a 186 00:10:20.080 --> 00:10:22.250 topic for another day. 187 00:10:22.250 --> 00:10:25.100 And we're going to talk a little bit about this when we talk 188 00:10:25.100 --> 00:10:28.460 about functional programming, which as I've mentioned, 189 00:10:28.460 --> 00:10:31.090 a couple of times is kind of the alternative 190 00:10:31.090 --> 00:10:32.923 to object oriented programming. 191 00:10:33.770 --> 00:10:35.170 Anyway, next up, 192 00:10:35.170 --> 00:10:39.030 let's do the same thing with object.create. 193 00:10:39.030 --> 00:10:41.900 So that's the third way of implementing object 194 00:10:41.900 --> 00:10:44.313 oriented programming in JavaScript.