WEBVTT 1 00:00:01.538 --> 00:00:02.838 Now that we are ready to use 2 00:00:02.838 --> 00:00:06.410 ES6 classes, let's take it one step further 3 00:00:06.410 --> 00:00:09.175 and implement inheritance between classes 4 00:00:09.175 --> 00:00:10.592 using subclasses. 5 00:00:12.067 --> 00:00:14.362 So, do you remember this slide 6 00:00:14.362 --> 00:00:17.475 from when we first talked about inheritance? 7 00:00:17.475 --> 00:00:19.535 We had this example where we had 8 00:00:19.535 --> 00:00:21.424 two function constructors, 9 00:00:21.424 --> 00:00:22.944 or ES6 classes, 10 00:00:22.944 --> 00:00:25.117 which is like the same thing 11 00:00:25.117 --> 00:00:27.747 that can inherit from one another. 12 00:00:27.747 --> 00:00:30.505 So we have here the more generic class person, 13 00:00:30.505 --> 00:00:32.058 for all persons, 14 00:00:32.058 --> 00:00:34.545 and then we have the more specific subclass 15 00:00:34.545 --> 00:00:35.840 for an athlete, 16 00:00:35.840 --> 00:00:38.556 because an athlete is also a person, 17 00:00:38.556 --> 00:00:40.961 but with some more specific attributes, 18 00:00:40.961 --> 00:00:42.723 and also methods. 19 00:00:42.723 --> 00:00:44.799 And so, it makes a lot of sense 20 00:00:44.799 --> 00:00:46.354 that we make the athlete class 21 00:00:46.354 --> 00:00:49.297 inherit from the person class, right? 22 00:00:49.297 --> 00:00:51.800 Now, we have actually never implemented 23 00:00:51.800 --> 00:00:54.615 this in our code up until this point. 24 00:00:54.615 --> 00:00:56.810 All we did was to make objects 25 00:00:56.810 --> 00:00:59.536 inherit methods from their prototype. 26 00:00:59.536 --> 00:01:01.740 But this inheritance between classes 27 00:01:01.740 --> 00:01:04.179 is really taking it even one step further, 28 00:01:04.179 --> 00:01:05.921 and so that's something really cool, 29 00:01:05.921 --> 00:01:09.109 and sometimes really useful, too. 30 00:01:09.109 --> 00:01:10.930 So, such as before, 31 00:01:10.930 --> 00:01:13.661 let me first show you how to do it in ES5, 32 00:01:13.661 --> 00:01:18.512 and then we move on to classes and subclasses with ES6. 33 00:01:18.512 --> 00:01:20.718 First of all, let's get back 34 00:01:20.718 --> 00:01:24.718 the code that we wrote before for ES5, 35 00:01:27.091 --> 00:01:30.508 so that we don't have to write it all over again. 36 00:01:30.508 --> 00:01:33.607 So, this Person5 function constructor, 37 00:01:33.607 --> 00:01:35.594 or let's call it class, 38 00:01:35.594 --> 00:01:37.877 will be our superclass. 39 00:01:37.877 --> 00:01:40.082 So, let's now create the subclass, 40 00:01:40.082 --> 00:01:42.172 which will be the athlete class, 41 00:01:42.172 --> 00:01:44.255 and this is how we do it. 42 00:01:45.238 --> 00:01:48.655 So, Athlete, and five again, 43 00:01:50.607 --> 00:01:51.784 is a function, 44 00:01:51.784 --> 00:01:53.732 and in this function, we actually 45 00:01:53.732 --> 00:01:57.286 have to pass in these exact same parameters here, 46 00:01:57.286 --> 00:01:58.570 as well. 47 00:01:58.570 --> 00:02:00.641 So, let's just copy them. 48 00:02:00.641 --> 00:02:03.173 Okay, so if you want an athlete, 49 00:02:03.173 --> 00:02:06.000 we need to say their name, their year of birth, 50 00:02:06.000 --> 00:02:09.345 their job, and we also want to define 51 00:02:09.345 --> 00:02:12.294 to how many Olympic games they went. 52 00:02:12.294 --> 00:02:14.877 So, let's call it olympicGames, 53 00:02:16.064 --> 00:02:19.397 and also, how many medals they have won. 54 00:02:20.249 --> 00:02:21.166 So, medals. 55 00:02:23.098 --> 00:02:25.520 Okay, and now, in this subclass 56 00:02:25.520 --> 00:02:27.492 the first thing that we have to do 57 00:02:27.492 --> 00:02:32.011 is to call our superclass, which is Person5, right? 58 00:02:32.011 --> 00:02:33.476 So, let's do that. 59 00:02:33.476 --> 00:02:36.472 Person5, and we actually now have to use 60 00:02:36.472 --> 00:02:37.913 the call method, 61 00:02:37.913 --> 00:02:39.640 and I'm gonna explain you why 62 00:02:39.640 --> 00:02:41.125 in a second, okay? 63 00:02:41.125 --> 00:02:42.656 Let's first write the code, 64 00:02:42.656 --> 00:02:44.859 and then I'm gonna explain it to you. 65 00:02:44.859 --> 00:02:47.859 So, this will be set to this, 66 00:02:47.859 --> 00:02:50.484 and then we pass in the three arguments that we have. 67 00:02:50.484 --> 00:02:54.651 So name, yearOfBirth, and job. 68 00:02:57.459 --> 00:03:00.495 And we can only pass the three arguments into here 69 00:03:00.495 --> 00:03:02.015 because we received them 70 00:03:02.015 --> 00:03:04.278 in this function call, here, as well, right? 71 00:03:04.278 --> 00:03:06.680 And that's why we have to have them here, 72 00:03:06.680 --> 00:03:08.097 and also in here. 73 00:03:09.259 --> 00:03:10.092 Okay? 74 00:03:11.464 --> 00:03:14.525 And now, it works like just it worked before, 75 00:03:14.525 --> 00:03:16.942 so we say olympicGames 76 00:03:18.410 --> 00:03:22.027 is equal to olympicGames, of course, 77 00:03:22.027 --> 00:03:26.675 and this.medals is medals. 78 00:03:26.675 --> 00:03:28.801 So, why do we have to call 79 00:03:28.801 --> 00:03:31.203 the superclass function constructor 80 00:03:31.203 --> 00:03:34.154 with this as a this keyword? 81 00:03:34.154 --> 00:03:36.367 And I'll give you a second to pause the video 82 00:03:36.367 --> 00:03:38.117 and think about that. 83 00:03:42.549 --> 00:03:45.048 To explain this, we need to remember 84 00:03:45.048 --> 00:03:47.042 how the new operator works, 85 00:03:47.042 --> 00:03:49.041 which is the operator that we use 86 00:03:49.041 --> 00:03:50.949 to create a new instance. 87 00:03:50.949 --> 00:03:53.835 So, when creating a new athlete object, 88 00:03:53.835 --> 00:03:56.418 new creates a new empty object, 89 00:03:56.418 --> 00:03:58.883 calls the athlete function constructor, 90 00:03:58.883 --> 00:04:00.431 and sets the this keyword 91 00:04:00.431 --> 00:04:02.887 to the newly created empty objects. 92 00:04:02.887 --> 00:04:05.139 So, you remember that part, right? 93 00:04:05.139 --> 00:04:08.998 So, in execution context that we're in here, 94 00:04:08.998 --> 00:04:13.029 the this keyword will point to the new empty object. 95 00:04:13.029 --> 00:04:15.781 Now, if we want a person property's name, 96 00:04:15.781 --> 00:04:17.591 year, and job to be set 97 00:04:17.591 --> 00:04:19.946 on the new athlete object, 98 00:04:19.946 --> 00:04:22.645 then we need to call the person function constructor 99 00:04:22.645 --> 00:04:24.778 with the this keyword also set 100 00:04:24.778 --> 00:04:28.264 to our newly created athlete object, right? 101 00:04:28.264 --> 00:04:31.371 And that's exactly what we do here. 102 00:04:31.371 --> 00:04:33.898 So, after this, all the properties 103 00:04:33.898 --> 00:04:36.445 will be set in the new athlete object 104 00:04:36.445 --> 00:04:38.556 that's created by the new operator, 105 00:04:38.556 --> 00:04:40.763 and that's why we need to call it here, 106 00:04:40.763 --> 00:04:44.470 and to set the this variable to this. 107 00:04:44.470 --> 00:04:46.376 Alright, and now to create 108 00:04:46.376 --> 00:04:48.441 the correct prototype chain, 109 00:04:48.441 --> 00:04:51.084 we're gonna use object.create, 110 00:04:51.084 --> 00:04:53.968 because, remember, object.create 111 00:04:53.968 --> 00:04:57.549 allows us to manually set the prototype of an object, 112 00:04:57.549 --> 00:05:00.186 and we want the prototype of the athlete 113 00:05:00.186 --> 00:05:02.588 to be the prototype of the person, 114 00:05:02.588 --> 00:05:04.972 so that they become connected. 115 00:05:04.972 --> 00:05:06.556 So, let's quickly do that 116 00:05:06.556 --> 00:05:10.723 and say Athlete5.prototype 117 00:05:14.825 --> 00:05:15.908 Object.create 118 00:05:19.247 --> 00:05:22.474 (Person5.prototype), 119 00:05:22.474 --> 00:05:23.979 and that's it. 120 00:05:23.979 --> 00:05:26.378 So now, the two function constructors 121 00:05:26.378 --> 00:05:28.798 are connected, and the prototype chain 122 00:05:28.798 --> 00:05:30.722 should work just fine. 123 00:05:30.722 --> 00:05:32.226 So, let's actually take a look 124 00:05:32.226 --> 00:05:34.473 at that in the console, 125 00:05:34.473 --> 00:05:37.911 and so I'm gonna create a new athlete tier, 126 00:05:37.911 --> 00:05:41.911 and I'll say johnAthlete5. 127 00:05:43.201 --> 00:05:45.534 So, it's a new athlete 128 00:05:47.006 --> 00:05:48.297 called John, 129 00:05:48.297 --> 00:05:50.580 so, remember, we have to set all of these properties 130 00:05:50.580 --> 00:05:52.246 that we would set on the person, 131 00:05:52.246 --> 00:05:54.299 also on the athlete. 132 00:05:54.299 --> 00:05:57.033 So, John, born in 1990, 133 00:05:57.033 --> 00:05:59.866 now let's say that he's a swimmer, 134 00:06:00.752 --> 00:06:03.154 that he went to three Olympic games, 135 00:06:03.154 --> 00:06:05.071 where he won 10 medals. 136 00:06:06.096 --> 00:06:08.263 So, quite a great athlete. 137 00:06:09.749 --> 00:06:11.757 And let's now reload this, 138 00:06:11.757 --> 00:06:14.757 and take a look at John the athlete. 139 00:06:16.893 --> 00:06:18.560 Okay, so here we go. 140 00:06:20.262 --> 00:06:22.168 So we see all of our properties 141 00:06:22.168 --> 00:06:23.921 are defined here in the athlete, 142 00:06:23.921 --> 00:06:27.508 and we also see that our prototype is the Person5, 143 00:06:27.508 --> 00:06:30.459 and that means that the Athlete5 function constructor's 144 00:06:30.459 --> 00:06:32.060 prototype property 145 00:06:32.060 --> 00:06:36.177 is the same that Person5's prototype property. 146 00:06:36.177 --> 00:06:40.550 And so, in here, we have the prototype of Person5, 147 00:06:40.550 --> 00:06:41.867 and then, of course, we have 148 00:06:41.867 --> 00:06:44.469 the calculate age function, here. 149 00:06:44.469 --> 00:06:46.731 And what this means is that the prototype chain 150 00:06:46.731 --> 00:06:49.816 works exactly in the way that I showed you 151 00:06:49.816 --> 00:06:53.457 in a section where we talked about all of this. 152 00:06:53.457 --> 00:06:56.137 So, let's now test this. 153 00:06:56.137 --> 00:07:00.304 I'm gonna write johnAthlete5.calculateAge, 154 00:07:02.116 --> 00:07:03.915 and if I now reload this, 155 00:07:03.915 --> 00:07:07.757 then we actually get this error here. 156 00:07:07.757 --> 00:07:09.022 Alright. 157 00:07:09.022 --> 00:07:11.866 So, something must be wrong here 158 00:07:11.866 --> 00:07:13.862 in this method, okay? 159 00:07:13.862 --> 00:07:16.319 So, let's take a look, new date, 160 00:07:16.319 --> 00:07:18.732 okay, and here it is. 161 00:07:18.732 --> 00:07:20.339 So this, of course, is a method, 162 00:07:20.339 --> 00:07:22.434 so getfulYear is a method, 163 00:07:22.434 --> 00:07:25.427 and that's why it wasn't working, probably. 164 00:07:25.427 --> 00:07:27.089 So, let's try it again. 165 00:07:27.089 --> 00:07:30.354 Alright, so 26 is the age, 166 00:07:30.354 --> 00:07:33.045 and that, once again, works because 167 00:07:33.045 --> 00:07:35.222 not only all the instances 168 00:07:35.222 --> 00:07:37.767 of person can now inherit this method, 169 00:07:37.767 --> 00:07:40.066 but also, all the instances 170 00:07:40.066 --> 00:07:43.438 of the athlete class can inherit this method, 171 00:07:43.438 --> 00:07:46.065 because, as we did here in this line, 172 00:07:46.065 --> 00:07:48.161 the Athlete5 class inherits 173 00:07:48.161 --> 00:07:50.824 from the Person5 class. 174 00:07:50.824 --> 00:07:53.749 So, again, Person5 is the superclass, 175 00:07:53.749 --> 00:07:56.744 and Athlete5 is the subclass. 176 00:07:56.744 --> 00:07:58.329 And, of course, we can also set 177 00:07:58.329 --> 00:08:00.694 methods on the prototype property 178 00:08:00.694 --> 00:08:04.421 of the Athlete5 function constructor. 179 00:08:04.421 --> 00:08:05.588 Let's do that. 180 00:08:08.086 --> 00:08:11.003 .prototype.wonMedal 181 00:08:14.212 --> 00:08:16.794 This is a method that's very specific 182 00:08:16.794 --> 00:08:19.034 only to the athletes, 183 00:08:19.034 --> 00:08:20.633 and so all the instances 184 00:08:20.633 --> 00:08:22.369 are going to inherit this method 185 00:08:22.369 --> 00:08:24.836 if they are athlete instances, of course. 186 00:08:24.836 --> 00:08:26.510 And the Person instances, 187 00:08:26.510 --> 00:08:28.289 they will not inherit this method, 188 00:08:28.289 --> 00:08:30.665 because it's only in the Athlete5 189 00:08:30.665 --> 00:08:32.248 prototype property. 190 00:08:33.203 --> 00:08:35.399 So, this method will, very simply 191 00:08:35.399 --> 00:08:38.316 increase the medals of the athlete. 192 00:08:40.223 --> 00:08:43.265 Plus plus, so increase by one, 193 00:08:43.265 --> 00:08:45.848 and then log it to the console. 194 00:08:52.114 --> 00:08:55.697 And so, now, we can also use this one here. 195 00:08:57.487 --> 00:08:58.487 Won a medal. 196 00:09:01.667 --> 00:09:03.084 Let's try it out, 197 00:09:04.136 --> 00:09:05.711 and we got an error 198 00:09:05.711 --> 00:09:08.444 saying that one medal is not a function, 199 00:09:08.444 --> 00:09:11.277 and that's because it actually has to be 200 00:09:11.277 --> 00:09:15.277 after we connect these two function constructors 201 00:09:16.136 --> 00:09:18.107 with this line of code, here. 202 00:09:18.107 --> 00:09:21.186 So, we first set the Athlete5 prototype property, 203 00:09:21.186 --> 00:09:23.480 and then we can add methods 204 00:09:23.480 --> 00:09:26.090 to that very prototype property. 205 00:09:26.090 --> 00:09:28.700 Okay, and so now it's gonna work, 206 00:09:28.700 --> 00:09:31.508 and we see that he has 11 medals now. 207 00:09:31.508 --> 00:09:34.096 So, we started with 10, and now we have 11. 208 00:09:34.096 --> 00:09:36.485 Let's now just take 209 00:09:36.485 --> 00:09:39.985 a final look at the object in the console. 210 00:09:42.926 --> 00:09:46.380 Now, we'll also find the wonMedal here, 211 00:09:46.380 --> 00:09:48.369 in its prototype property, 212 00:09:48.369 --> 00:09:51.753 which is exactly what we did here. 213 00:09:51.753 --> 00:09:53.220 And then, of course, 214 00:09:53.220 --> 00:09:55.233 also the calculate age function, here, 215 00:09:55.233 --> 00:09:58.202 further down in the prototype chain. 216 00:09:58.202 --> 00:09:59.623 Great, so now you learned 217 00:09:59.623 --> 00:10:03.618 how to connect to function constructors in ES5, 218 00:10:03.618 --> 00:10:07.207 so let's now do the same thing in ES6. 219 00:10:07.207 --> 00:10:11.374 Once again, first I'm going to get back this class. 220 00:10:17.634 --> 00:10:18.467 Okay. 221 00:10:19.411 --> 00:10:21.078 So, this is for ES6, 222 00:10:21.966 --> 00:10:23.982 and this here is our person. 223 00:10:23.982 --> 00:10:26.726 Let's just get rid of this method 224 00:10:26.726 --> 00:10:28.256 that we don't want, 225 00:10:28.256 --> 00:10:30.211 and let's focus on what we need. 226 00:10:30.211 --> 00:10:32.209 So, we have our superclass here, 227 00:10:32.209 --> 00:10:33.989 and now comes the fun part, 228 00:10:33.989 --> 00:10:36.898 where we create a subclass of the person, 229 00:10:36.898 --> 00:10:39.667 and this is actually way easier to do in ES6 230 00:10:39.667 --> 00:10:41.552 with ES6 classes 231 00:10:41.552 --> 00:10:43.369 than with the function constructors 232 00:10:43.369 --> 00:10:45.434 like I showed you before. 233 00:10:45.434 --> 00:10:46.894 All we have to do 234 00:10:46.894 --> 00:10:48.977 is to say, once again, class, 235 00:10:48.977 --> 00:10:52.142 and this one is called Athlete6, 236 00:10:52.142 --> 00:10:56.274 and then we just use the extends keyword. 237 00:10:56.274 --> 00:11:00.441 So, we say that this class extends the person class. 238 00:11:01.995 --> 00:11:04.164 Okay, and so, always, 239 00:11:04.164 --> 00:11:06.694 in the subclass, we need to say 240 00:11:06.694 --> 00:11:09.384 that it extends the superclass. 241 00:11:09.384 --> 00:11:10.707 And then we, of course, 242 00:11:10.707 --> 00:11:13.207 once again need a constructor, 243 00:11:14.143 --> 00:11:16.250 and, remember, all classes 244 00:11:16.250 --> 00:11:18.580 need to have this very method. 245 00:11:18.580 --> 00:11:20.121 And then, in the same fashion 246 00:11:20.121 --> 00:11:22.820 as we had to do before with function constructors, 247 00:11:22.820 --> 00:11:25.403 we have to repeat the person properties here 248 00:11:25.403 --> 00:11:28.688 if we also want them on our athlete. 249 00:11:28.688 --> 00:11:30.021 So, name, 250 00:11:33.417 --> 00:11:36.318 yearOfBirth, job, 251 00:11:36.318 --> 00:11:39.141 and now, remember, what we want to add here is 252 00:11:39.141 --> 00:11:40.224 olympicGames, 253 00:11:42.446 --> 00:11:43.363 and medals. 254 00:11:47.012 --> 00:11:48.821 Now, what we did before, 255 00:11:48.821 --> 00:11:51.579 was to then use, in the subclass, 256 00:11:51.579 --> 00:11:55.148 this call method to call the superclass, 257 00:11:55.148 --> 00:11:57.919 with the this variable set to this. 258 00:11:57.919 --> 00:12:00.798 Now, here in classes, we have to do something similar, 259 00:12:00.798 --> 00:12:03.024 but it's also easier, because all we have to do 260 00:12:03.024 --> 00:12:04.107 is say super, 261 00:12:05.228 --> 00:12:07.726 and this will then call the superclass. 262 00:12:07.726 --> 00:12:09.103 And we don't have to manually 263 00:12:09.103 --> 00:12:11.432 set any this variable or anything. 264 00:12:11.432 --> 00:12:13.152 Everything happens automatically 265 00:12:13.152 --> 00:12:14.159 behind the scenes, 266 00:12:14.159 --> 00:12:15.661 and we don't have to take care 267 00:12:15.661 --> 00:12:17.184 of any of that. 268 00:12:17.184 --> 00:12:19.967 So, of course, we call the superclass 269 00:12:19.967 --> 00:12:23.426 using name, yearOfBirth, 270 00:12:23.426 --> 00:12:25.810 and job. 271 00:12:25.810 --> 00:12:27.311 And that makes sense, right? 272 00:12:27.311 --> 00:12:29.743 Because these are the exact same parameters 273 00:12:29.743 --> 00:12:32.037 that we have in the constructor 274 00:12:32.037 --> 00:12:33.204 of that class. 275 00:12:34.619 --> 00:12:36.491 And now we just say 276 00:12:36.491 --> 00:12:37.908 this.olympicGames 277 00:12:41.980 --> 00:12:44.063 is equal to olympicGames, 278 00:12:47.264 --> 00:12:50.514 and the medals are medals. 279 00:12:52.004 --> 00:12:53.733 And that's it. 280 00:12:53.733 --> 00:12:56.400 Let's also add our method, here. 281 00:13:01.408 --> 00:13:03.395 And so, it's the same code as we had before, 282 00:13:03.395 --> 00:13:04.562 so this.medals 283 00:13:05.572 --> 00:13:08.669 will be incremented by one unit, 284 00:13:08.669 --> 00:13:10.203 and then let's just 285 00:13:10.203 --> 00:13:12.036 log it to the console. 286 00:13:15.736 --> 00:13:17.736 So, let's use this class 287 00:13:21.180 --> 00:13:24.097 and create yet another johnAthlete. 288 00:13:32.145 --> 00:13:34.497 So, John, born in 1990, 289 00:13:34.497 --> 00:13:35.747 he's a swimmer, 290 00:13:36.986 --> 00:13:38.656 went to three Olympic games, 291 00:13:38.656 --> 00:13:40.924 where we won 10 medals. 292 00:13:40.924 --> 00:13:43.644 And just to check that everything works the same, 293 00:13:43.644 --> 00:13:46.360 we're gonna call the same methods that we called before, 294 00:13:46.360 --> 00:13:49.943 so johnAthlete6.wonMedal 295 00:13:52.774 --> 00:13:56.441 and johnAthlete6.calculateAge 296 00:13:58.998 --> 00:14:00.915 So, let's check it out, 297 00:14:01.826 --> 00:14:03.372 and we have a bug. 298 00:14:03.372 --> 00:14:05.900 Super keyword is not expected here, 299 00:14:05.900 --> 00:14:08.880 so here, it's not expected. 300 00:14:08.880 --> 00:14:10.958 It's actually because this is misspelled, 301 00:14:10.958 --> 00:14:13.208 so constructor. 302 00:14:14.842 --> 00:14:17.480 Okay, so now it should work. 303 00:14:17.480 --> 00:14:19.190 And yeah, here we go. 304 00:14:19.190 --> 00:14:22.050 It now says that the age is not a number, 305 00:14:22.050 --> 00:14:23.661 but that happened because 306 00:14:23.661 --> 00:14:26.874 we also had this bug here that we had before, 307 00:14:26.874 --> 00:14:29.151 so if we fix this, 308 00:14:29.151 --> 00:14:31.787 then it's gonna work here, as well. 309 00:14:31.787 --> 00:14:33.441 So, it gives us the same age 310 00:14:33.441 --> 00:14:36.386 and the same medals, so everything works the same. 311 00:14:36.386 --> 00:14:38.597 But, if you take a close look at it 312 00:14:38.597 --> 00:14:40.883 then you have to agree that it's way easier 313 00:14:40.883 --> 00:14:43.032 to write it this way here, 314 00:14:43.032 --> 00:14:44.948 these two class definitions, 315 00:14:44.948 --> 00:14:47.781 than to write all of this here up. 316 00:14:49.164 --> 00:14:51.323 Just, everything like this, 317 00:14:51.323 --> 00:14:54.427 and to have to add up this line of code, here, 318 00:14:54.427 --> 00:14:56.444 and it all looks a bit strange. 319 00:14:56.444 --> 00:14:59.488 I clearly prefer to do it the ES6 way, 320 00:14:59.488 --> 00:15:01.431 with the class definitions. 321 00:15:01.431 --> 00:15:03.104 All we need to make sure 322 00:15:03.104 --> 00:15:04.509 is that we really understand 323 00:15:04.509 --> 00:15:06.329 what happens behind the scenes, 324 00:15:06.329 --> 00:15:08.453 and what prototype inheritance is 325 00:15:08.453 --> 00:15:09.721 and how it works, 326 00:15:09.721 --> 00:15:12.197 and why doing these classes like this 327 00:15:12.197 --> 00:15:14.610 works the way that it does. 328 00:15:14.610 --> 00:15:16.353 And, just to show you once again 329 00:15:16.353 --> 00:15:19.962 that these classes are just synthetic sugar, 330 00:15:19.962 --> 00:15:21.905 let me show you these 331 00:15:21.905 --> 00:15:24.984 athletes here, as well, in the console, 332 00:15:24.984 --> 00:15:26.801 so to prove to you again 333 00:15:26.801 --> 00:15:30.400 that they look the exact same way. 334 00:15:30.400 --> 00:15:32.947 So, this is the functioning prototype chain, 335 00:15:32.947 --> 00:15:34.163 in the way we did it before 336 00:15:34.163 --> 00:15:36.866 with Athlete5 and Person5, 337 00:15:36.866 --> 00:15:39.533 and then, what we did right now, 338 00:15:40.831 --> 00:15:44.645 and so we see, if you make this bigger, 339 00:15:44.645 --> 00:15:46.462 that it's the exact same thing. 340 00:15:46.462 --> 00:15:48.261 So this prototype chain, here, 341 00:15:48.261 --> 00:15:51.986 is the exact same as this prototype chain. 342 00:15:51.986 --> 00:15:54.651 Alright, and so with these two final lectures 343 00:15:54.651 --> 00:15:55.993 about classes, 344 00:15:55.993 --> 00:15:58.343 you now truly understand everything 345 00:15:58.343 --> 00:15:59.513 that there is to know 346 00:15:59.513 --> 00:16:02.319 about prototype inheritance and classes 347 00:16:02.319 --> 00:16:05.546 in both ES5, and also ES6, 348 00:16:05.546 --> 00:16:07.379 which is really great.