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.