WEBVTT 1 00:00:01.610 --> 00:00:04.130 So over the last couple of lectures, 2 00:00:04.130 --> 00:00:08.940 we explored how prototypal inheritance works in JavaScript. 3 00:00:08.940 --> 00:00:12.370 And we did that using a couple of different techniques. 4 00:00:12.370 --> 00:00:16.040 So we used constructor functions, ES6 classes, 5 00:00:16.040 --> 00:00:18.788 and object dot create. 6 00:00:18.788 --> 00:00:23.480 Now all of these techniques basically allow objects 7 00:00:23.480 --> 00:00:26.810 to inherit methods from its prototype. 8 00:00:26.810 --> 00:00:30.754 So to delegate their behavior to their prototype, 9 00:00:30.754 --> 00:00:32.020 right? 10 00:00:32.020 --> 00:00:34.770 But now it's time to turn our attention 11 00:00:34.770 --> 00:00:36.890 to more real inheritance. 12 00:00:36.890 --> 00:00:40.430 So in the way that we learned in the very first lecture 13 00:00:40.430 --> 00:00:42.130 of the section. 14 00:00:42.130 --> 00:00:45.320 So what I'm talking about is real inheritance 15 00:00:45.320 --> 00:00:46.870 between classes 16 00:00:46.870 --> 00:00:50.810 and not just prototypal inheritance between instances 17 00:00:50.810 --> 00:00:54.620 and a prototype property like we've been doing so far. 18 00:00:54.620 --> 00:00:57.150 And I'm using class terminology here 19 00:00:57.150 --> 00:01:00.050 because this simply makes it easier to understand 20 00:01:00.050 --> 00:01:01.520 what we're gonna do. 21 00:01:01.520 --> 00:01:05.030 But of course, you already know that real classes 22 00:01:05.030 --> 00:01:07.640 do not exist in JavaScript. 23 00:01:07.640 --> 00:01:10.620 But anyway here is what we're gonna do. 24 00:01:10.620 --> 00:01:13.480 So we will create a new student class 25 00:01:13.480 --> 00:01:16.570 and make it inherit from the person class 26 00:01:16.570 --> 00:01:18.940 that we have been using so far. 27 00:01:18.940 --> 00:01:21.830 So person will be the parent class 28 00:01:21.830 --> 00:01:24.620 and student will be the child class. 29 00:01:24.620 --> 00:01:29.360 that's because student is basically a subtype of a person. 30 00:01:29.360 --> 00:01:33.310 So a student is also a person, right? 31 00:01:33.310 --> 00:01:36.000 But it is a more specific person. 32 00:01:36.000 --> 00:01:39.560 And so this is an ideal child class. 33 00:01:39.560 --> 00:01:41.690 Now this is really useful 34 00:01:41.690 --> 00:01:44.140 because with this inheritance set up, 35 00:01:44.140 --> 00:01:47.340 we can have specific methods for the student, 36 00:01:47.340 --> 00:01:51.560 but then the student can also use generic person methods, 37 00:01:51.560 --> 00:01:55.210 like the calcAge method that we have been using. 38 00:01:55.210 --> 00:01:58.450 And that's basically the idea of inheritance that 39 00:01:58.450 --> 00:02:01.000 we're gonna implement in this lecture. 40 00:02:01.000 --> 00:02:04.130 Now, just like before we will start by implementing 41 00:02:04.130 --> 00:02:06.483 this using constructor functions. 42 00:02:07.550 --> 00:02:08.750 So in this lecture, 43 00:02:08.750 --> 00:02:13.080 we will inherit between classes using constructor functions, 44 00:02:13.080 --> 00:02:15.610 and this is gonna be a bit of work, 45 00:02:15.610 --> 00:02:18.319 but it will allow you to understand exactly 46 00:02:18.319 --> 00:02:21.770 how we set up the prototype chain in order 47 00:02:21.770 --> 00:02:25.430 to allow inheritance between the prototype properties 48 00:02:25.430 --> 00:02:28.650 of two different constructor functions. 49 00:02:28.650 --> 00:02:30.150 Then in the next lecture, 50 00:02:30.150 --> 00:02:33.460 we're gonna do the same thing using ES6 classes, 51 00:02:33.460 --> 00:02:36.780 which as you would expect is a lot easier. 52 00:02:36.780 --> 00:02:38.230 And finally, of course, 53 00:02:38.230 --> 00:02:42.600 we will go back to using object dot create as well. 54 00:02:42.600 --> 00:02:44.650 All right, but enough talk, 55 00:02:44.650 --> 00:02:46.733 let's put this into practice now. 56 00:02:48.290 --> 00:02:51.983 So here I already have the person function constructor 57 00:02:51.983 --> 00:02:54.210 that we have been working with in the beginning 58 00:02:54.210 --> 00:02:57.610 of the section and also the calcAge method 59 00:02:57.610 --> 00:03:01.520 that we set up on the prototype property of person. 60 00:03:01.520 --> 00:03:04.569 So this is just a copy of what we already did. 61 00:03:04.569 --> 00:03:08.870 And so now let's continue by building a constructor function 62 00:03:08.870 --> 00:03:09.943 for the student. 63 00:03:11.950 --> 00:03:14.173 So const student. 64 00:03:17.230 --> 00:03:19.890 Now usually we want a child class 65 00:03:19.890 --> 00:03:23.530 to have the same functionality as the parent class, 66 00:03:23.530 --> 00:03:26.660 but with some additional functionality. 67 00:03:26.660 --> 00:03:29.930 And so usually we pass in the same arguments, 68 00:03:29.930 --> 00:03:33.109 but then also some additional ones. 69 00:03:33.109 --> 00:03:38.100 So that's gonna be again, first name and birth year, 70 00:03:38.100 --> 00:03:41.053 and then we will also pass in the course. 71 00:03:43.353 --> 00:03:45.343 And now everything works the same here. 72 00:03:46.400 --> 00:03:51.400 So first name is gonna be first name this dot birth year 73 00:03:53.490 --> 00:03:57.090 is birth year and finally this dot course 74 00:03:58.940 --> 00:04:03.880 is gonna be the course, that gets into the function. 75 00:04:03.880 --> 00:04:06.370 So you see that in fact, 76 00:04:06.370 --> 00:04:09.540 this student class here has kind of the same data 77 00:04:09.540 --> 00:04:10.900 as the person. 78 00:04:10.900 --> 00:04:14.530 So it also has the first name and the birth year, 79 00:04:14.530 --> 00:04:17.020 but then it has an additional property, 80 00:04:17.020 --> 00:04:18.243 which is the course. 81 00:04:21.230 --> 00:04:23.823 So now let's actually create a new student. 82 00:04:25.660 --> 00:04:27.573 So I'm calling him Mike here. 83 00:04:29.770 --> 00:04:33.853 Born in 2020 and studying Computer Science. 84 00:04:40.530 --> 00:04:43.393 And just to make sure let's log in to the console, 85 00:04:46.450 --> 00:04:48.073 and here indeed it is. 86 00:04:50.420 --> 00:04:52.963 Let's now quickly add a method as well. 87 00:04:54.890 --> 00:04:58.720 So we take the prototype property one more time 88 00:04:58.720 --> 00:05:02.223 and then let's create a method called introduce. 89 00:05:05.960 --> 00:05:06.793 And so here, 90 00:05:07.910 --> 00:05:10.310 we're simply gonna log like an introduction phrase 91 00:05:10.310 --> 00:05:11.513 to the console. 92 00:05:12.600 --> 00:05:15.710 So for the student to introduce himself, 93 00:05:15.710 --> 00:05:20.710 so my name is this dot first name and I study, 94 00:05:25.830 --> 00:05:27.430 and then the name of the course. 95 00:05:33.010 --> 00:05:34.663 So let's call that here, 96 00:05:36.750 --> 00:05:41.750 mike dot introduce and all right. 97 00:05:46.120 --> 00:05:48.560 So that works just fine. 98 00:05:48.560 --> 00:05:49.393 Great. 99 00:05:49.393 --> 00:05:51.460 So far so good. 100 00:05:51.460 --> 00:05:54.710 However, there is one thing that we can 101 00:05:54.710 --> 00:05:58.810 and should improve here in our student constructor function. 102 00:05:58.810 --> 00:06:02.000 So right now this part of the code here 103 00:06:02.000 --> 00:06:04.120 is basically a simple copy 104 00:06:04.120 --> 00:06:06.380 of the person function constructor. 105 00:06:06.380 --> 00:06:08.963 So of this one that we want 106 00:06:08.963 --> 00:06:11.210 to be the parent class, right? 107 00:06:11.210 --> 00:06:15.560 And as you know, having duplicate code is never a good idea. 108 00:06:15.560 --> 00:06:17.260 First because it violates 109 00:06:17.260 --> 00:06:19.940 the "don't repeat yourself" principle, 110 00:06:19.940 --> 00:06:23.020 but second and even worse in this case 111 00:06:23.020 --> 00:06:26.950 is that imagine that the implementation of person here 112 00:06:26.950 --> 00:06:28.580 changes in the future, 113 00:06:28.580 --> 00:06:31.883 then that change will not be reflected in the student. 114 00:06:33.350 --> 00:06:36.230 So instead of having this duplicate code here, 115 00:06:36.230 --> 00:06:39.003 let's simply call the person function. 116 00:06:39.950 --> 00:06:44.310 So person, and then we pass in first name 117 00:06:44.310 --> 00:06:46.473 and the birth year as well. 118 00:06:47.570 --> 00:06:50.780 Now, do you think that this is gonna work? 119 00:06:50.780 --> 00:06:52.340 Well let's see. 120 00:06:52.340 --> 00:06:56.500 And then I'm gonna to explain to you why this doesn't work. 121 00:06:56.500 --> 00:07:00.080 So the problem here is that we are now actually calling 122 00:07:00.080 --> 00:07:04.620 this person constructor function as a regular function call. 123 00:07:04.620 --> 00:07:06.920 So we are not using this new operator 124 00:07:06.920 --> 00:07:09.730 to call this person function constructor. 125 00:07:09.730 --> 00:07:12.300 And so therefore this function call here 126 00:07:12.300 --> 00:07:14.760 is simply a regular function call. 127 00:07:14.760 --> 00:07:17.860 And remember that in a regular function call, 128 00:07:17.860 --> 00:07:21.160 the this keyword is set to undefined. 129 00:07:21.160 --> 00:07:24.440 And so therefore that's why we get this error here, 130 00:07:24.440 --> 00:07:28.070 that it cannot set first name on undefined. 131 00:07:28.070 --> 00:07:32.000 So instead of simply calling the person function here, 132 00:07:32.000 --> 00:07:35.900 we need to manually set the this keyword as well. 133 00:07:35.900 --> 00:07:39.100 So do you remember how we can call a function? 134 00:07:39.100 --> 00:07:41.540 And at the same time set the this keywords 135 00:07:41.540 --> 00:07:43.630 inside that function? 136 00:07:43.630 --> 00:07:47.030 Well, we can simply use the call method. 137 00:07:47.030 --> 00:07:50.600 So the call method will indeed call this function, 138 00:07:50.600 --> 00:07:54.440 but we will be able to specify the this keywords 139 00:07:54.440 --> 00:07:57.580 here as the first argument in this function. 140 00:07:57.580 --> 00:08:01.310 And so in this case, we want the this Keyword 141 00:08:01.310 --> 00:08:04.750 in this function to simply be the this keyword 142 00:08:04.750 --> 00:08:08.410 inside this function here, right? 143 00:08:08.410 --> 00:08:11.650 Because as you know the this Keyword is gonna be 144 00:08:11.650 --> 00:08:12.623 in the beginning, 145 00:08:13.661 --> 00:08:17.240 this empty object that is being created by the new operator. 146 00:08:17.240 --> 00:08:19.720 And so it is on that new object 147 00:08:19.720 --> 00:08:22.010 where we want to set the first name 148 00:08:22.010 --> 00:08:23.860 and the birth year property. 149 00:08:23.860 --> 00:08:25.230 Right? 150 00:08:25.230 --> 00:08:29.520 So if we check this now, then it is back to working. 151 00:08:29.520 --> 00:08:33.283 And so this is a much better and more robust solution. 152 00:08:35.080 --> 00:08:35.970 Okay. 153 00:08:35.970 --> 00:08:38.633 So far, this is what we have built. 154 00:08:39.911 --> 00:08:42.070 So it's simply the student constructor function 155 00:08:42.070 --> 00:08:44.260 and its prototype property. 156 00:08:44.260 --> 00:08:48.230 And then the mike object linked to its prototype. 157 00:08:48.230 --> 00:08:50.630 And that prototype is of course 158 00:08:50.630 --> 00:08:54.090 the constructor functions prototype property. 159 00:08:54.090 --> 00:08:57.410 Now this link between instance and prototype 160 00:08:57.410 --> 00:09:01.120 has been made automatically by creating the mike object 161 00:09:01.120 --> 00:09:02.990 with the new operator. 162 00:09:02.990 --> 00:09:05.890 So all of this is what we had already learned. 163 00:09:05.890 --> 00:09:08.420 So this is nothing new at this point 164 00:09:08.420 --> 00:09:09.680 Right? 165 00:09:09.680 --> 00:09:13.010 Now a student is also a person. 166 00:09:13.010 --> 00:09:18.010 And so we want student and person to be connected like this. 167 00:09:18.290 --> 00:09:20.660 So we really want the student class 168 00:09:20.660 --> 00:09:25.270 to be the child class and inherit from the person class, 169 00:09:25.270 --> 00:09:28.690 which will then function as the parent class. 170 00:09:28.690 --> 00:09:31.970 So this way, all instances of student 171 00:09:31.970 --> 00:09:34.680 could also get access to methods 172 00:09:34.680 --> 00:09:37.440 from the person's prototype property, 173 00:09:37.440 --> 00:09:41.670 like the calcAge method through the prototype chain. 174 00:09:41.670 --> 00:09:44.720 And that's the whole idea of inheritance. 175 00:09:44.720 --> 00:09:47.930 Its the child classes can share behavior 176 00:09:47.930 --> 00:09:50.160 from their parent classes. 177 00:09:50.160 --> 00:09:54.480 So looking at this diagram, basically what we want to do 178 00:09:54.480 --> 00:09:57.040 is to make person dot prototype, 179 00:09:57.040 --> 00:10:00.436 the prototype of student dot prototype. 180 00:10:00.436 --> 00:10:02.170 Or in other words, 181 00:10:02.170 --> 00:10:05.310 we want to set the underscore protal property 182 00:10:05.310 --> 00:10:09.487 of student dot prototype to person dot prototype. 183 00:10:09.487 --> 00:10:11.960 And if this sounds confusing, 184 00:10:11.960 --> 00:10:14.990 then please just pause the video here for a minute 185 00:10:14.990 --> 00:10:18.820 and keep looking at this diagram for some more time. 186 00:10:18.820 --> 00:10:21.220 So that's why I created it. 187 00:10:21.220 --> 00:10:22.200 Okay? 188 00:10:22.200 --> 00:10:23.390 Now, anyway, 189 00:10:23.390 --> 00:10:27.140 we are gonna have to create this connection manually. 190 00:10:27.140 --> 00:10:28.430 And to do this, 191 00:10:28.430 --> 00:10:31.410 so to link these two prototype objects, 192 00:10:31.410 --> 00:10:34.400 we are gonna use object dot create 193 00:10:34.400 --> 00:10:36.880 because defining prototypes manually 194 00:10:36.880 --> 00:10:40.560 is exactly what object dot create does. 195 00:10:40.560 --> 00:10:41.393 Great. 196 00:10:41.393 --> 00:10:43.153 So let's go do that. 197 00:10:44.890 --> 00:10:48.370 So let's do what I just showed you on the slide 198 00:10:48.370 --> 00:10:50.150 here in our code. 199 00:10:50.150 --> 00:10:53.524 And it's important that you do this at exactly 200 00:10:53.524 --> 00:10:54.780 this point of the code. 201 00:10:54.780 --> 00:10:55.940 Okay? 202 00:10:55.940 --> 00:10:58.443 And I will tell you later why that is. 203 00:10:59.840 --> 00:11:03.993 So anyway, student dot prototype, 204 00:11:04.840 --> 00:11:09.223 should be object dot create, 205 00:11:11.410 --> 00:11:14.083 person dot prototype. 206 00:11:15.230 --> 00:11:16.230 And with this, 207 00:11:16.230 --> 00:11:20.212 the student dot prototype object is now an object that 208 00:11:20.212 --> 00:11:23.860 inherits from person dot prototype. 209 00:11:23.860 --> 00:11:27.100 Now we have to create this connection here 210 00:11:27.100 --> 00:11:29.470 before we add any more methods 211 00:11:29.470 --> 00:11:33.040 to the prototype object of student. 212 00:11:33.040 --> 00:11:35.120 And that's because object dot create, 213 00:11:35.120 --> 00:11:37.490 will return an empty object. 214 00:11:37.490 --> 00:11:41.950 And so at this point, student dot prototype is empty. 215 00:11:41.950 --> 00:11:44.680 And so then onto that empty object, 216 00:11:44.680 --> 00:11:47.660 we can add methods like this one. 217 00:11:47.660 --> 00:11:49.520 But if we did it the other way around 218 00:11:51.107 --> 00:11:53.890 so if this was after we created this method here, 219 00:11:53.890 --> 00:11:55.670 then object dot create 220 00:11:55.670 --> 00:11:58.023 would basically overwrite these methods 221 00:11:58.023 --> 00:11:59.730 that we had already added 222 00:11:59.730 --> 00:12:03.210 to the prototype object of student. 223 00:12:03.210 --> 00:12:05.910 Now you might be wondering why we even needed 224 00:12:07.207 --> 00:12:08.360 to use object dot create. 225 00:12:08.360 --> 00:12:11.363 So why didn't we just do this? 226 00:12:13.600 --> 00:12:18.600 So student dot prototype equals the person dot prototype, 227 00:12:22.820 --> 00:12:23.660 right? 228 00:12:23.660 --> 00:12:27.450 This many would have seen a little bit more logical to do, 229 00:12:27.450 --> 00:12:30.410 but in fact, this doesn't work at all. 230 00:12:30.410 --> 00:12:33.003 And let me actually show you why that is. 231 00:12:34.580 --> 00:12:37.190 So if we do student dot prototype 232 00:12:37.190 --> 00:12:39.860 equal to person dot prototype, 233 00:12:39.860 --> 00:12:44.490 then we will not end up with a prototype chain that we need. 234 00:12:44.490 --> 00:12:47.480 Instead, we would end up with this, 235 00:12:47.480 --> 00:12:50.724 which is a completely wrong prototype chain. 236 00:12:50.724 --> 00:12:53.840 And that's because here we're actually saying 237 00:12:53.840 --> 00:12:56.240 that the student's prototype property 238 00:12:56.240 --> 00:12:58.185 and a person's prototype property 239 00:12:58.185 --> 00:13:01.360 should be the exact same object. 240 00:13:01.360 --> 00:13:05.090 But in fact that's just not what we want. 241 00:13:05.090 --> 00:13:08.350 What we do want is the person's prototype object 242 00:13:08.350 --> 00:13:12.700 to be the prototype of student dot prototype. 243 00:13:12.700 --> 00:13:15.150 So we want to inherit from it, 244 00:13:15.150 --> 00:13:18.700 but it should not be the exact same object. 245 00:13:18.700 --> 00:13:22.631 And that's why we actually needed object dot create. 246 00:13:22.631 --> 00:13:24.254 Alright, 247 00:13:24.254 --> 00:13:29.254 so let's get rid of this bad code and here let's just say 248 00:13:29.670 --> 00:13:33.130 linking prototypes. 249 00:13:33.130 --> 00:13:35.850 And so now with all of this in place, 250 00:13:35.850 --> 00:13:36.683 we should be able 251 00:13:36.683 --> 00:13:39.884 to do mike dot calcAge, 252 00:13:39.884 --> 00:13:44.360 and indeed we get the age of 17. 253 00:13:44.360 --> 00:13:45.460 Beautiful. 254 00:13:45.460 --> 00:13:47.640 So this worked just fine. 255 00:13:47.640 --> 00:13:50.170 And so let's actually now go analyze 256 00:13:50.170 --> 00:13:51.883 what exactly happened here. 257 00:13:53.450 --> 00:13:55.720 And we already know that this worked 258 00:13:55.720 --> 00:13:58.100 because of the prototype chain, 259 00:13:58.100 --> 00:14:00.570 but let's see exactly how. 260 00:14:00.570 --> 00:14:03.600 So when we do mike dot calcAge, 261 00:14:03.600 --> 00:14:08.180 we are effectively doing a property or a method lookup. 262 00:14:08.180 --> 00:14:09.550 So that is JavaScript 263 00:14:09.550 --> 00:14:13.650 trying to find the requested property or method. 264 00:14:13.650 --> 00:14:15.750 Now, in this case, as we know, 265 00:14:15.750 --> 00:14:17.990 the calcAge method is of course 266 00:14:17.990 --> 00:14:20.970 not directly on the mike object. 267 00:14:20.970 --> 00:14:24.320 It's also not in mike's prototype. 268 00:14:24.320 --> 00:14:27.330 That's where we defined the introduced method, 269 00:14:27.330 --> 00:14:29.250 but not calcAge. 270 00:14:29.250 --> 00:14:30.350 Right? 271 00:14:30.350 --> 00:14:31.990 So just like before, 272 00:14:31.990 --> 00:14:34.710 whenever we try to access a method, 273 00:14:34.710 --> 00:14:37.400 that's not on the object's prototype, 274 00:14:37.400 --> 00:14:40.330 then JavaScript, will look up even further 275 00:14:40.330 --> 00:14:44.270 in the prototype chain and see if it can find a method 276 00:14:44.270 --> 00:14:46.460 so in the parent prototype. 277 00:14:46.460 --> 00:14:48.960 And that's exactly what happens here. 278 00:14:48.960 --> 00:14:52.077 So JavaScript will finally find the calcAge 279 00:14:52.077 --> 00:14:54.380 in person dot prototype, 280 00:14:54.380 --> 00:14:57.420 which is exactly where we defined it. 281 00:14:57.420 --> 00:14:58.820 And that's the whole reason 282 00:14:58.820 --> 00:15:02.150 why we set up the prototype chain like this 283 00:15:02.150 --> 00:15:05.790 so that the mike object can inherit whatever methods 284 00:15:05.790 --> 00:15:09.110 are in its parent class, basically. 285 00:15:09.110 --> 00:15:10.210 So in summary, 286 00:15:10.210 --> 00:15:12.770 we are now able to call a method 287 00:15:12.770 --> 00:15:15.530 that is on a person's prototype property, 288 00:15:15.530 --> 00:15:19.170 on a student object, and it still works. 289 00:15:19.170 --> 00:15:22.058 So that's the power of inheritance. 290 00:15:22.058 --> 00:15:23.620 Great. 291 00:15:23.620 --> 00:15:25.460 And since we're already here, 292 00:15:25.460 --> 00:15:28.890 let's also quickly complete the prototype chain. 293 00:15:28.890 --> 00:15:32.970 So just like before object dot prototype will sit on 294 00:15:34.046 --> 00:15:35.290 top of the prototype chain. 295 00:15:35.290 --> 00:15:38.170 So of course we could still call a method 296 00:15:38.170 --> 00:15:42.130 like the s on property method on mike too. 297 00:15:42.130 --> 00:15:44.050 It doesn't matter how far away 298 00:15:44.050 --> 00:15:46.940 in the prototype chain a method is. 299 00:15:46.940 --> 00:15:47.810 And with this, 300 00:15:47.810 --> 00:15:50.660 we now have the full picture of how inheritance 301 00:15:50.660 --> 00:15:54.540 between classes works with function constructors. 302 00:15:54.540 --> 00:15:56.990 And of course, with ES6 classes, 303 00:15:56.990 --> 00:15:59.730 it works exactly the same internally. 304 00:15:59.730 --> 00:16:02.410 All that changes is the syntax. 305 00:16:02.410 --> 00:16:04.980 So when we do the same thing in the next video 306 00:16:04.980 --> 00:16:07.920 using ES6 classes, then keep in mind 307 00:16:07.920 --> 00:16:10.803 that it's gonna work just like I described here. 308 00:16:12.590 --> 00:16:14.880 And so now just to finish this video, 309 00:16:14.880 --> 00:16:19.270 let's quickly inspect all of this also in the console, 310 00:16:19.270 --> 00:16:24.270 let's say mike dot underscore underscore proto. 311 00:16:27.580 --> 00:16:32.580 And so this is of course gonna to be, this object here, 312 00:16:33.565 --> 00:16:35.223 which contains the introduce method, 313 00:16:36.140 --> 00:16:37.540 all right? 314 00:16:37.540 --> 00:16:39.050 So this is nothing new, 315 00:16:39.050 --> 00:16:40.730 but you see here right in the console 316 00:16:40.730 --> 00:16:43.513 that this itself has a prototype too. 317 00:16:44.920 --> 00:16:47.039 So let's try this here, 318 00:16:47.039 --> 00:16:50.110 and so see the next prototype. 319 00:16:50.110 --> 00:16:54.240 And so now this is indeed the prototype, 320 00:16:54.240 --> 00:16:57.170 which contains the calcAge function. 321 00:16:57.170 --> 00:17:02.170 And so in fact that is exactly this object here. 322 00:17:04.880 --> 00:17:06.347 Right? 323 00:17:06.347 --> 00:17:09.220 And maybe it's even easier to visualize 324 00:17:09.220 --> 00:17:10.803 in the console like this. 325 00:17:11.710 --> 00:17:14.290 So taking a look at mike itself, 326 00:17:14.290 --> 00:17:19.290 and then mike's prototype is a person here, 327 00:17:19.800 --> 00:17:21.420 which is actually not correct 328 00:17:21.420 --> 00:17:23.203 and we will fix that in a second. 329 00:17:24.220 --> 00:17:26.360 So, I mean, In the prototype chain, 330 00:17:26.360 --> 00:17:29.623 everything is correct, but here it should say student, 331 00:17:31.070 --> 00:17:33.967 so you see that right now, it says person, 332 00:17:33.967 --> 00:17:37.233 but Mike is actually of the type student. 333 00:17:39.150 --> 00:17:40.050 Okay. 334 00:17:40.050 --> 00:17:43.000 But anyway, here you see the introduced method 335 00:17:43.000 --> 00:17:45.300 that we defined earlier. 336 00:17:45.300 --> 00:17:48.249 And then if we go even further into this, 337 00:17:48.249 --> 00:17:51.690 so not this one, 338 00:17:51.690 --> 00:17:56.690 but this one then you see, of course the calcAge function, 339 00:17:56.960 --> 00:18:01.000 which is in the prototype of the prototype basically. 340 00:18:01.000 --> 00:18:02.513 Right? 341 00:18:02.513 --> 00:18:07.513 So what I said that we need to fix is this. 342 00:18:08.490 --> 00:18:10.622 So when we take a look at 343 00:18:10.622 --> 00:18:15.622 student dot prototype dot constructor, 344 00:18:17.957 --> 00:18:21.890 then remember that ideally this should point back 345 00:18:21.890 --> 00:18:24.263 to the student, right? 346 00:18:25.230 --> 00:18:28.870 But here it points back, apparently to person. 347 00:18:28.870 --> 00:18:31.843 So actually we should use console dot dir 348 00:18:33.520 --> 00:18:36.470 And so you see that JavaScript now, thinks 349 00:18:36.470 --> 00:18:39.890 that the constructor of student or prototype 350 00:18:39.890 --> 00:18:41.453 is person here. 351 00:18:43.250 --> 00:18:44.840 And the reason for that is 352 00:18:44.840 --> 00:18:48.450 that we set the prototype property of the student 353 00:18:48.450 --> 00:18:50.650 using object dot create. 354 00:18:50.650 --> 00:18:52.360 And so this makes it so 355 00:18:52.360 --> 00:18:55.580 that the constructor of student dot prototype 356 00:18:55.580 --> 00:18:57.400 is still person. 357 00:18:57.400 --> 00:19:00.980 So we need to fix this because sometimes it's important 358 00:19:00.980 --> 00:19:04.040 to rely on this constructor property. 359 00:19:04.040 --> 00:19:06.414 And so if we want to rely on that, 360 00:19:06.414 --> 00:19:09.200 it should indeed be correct. 361 00:19:09.200 --> 00:19:11.230 But that's easy to fix. 362 00:19:11.230 --> 00:19:16.090 We can just say student dot prototype dot constructor 363 00:19:18.020 --> 00:19:20.233 and set it to student. 364 00:19:21.800 --> 00:19:25.090 but let me just try out some more things here. 365 00:19:25.090 --> 00:19:27.850 So just to make sure everything works 366 00:19:27.850 --> 00:19:31.963 so we can again use the instance of, operator here. 367 00:19:34.600 --> 00:19:36.940 And so this of course is gonna be true 368 00:19:36.940 --> 00:19:38.600 because student is of course 369 00:19:38.600 --> 00:19:41.540 the constructor function of mike. 370 00:19:41.540 --> 00:19:45.220 But if we try to same now with person 371 00:19:45.220 --> 00:19:49.020 then that indeed should be also true. 372 00:19:49.020 --> 00:19:50.740 And so, in fact it is. 373 00:19:50.740 --> 00:19:52.300 And so again, 374 00:19:52.300 --> 00:19:55.470 it's because we linked the prototypes together. 375 00:19:55.470 --> 00:19:57.700 So if we didn't have this, 376 00:19:57.700 --> 00:19:59.000 then this should be false. 377 00:20:00.560 --> 00:20:02.071 So of course, 378 00:20:02.071 --> 00:20:05.240 mike dot calcAge is not a function in this case 379 00:20:05.240 --> 00:20:08.680 because the prototype chain is now not correctly set up 380 00:20:08.680 --> 00:20:10.371 to find this method, 381 00:20:10.371 --> 00:20:12.977 but let's quickly take this out. 382 00:20:12.977 --> 00:20:17.633 And so now indeed mike is no longer an instance of person. 383 00:20:19.150 --> 00:20:19.983 And of course, 384 00:20:20.885 --> 00:20:24.040 mike is also an instance of object because this also 385 00:20:24.040 --> 00:20:26.070 in its prototype chain. 386 00:20:26.070 --> 00:20:27.040 Now, right. 387 00:20:27.040 --> 00:20:29.740 So here, we just proved that a prototype chain 388 00:20:31.117 --> 00:20:33.667 is in fact set up the way that we intended it to be 389 00:20:34.670 --> 00:20:35.640 all right. 390 00:20:35.640 --> 00:20:38.349 And that's the end of a very long, 391 00:20:38.349 --> 00:20:41.540 and I admit complex lecture. 392 00:20:41.540 --> 00:20:44.900 But I hope that I could still consolidate your knowledge 393 00:20:44.900 --> 00:20:48.371 about prototypes and the prototype chain even further 394 00:20:48.371 --> 00:20:51.740 because you know how to even manipulate 395 00:20:51.740 --> 00:20:55.040 the prototype chain yourself manually. 396 00:20:55.040 --> 00:20:57.290 And actually let's now go test, 397 00:20:57.290 --> 00:20:59.520 if you did actually understand 398 00:20:59.520 --> 00:21:01.433 right in the next coding challenge.