Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,610 --> 00:00:04,130 So over the last couple of lectures, 2 2 00:00:04,130 --> 00:00:08,940 we explored how prototypal inheritance works in JavaScript. 3 3 00:00:08,940 --> 00:00:12,370 And we did that using a couple of different techniques. 4 4 00:00:12,370 --> 00:00:16,040 So we used constructor functions, ES6 classes, 5 5 00:00:16,040 --> 00:00:18,788 and object dot create. 6 6 00:00:18,788 --> 00:00:23,480 Now all of these techniques basically allow objects 7 7 00:00:23,480 --> 00:00:26,810 to inherit methods from its prototype. 8 8 00:00:26,810 --> 00:00:30,754 So to delegate their behavior to their prototype, 9 9 00:00:30,754 --> 00:00:32,020 right? 10 10 00:00:32,020 --> 00:00:34,770 But now it's time to turn our attention 11 11 00:00:34,770 --> 00:00:36,890 to more real inheritance. 12 12 00:00:36,890 --> 00:00:40,430 So in the way that we learned in the very first lecture 13 13 00:00:40,430 --> 00:00:42,130 of the section. 14 14 00:00:42,130 --> 00:00:45,320 So what I'm talking about is real inheritance 15 15 00:00:45,320 --> 00:00:46,870 between classes 16 16 00:00:46,870 --> 00:00:50,810 and not just prototypal inheritance between instances 17 17 00:00:50,810 --> 00:00:54,620 and a prototype property like we've been doing so far. 18 18 00:00:54,620 --> 00:00:57,150 And I'm using class terminology here 19 19 00:00:57,150 --> 00:01:00,050 because this simply makes it easier to understand 20 20 00:01:00,050 --> 00:01:01,520 what we're gonna do. 21 21 00:01:01,520 --> 00:01:05,030 But of course, you already know that real classes 22 22 00:01:05,030 --> 00:01:07,640 do not exist in JavaScript. 23 23 00:01:07,640 --> 00:01:10,620 But anyway here is what we're gonna do. 24 24 00:01:10,620 --> 00:01:13,480 So we will create a new student class 25 25 00:01:13,480 --> 00:01:16,570 and make it inherit from the person class 26 26 00:01:16,570 --> 00:01:18,940 that we have been using so far. 27 27 00:01:18,940 --> 00:01:21,830 So person will be the parent class 28 28 00:01:21,830 --> 00:01:24,620 and student will be the child class. 29 29 00:01:24,620 --> 00:01:29,360 that's because student is basically a subtype of a person. 30 30 00:01:29,360 --> 00:01:33,310 So a student is also a person, right? 31 31 00:01:33,310 --> 00:01:36,000 But it is a more specific person. 32 32 00:01:36,000 --> 00:01:39,560 And so this is an ideal child class. 33 33 00:01:39,560 --> 00:01:41,690 Now this is really useful 34 34 00:01:41,690 --> 00:01:44,140 because with this inheritance set up, 35 35 00:01:44,140 --> 00:01:47,340 we can have specific methods for the student, 36 36 00:01:47,340 --> 00:01:51,560 but then the student can also use generic person methods, 37 37 00:01:51,560 --> 00:01:55,210 like the calcAge method that we have been using. 38 38 00:01:55,210 --> 00:01:58,450 And that's basically the idea of inheritance that 39 39 00:01:58,450 --> 00:02:01,000 we're gonna implement in this lecture. 40 40 00:02:01,000 --> 00:02:04,130 Now, just like before we will start by implementing 41 41 00:02:04,130 --> 00:02:06,483 this using constructor functions. 42 42 00:02:07,550 --> 00:02:08,750 So in this lecture, 43 43 00:02:08,750 --> 00:02:13,080 we will inherit between classes using constructor functions, 44 44 00:02:13,080 --> 00:02:15,610 and this is gonna be a bit of work, 45 45 00:02:15,610 --> 00:02:18,319 but it will allow you to understand exactly 46 46 00:02:18,319 --> 00:02:21,770 how we set up the prototype chain in order 47 47 00:02:21,770 --> 00:02:25,430 to allow inheritance between the prototype properties 48 48 00:02:25,430 --> 00:02:28,650 of two different constructor functions. 49 49 00:02:28,650 --> 00:02:30,150 Then in the next lecture, 50 50 00:02:30,150 --> 00:02:33,460 we're gonna do the same thing using ES6 classes, 51 51 00:02:33,460 --> 00:02:36,780 which as you would expect is a lot easier. 52 52 00:02:36,780 --> 00:02:38,230 And finally, of course, 53 53 00:02:38,230 --> 00:02:42,600 we will go back to using object dot create as well. 54 54 00:02:42,600 --> 00:02:44,650 All right, but enough talk, 55 55 00:02:44,650 --> 00:02:46,733 let's put this into practice now. 56 56 00:02:48,290 --> 00:02:51,983 So here I already have the person function constructor 57 57 00:02:51,983 --> 00:02:54,210 that we have been working with in the beginning 58 58 00:02:54,210 --> 00:02:57,610 of the section and also the calcAge method 59 59 00:02:57,610 --> 00:03:01,520 that we set up on the prototype property of person. 60 60 00:03:01,520 --> 00:03:04,569 So this is just a copy of what we already did. 61 61 00:03:04,569 --> 00:03:08,870 And so now let's continue by building a constructor function 62 62 00:03:08,870 --> 00:03:09,943 for the student. 63 63 00:03:11,950 --> 00:03:14,173 So const student. 64 64 00:03:17,230 --> 00:03:19,890 Now usually we want a child class 65 65 00:03:19,890 --> 00:03:23,530 to have the same functionality as the parent class, 66 66 00:03:23,530 --> 00:03:26,660 but with some additional functionality. 67 67 00:03:26,660 --> 00:03:29,930 And so usually we pass in the same arguments, 68 68 00:03:29,930 --> 00:03:33,109 but then also some additional ones. 69 69 00:03:33,109 --> 00:03:38,100 So that's gonna be again, first name and birth year, 70 70 00:03:38,100 --> 00:03:41,053 and then we will also pass in the course. 71 71 00:03:43,353 --> 00:03:45,343 And now everything works the same here. 72 72 00:03:46,400 --> 00:03:51,400 So first name is gonna be first name this dot birth year 73 73 00:03:53,490 --> 00:03:57,090 is birth year and finally this dot course 74 74 00:03:58,940 --> 00:04:03,880 is gonna be the course, that gets into the function. 75 75 00:04:03,880 --> 00:04:06,370 So you see that in fact, 76 76 00:04:06,370 --> 00:04:09,540 this student class here has kind of the same data 77 77 00:04:09,540 --> 00:04:10,900 as the person. 78 78 00:04:10,900 --> 00:04:14,530 So it also has the first name and the birth year, 79 79 00:04:14,530 --> 00:04:17,020 but then it has an additional property, 80 80 00:04:17,020 --> 00:04:18,243 which is the course. 81 81 00:04:21,230 --> 00:04:23,823 So now let's actually create a new student. 82 82 00:04:25,660 --> 00:04:27,573 So I'm calling him Mike here. 83 83 00:04:29,770 --> 00:04:33,853 Born in 2020 and studying Computer Science. 84 84 00:04:40,530 --> 00:04:43,393 And just to make sure let's log in to the console, 85 85 00:04:46,450 --> 00:04:48,073 and here indeed it is. 86 86 00:04:50,420 --> 00:04:52,963 Let's now quickly add a method as well. 87 87 00:04:54,890 --> 00:04:58,720 So we take the prototype property one more time 88 88 00:04:58,720 --> 00:05:02,223 and then let's create a method called introduce. 89 89 00:05:05,960 --> 00:05:06,793 And so here, 90 90 00:05:07,910 --> 00:05:10,310 we're simply gonna log like an introduction phrase 91 91 00:05:10,310 --> 00:05:11,513 to the console. 92 92 00:05:12,600 --> 00:05:15,710 So for the student to introduce himself, 93 93 00:05:15,710 --> 00:05:20,710 so my name is this dot first name and I study, 94 94 00:05:25,830 --> 00:05:27,430 and then the name of the course. 95 95 00:05:33,010 --> 00:05:34,663 So let's call that here, 96 96 00:05:36,750 --> 00:05:41,750 mike dot introduce and all right. 97 97 00:05:46,120 --> 00:05:48,560 So that works just fine. 98 98 00:05:48,560 --> 00:05:49,393 Great. 99 99 00:05:49,393 --> 00:05:51,460 So far so good. 100 100 00:05:51,460 --> 00:05:54,710 However, there is one thing that we can 101 101 00:05:54,710 --> 00:05:58,810 and should improve here in our student constructor function. 102 102 00:05:58,810 --> 00:06:02,000 So right now this part of the code here 103 103 00:06:02,000 --> 00:06:04,120 is basically a simple copy 104 104 00:06:04,120 --> 00:06:06,380 of the person function constructor. 105 105 00:06:06,380 --> 00:06:08,963 So of this one that we want 106 106 00:06:08,963 --> 00:06:11,210 to be the parent class, right? 107 107 00:06:11,210 --> 00:06:15,560 And as you know, having duplicate code is never a good idea. 108 108 00:06:15,560 --> 00:06:17,260 First because it violates 109 109 00:06:17,260 --> 00:06:19,940 the "don't repeat yourself" principle, 110 110 00:06:19,940 --> 00:06:23,020 but second and even worse in this case 111 111 00:06:23,020 --> 00:06:26,950 is that imagine that the implementation of person here 112 112 00:06:26,950 --> 00:06:28,580 changes in the future, 113 113 00:06:28,580 --> 00:06:31,883 then that change will not be reflected in the student. 114 114 00:06:33,350 --> 00:06:36,230 So instead of having this duplicate code here, 115 115 00:06:36,230 --> 00:06:39,003 let's simply call the person function. 116 116 00:06:39,950 --> 00:06:44,310 So person, and then we pass in first name 117 117 00:06:44,310 --> 00:06:46,473 and the birth year as well. 118 118 00:06:47,570 --> 00:06:50,780 Now, do you think that this is gonna work? 119 119 00:06:50,780 --> 00:06:52,340 Well let's see. 120 120 00:06:52,340 --> 00:06:56,500 And then I'm gonna to explain to you why this doesn't work. 121 121 00:06:56,500 --> 00:07:00,080 So the problem here is that we are now actually calling 122 122 00:07:00,080 --> 00:07:04,620 this person constructor function as a regular function call. 123 123 00:07:04,620 --> 00:07:06,920 So we are not using this new operator 124 124 00:07:06,920 --> 00:07:09,730 to call this person function constructor. 125 125 00:07:09,730 --> 00:07:12,300 And so therefore this function call here 126 126 00:07:12,300 --> 00:07:14,760 is simply a regular function call. 127 127 00:07:14,760 --> 00:07:17,860 And remember that in a regular function call, 128 128 00:07:17,860 --> 00:07:21,160 the this keyword is set to undefined. 129 129 00:07:21,160 --> 00:07:24,440 And so therefore that's why we get this error here, 130 130 00:07:24,440 --> 00:07:28,070 that it cannot set first name on undefined. 131 131 00:07:28,070 --> 00:07:32,000 So instead of simply calling the person function here, 132 132 00:07:32,000 --> 00:07:35,900 we need to manually set the this keyword as well. 133 133 00:07:35,900 --> 00:07:39,100 So do you remember how we can call a function? 134 134 00:07:39,100 --> 00:07:41,540 And at the same time set the this keywords 135 135 00:07:41,540 --> 00:07:43,630 inside that function? 136 136 00:07:43,630 --> 00:07:47,030 Well, we can simply use the call method. 137 137 00:07:47,030 --> 00:07:50,600 So the call method will indeed call this function, 138 138 00:07:50,600 --> 00:07:54,440 but we will be able to specify the this keywords 139 139 00:07:54,440 --> 00:07:57,580 here as the first argument in this function. 140 140 00:07:57,580 --> 00:08:01,310 And so in this case, we want the this Keyword 141 141 00:08:01,310 --> 00:08:04,750 in this function to simply be the this keyword 142 142 00:08:04,750 --> 00:08:08,410 inside this function here, right? 143 143 00:08:08,410 --> 00:08:11,650 Because as you know the this Keyword is gonna be 144 144 00:08:11,650 --> 00:08:12,623 in the beginning, 145 145 00:08:13,661 --> 00:08:17,240 this empty object that is being created by the new operator. 146 146 00:08:17,240 --> 00:08:19,720 And so it is on that new object 147 147 00:08:19,720 --> 00:08:22,010 where we want to set the first name 148 148 00:08:22,010 --> 00:08:23,860 and the birth year property. 149 149 00:08:23,860 --> 00:08:25,230 Right? 150 150 00:08:25,230 --> 00:08:29,520 So if we check this now, then it is back to working. 151 151 00:08:29,520 --> 00:08:33,283 And so this is a much better and more robust solution. 152 152 00:08:35,080 --> 00:08:35,970 Okay. 153 153 00:08:35,970 --> 00:08:38,633 So far, this is what we have built. 154 154 00:08:39,911 --> 00:08:42,070 So it's simply the student constructor function 155 155 00:08:42,070 --> 00:08:44,260 and its prototype property. 156 156 00:08:44,260 --> 00:08:48,230 And then the mike object linked to its prototype. 157 157 00:08:48,230 --> 00:08:50,630 And that prototype is of course 158 158 00:08:50,630 --> 00:08:54,090 the constructor functions prototype property. 159 159 00:08:54,090 --> 00:08:57,410 Now this link between instance and prototype 160 160 00:08:57,410 --> 00:09:01,120 has been made automatically by creating the mike object 161 161 00:09:01,120 --> 00:09:02,990 with the new operator. 162 162 00:09:02,990 --> 00:09:05,890 So all of this is what we had already learned. 163 163 00:09:05,890 --> 00:09:08,420 So this is nothing new at this point 164 164 00:09:08,420 --> 00:09:09,680 Right? 165 165 00:09:09,680 --> 00:09:13,010 Now a student is also a person. 166 166 00:09:13,010 --> 00:09:18,010 And so we want student and person to be connected like this. 167 167 00:09:18,290 --> 00:09:20,660 So we really want the student class 168 168 00:09:20,660 --> 00:09:25,270 to be the child class and inherit from the person class, 169 169 00:09:25,270 --> 00:09:28,690 which will then function as the parent class. 170 170 00:09:28,690 --> 00:09:31,970 So this way, all instances of student 171 171 00:09:31,970 --> 00:09:34,680 could also get access to methods 172 172 00:09:34,680 --> 00:09:37,440 from the person's prototype property, 173 173 00:09:37,440 --> 00:09:41,670 like the calcAge method through the prototype chain. 174 174 00:09:41,670 --> 00:09:44,720 And that's the whole idea of inheritance. 175 175 00:09:44,720 --> 00:09:47,930 Its the child classes can share behavior 176 176 00:09:47,930 --> 00:09:50,160 from their parent classes. 177 177 00:09:50,160 --> 00:09:54,480 So looking at this diagram, basically what we want to do 178 178 00:09:54,480 --> 00:09:57,040 is to make person dot prototype, 179 179 00:09:57,040 --> 00:10:00,436 the prototype of student dot prototype. 180 180 00:10:00,436 --> 00:10:02,170 Or in other words, 181 181 00:10:02,170 --> 00:10:05,310 we want to set the underscore protal property 182 182 00:10:05,310 --> 00:10:09,487 of student dot prototype to person dot prototype. 183 183 00:10:09,487 --> 00:10:11,960 And if this sounds confusing, 184 184 00:10:11,960 --> 00:10:14,990 then please just pause the video here for a minute 185 185 00:10:14,990 --> 00:10:18,820 and keep looking at this diagram for some more time. 186 186 00:10:18,820 --> 00:10:21,220 So that's why I created it. 187 187 00:10:21,220 --> 00:10:22,200 Okay? 188 188 00:10:22,200 --> 00:10:23,390 Now, anyway, 189 189 00:10:23,390 --> 00:10:27,140 we are gonna have to create this connection manually. 190 190 00:10:27,140 --> 00:10:28,430 And to do this, 191 191 00:10:28,430 --> 00:10:31,410 so to link these two prototype objects, 192 192 00:10:31,410 --> 00:10:34,400 we are gonna use object dot create 193 193 00:10:34,400 --> 00:10:36,880 because defining prototypes manually 194 194 00:10:36,880 --> 00:10:40,560 is exactly what object dot create does. 195 195 00:10:40,560 --> 00:10:41,393 Great. 196 196 00:10:41,393 --> 00:10:43,153 So let's go do that. 197 197 00:10:44,890 --> 00:10:48,370 So let's do what I just showed you on the slide 198 198 00:10:48,370 --> 00:10:50,150 here in our code. 199 199 00:10:50,150 --> 00:10:53,524 And it's important that you do this at exactly 200 200 00:10:53,524 --> 00:10:54,780 this point of the code. 201 201 00:10:54,780 --> 00:10:55,940 Okay? 202 202 00:10:55,940 --> 00:10:58,443 And I will tell you later why that is. 203 203 00:10:59,840 --> 00:11:03,993 So anyway, student dot prototype, 204 204 00:11:04,840 --> 00:11:09,223 should be object dot create, 205 205 00:11:11,410 --> 00:11:14,083 person dot prototype. 206 206 00:11:15,230 --> 00:11:16,230 And with this, 207 207 00:11:16,230 --> 00:11:20,212 the student dot prototype object is now an object that 208 208 00:11:20,212 --> 00:11:23,860 inherits from person dot prototype. 209 209 00:11:23,860 --> 00:11:27,100 Now we have to create this connection here 210 210 00:11:27,100 --> 00:11:29,470 before we add any more methods 211 211 00:11:29,470 --> 00:11:33,040 to the prototype object of student. 212 212 00:11:33,040 --> 00:11:35,120 And that's because object dot create, 213 213 00:11:35,120 --> 00:11:37,490 will return an empty object. 214 214 00:11:37,490 --> 00:11:41,950 And so at this point, student dot prototype is empty. 215 215 00:11:41,950 --> 00:11:44,680 And so then onto that empty object, 216 216 00:11:44,680 --> 00:11:47,660 we can add methods like this one. 217 217 00:11:47,660 --> 00:11:49,520 But if we did it the other way around 218 218 00:11:51,107 --> 00:11:53,890 so if this was after we created this method here, 219 219 00:11:53,890 --> 00:11:55,670 then object dot create 220 220 00:11:55,670 --> 00:11:58,023 would basically overwrite these methods 221 221 00:11:58,023 --> 00:11:59,730 that we had already added 222 222 00:11:59,730 --> 00:12:03,210 to the prototype object of student. 223 223 00:12:03,210 --> 00:12:05,910 Now you might be wondering why we even needed 224 224 00:12:07,207 --> 00:12:08,360 to use object dot create. 225 225 00:12:08,360 --> 00:12:11,363 So why didn't we just do this? 226 226 00:12:13,600 --> 00:12:18,600 So student dot prototype equals the person dot prototype, 227 227 00:12:22,820 --> 00:12:23,660 right? 228 228 00:12:23,660 --> 00:12:27,450 This many would have seen a little bit more logical to do, 229 229 00:12:27,450 --> 00:12:30,410 but in fact, this doesn't work at all. 230 230 00:12:30,410 --> 00:12:33,003 And let me actually show you why that is. 231 231 00:12:34,580 --> 00:12:37,190 So if we do student dot prototype 232 232 00:12:37,190 --> 00:12:39,860 equal to person dot prototype, 233 233 00:12:39,860 --> 00:12:44,490 then we will not end up with a prototype chain that we need. 234 234 00:12:44,490 --> 00:12:47,480 Instead, we would end up with this, 235 235 00:12:47,480 --> 00:12:50,724 which is a completely wrong prototype chain. 236 236 00:12:50,724 --> 00:12:53,840 And that's because here we're actually saying 237 237 00:12:53,840 --> 00:12:56,240 that the student's prototype property 238 238 00:12:56,240 --> 00:12:58,185 and a person's prototype property 239 239 00:12:58,185 --> 00:13:01,360 should be the exact same object. 240 240 00:13:01,360 --> 00:13:05,090 But in fact that's just not what we want. 241 241 00:13:05,090 --> 00:13:08,350 What we do want is the person's prototype object 242 242 00:13:08,350 --> 00:13:12,700 to be the prototype of student dot prototype. 243 243 00:13:12,700 --> 00:13:15,150 So we want to inherit from it, 244 244 00:13:15,150 --> 00:13:18,700 but it should not be the exact same object. 245 245 00:13:18,700 --> 00:13:22,631 And that's why we actually needed object dot create. 246 246 00:13:22,631 --> 00:13:24,254 Alright, 247 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 248 00:13:29,670 --> 00:13:33,130 linking prototypes. 249 249 00:13:33,130 --> 00:13:35,850 And so now with all of this in place, 250 250 00:13:35,850 --> 00:13:36,683 we should be able 251 251 00:13:36,683 --> 00:13:39,884 to do mike dot calcAge, 252 252 00:13:39,884 --> 00:13:44,360 and indeed we get the age of 17. 253 253 00:13:44,360 --> 00:13:45,460 Beautiful. 254 254 00:13:45,460 --> 00:13:47,640 So this worked just fine. 255 255 00:13:47,640 --> 00:13:50,170 And so let's actually now go analyze 256 256 00:13:50,170 --> 00:13:51,883 what exactly happened here. 257 257 00:13:53,450 --> 00:13:55,720 And we already know that this worked 258 258 00:13:55,720 --> 00:13:58,100 because of the prototype chain, 259 259 00:13:58,100 --> 00:14:00,570 but let's see exactly how. 260 260 00:14:00,570 --> 00:14:03,600 So when we do mike dot calcAge, 261 261 00:14:03,600 --> 00:14:08,180 we are effectively doing a property or a method lookup. 262 262 00:14:08,180 --> 00:14:09,550 So that is JavaScript 263 263 00:14:09,550 --> 00:14:13,650 trying to find the requested property or method. 264 264 00:14:13,650 --> 00:14:15,750 Now, in this case, as we know, 265 265 00:14:15,750 --> 00:14:17,990 the calcAge method is of course 266 266 00:14:17,990 --> 00:14:20,970 not directly on the mike object. 267 267 00:14:20,970 --> 00:14:24,320 It's also not in mike's prototype. 268 268 00:14:24,320 --> 00:14:27,330 That's where we defined the introduced method, 269 269 00:14:27,330 --> 00:14:29,250 but not calcAge. 270 270 00:14:29,250 --> 00:14:30,350 Right? 271 271 00:14:30,350 --> 00:14:31,990 So just like before, 272 272 00:14:31,990 --> 00:14:34,710 whenever we try to access a method, 273 273 00:14:34,710 --> 00:14:37,400 that's not on the object's prototype, 274 274 00:14:37,400 --> 00:14:40,330 then JavaScript, will look up even further 275 275 00:14:40,330 --> 00:14:44,270 in the prototype chain and see if it can find a method 276 276 00:14:44,270 --> 00:14:46,460 so in the parent prototype. 277 277 00:14:46,460 --> 00:14:48,960 And that's exactly what happens here. 278 278 00:14:48,960 --> 00:14:52,077 So JavaScript will finally find the calcAge 279 279 00:14:52,077 --> 00:14:54,380 in person dot prototype, 280 280 00:14:54,380 --> 00:14:57,420 which is exactly where we defined it. 281 281 00:14:57,420 --> 00:14:58,820 And that's the whole reason 282 282 00:14:58,820 --> 00:15:02,150 why we set up the prototype chain like this 283 283 00:15:02,150 --> 00:15:05,790 so that the mike object can inherit whatever methods 284 284 00:15:05,790 --> 00:15:09,110 are in its parent class, basically. 285 285 00:15:09,110 --> 00:15:10,210 So in summary, 286 286 00:15:10,210 --> 00:15:12,770 we are now able to call a method 287 287 00:15:12,770 --> 00:15:15,530 that is on a person's prototype property, 288 288 00:15:15,530 --> 00:15:19,170 on a student object, and it still works. 289 289 00:15:19,170 --> 00:15:22,058 So that's the power of inheritance. 290 290 00:15:22,058 --> 00:15:23,620 Great. 291 291 00:15:23,620 --> 00:15:25,460 And since we're already here, 292 292 00:15:25,460 --> 00:15:28,890 let's also quickly complete the prototype chain. 293 293 00:15:28,890 --> 00:15:32,970 So just like before object dot prototype will sit on 294 294 00:15:34,046 --> 00:15:35,290 top of the prototype chain. 295 295 00:15:35,290 --> 00:15:38,170 So of course we could still call a method 296 296 00:15:38,170 --> 00:15:42,130 like the s on property method on mike too. 297 297 00:15:42,130 --> 00:15:44,050 It doesn't matter how far away 298 298 00:15:44,050 --> 00:15:46,940 in the prototype chain a method is. 299 299 00:15:46,940 --> 00:15:47,810 And with this, 300 300 00:15:47,810 --> 00:15:50,660 we now have the full picture of how inheritance 301 301 00:15:50,660 --> 00:15:54,540 between classes works with function constructors. 302 302 00:15:54,540 --> 00:15:56,990 And of course, with ES6 classes, 303 303 00:15:56,990 --> 00:15:59,730 it works exactly the same internally. 304 304 00:15:59,730 --> 00:16:02,410 All that changes is the syntax. 305 305 00:16:02,410 --> 00:16:04,980 So when we do the same thing in the next video 306 306 00:16:04,980 --> 00:16:07,920 using ES6 classes, then keep in mind 307 307 00:16:07,920 --> 00:16:10,803 that it's gonna work just like I described here. 308 308 00:16:12,590 --> 00:16:14,880 And so now just to finish this video, 309 309 00:16:14,880 --> 00:16:19,270 let's quickly inspect all of this also in the console, 310 310 00:16:19,270 --> 00:16:24,270 let's say mike dot underscore underscore proto. 311 311 00:16:27,580 --> 00:16:32,580 And so this is of course gonna to be, this object here, 312 312 00:16:33,565 --> 00:16:35,223 which contains the introduce method, 313 313 00:16:36,140 --> 00:16:37,540 all right? 314 314 00:16:37,540 --> 00:16:39,050 So this is nothing new, 315 315 00:16:39,050 --> 00:16:40,730 but you see here right in the console 316 316 00:16:40,730 --> 00:16:43,513 that this itself has a prototype too. 317 317 00:16:44,920 --> 00:16:47,039 So let's try this here, 318 318 00:16:47,039 --> 00:16:50,110 and so see the next prototype. 319 319 00:16:50,110 --> 00:16:54,240 And so now this is indeed the prototype, 320 320 00:16:54,240 --> 00:16:57,170 which contains the calcAge function. 321 321 00:16:57,170 --> 00:17:02,170 And so in fact that is exactly this object here. 322 322 00:17:04,880 --> 00:17:06,347 Right? 323 323 00:17:06,347 --> 00:17:09,220 And maybe it's even easier to visualize 324 324 00:17:09,220 --> 00:17:10,803 in the console like this. 325 325 00:17:11,710 --> 00:17:14,290 So taking a look at mike itself, 326 326 00:17:14,290 --> 00:17:19,290 and then mike's prototype is a person here, 327 327 00:17:19,800 --> 00:17:21,420 which is actually not correct 328 328 00:17:21,420 --> 00:17:23,203 and we will fix that in a second. 329 329 00:17:24,220 --> 00:17:26,360 So, I mean, In the prototype chain, 330 330 00:17:26,360 --> 00:17:29,623 everything is correct, but here it should say student, 331 331 00:17:31,070 --> 00:17:33,967 so you see that right now, it says person, 332 332 00:17:33,967 --> 00:17:37,233 but Mike is actually of the type student. 333 333 00:17:39,150 --> 00:17:40,050 Okay. 334 334 00:17:40,050 --> 00:17:43,000 But anyway, here you see the introduced method 335 335 00:17:43,000 --> 00:17:45,300 that we defined earlier. 336 336 00:17:45,300 --> 00:17:48,249 And then if we go even further into this, 337 337 00:17:48,249 --> 00:17:51,690 so not this one, 338 338 00:17:51,690 --> 00:17:56,690 but this one then you see, of course the calcAge function, 339 339 00:17:56,960 --> 00:18:01,000 which is in the prototype of the prototype basically. 340 340 00:18:01,000 --> 00:18:02,513 Right? 341 341 00:18:02,513 --> 00:18:07,513 So what I said that we need to fix is this. 342 342 00:18:08,490 --> 00:18:10,622 So when we take a look at 343 343 00:18:10,622 --> 00:18:15,622 student dot prototype dot constructor, 344 344 00:18:17,957 --> 00:18:21,890 then remember that ideally this should point back 345 345 00:18:21,890 --> 00:18:24,263 to the student, right? 346 346 00:18:25,230 --> 00:18:28,870 But here it points back, apparently to person. 347 347 00:18:28,870 --> 00:18:31,843 So actually we should use console dot dir 348 348 00:18:33,520 --> 00:18:36,470 And so you see that JavaScript now, thinks 349 349 00:18:36,470 --> 00:18:39,890 that the constructor of student or prototype 350 350 00:18:39,890 --> 00:18:41,453 is person here. 351 351 00:18:43,250 --> 00:18:44,840 And the reason for that is 352 352 00:18:44,840 --> 00:18:48,450 that we set the prototype property of the student 353 353 00:18:48,450 --> 00:18:50,650 using object dot create. 354 354 00:18:50,650 --> 00:18:52,360 And so this makes it so 355 355 00:18:52,360 --> 00:18:55,580 that the constructor of student dot prototype 356 356 00:18:55,580 --> 00:18:57,400 is still person. 357 357 00:18:57,400 --> 00:19:00,980 So we need to fix this because sometimes it's important 358 358 00:19:00,980 --> 00:19:04,040 to rely on this constructor property. 359 359 00:19:04,040 --> 00:19:06,414 And so if we want to rely on that, 360 360 00:19:06,414 --> 00:19:09,200 it should indeed be correct. 361 361 00:19:09,200 --> 00:19:11,230 But that's easy to fix. 362 362 00:19:11,230 --> 00:19:16,090 We can just say student dot prototype dot constructor 363 363 00:19:18,020 --> 00:19:20,233 and set it to student. 364 364 00:19:21,800 --> 00:19:25,090 but let me just try out some more things here. 365 365 00:19:25,090 --> 00:19:27,850 So just to make sure everything works 366 366 00:19:27,850 --> 00:19:31,963 so we can again use the instance of, operator here. 367 367 00:19:34,600 --> 00:19:36,940 And so this of course is gonna be true 368 368 00:19:36,940 --> 00:19:38,600 because student is of course 369 369 00:19:38,600 --> 00:19:41,540 the constructor function of mike. 370 370 00:19:41,540 --> 00:19:45,220 But if we try to same now with person 371 371 00:19:45,220 --> 00:19:49,020 then that indeed should be also true. 372 372 00:19:49,020 --> 00:19:50,740 And so, in fact it is. 373 373 00:19:50,740 --> 00:19:52,300 And so again, 374 374 00:19:52,300 --> 00:19:55,470 it's because we linked the prototypes together. 375 375 00:19:55,470 --> 00:19:57,700 So if we didn't have this, 376 376 00:19:57,700 --> 00:19:59,000 then this should be false. 377 377 00:20:00,560 --> 00:20:02,071 So of course, 378 378 00:20:02,071 --> 00:20:05,240 mike dot calcAge is not a function in this case 379 379 00:20:05,240 --> 00:20:08,680 because the prototype chain is now not correctly set up 380 380 00:20:08,680 --> 00:20:10,371 to find this method, 381 381 00:20:10,371 --> 00:20:12,977 but let's quickly take this out. 382 382 00:20:12,977 --> 00:20:17,633 And so now indeed mike is no longer an instance of person. 383 383 00:20:19,150 --> 00:20:19,983 And of course, 384 384 00:20:20,885 --> 00:20:24,040 mike is also an instance of object because this also 385 385 00:20:24,040 --> 00:20:26,070 in its prototype chain. 386 386 00:20:26,070 --> 00:20:27,040 Now, right. 387 387 00:20:27,040 --> 00:20:29,740 So here, we just proved that a prototype chain 388 388 00:20:31,117 --> 00:20:33,667 is in fact set up the way that we intended it to be 389 389 00:20:34,670 --> 00:20:35,640 all right. 390 390 00:20:35,640 --> 00:20:38,349 And that's the end of a very long, 391 391 00:20:38,349 --> 00:20:41,540 and I admit complex lecture. 392 392 00:20:41,540 --> 00:20:44,900 But I hope that I could still consolidate your knowledge 393 393 00:20:44,900 --> 00:20:48,371 about prototypes and the prototype chain even further 394 394 00:20:48,371 --> 00:20:51,740 because you know how to even manipulate 395 395 00:20:51,740 --> 00:20:55,040 the prototype chain yourself manually. 396 396 00:20:55,040 --> 00:20:57,290 And actually let's now go test, 397 397 00:20:57,290 --> 00:20:59,520 if you did actually understand 398 398 00:20:59,520 --> 00:21:01,433 right in the next coding challenge. 33765