1 00:00:01,320 --> 00:00:04,160 Let's now check out prototypal inheritance 2 00:00:04,160 --> 00:00:07,640 and the prototype chain on built in objects 3 00:00:07,640 --> 00:00:09,073 such as arrays. 4 00:00:10,830 --> 00:00:13,550 But actually let's start this lecture 5 00:00:13,550 --> 00:00:15,720 by inspecting some of the stuff 6 00:00:15,720 --> 00:00:19,040 that we just talked about in the last lecture. 7 00:00:19,040 --> 00:00:22,033 And we will keep using this person example 8 00:00:22,033 --> 00:00:23,493 that we have been building. 9 00:00:26,790 --> 00:00:31,663 So let's start by taking a look at Jonas._ _ proto 10 00:00:34,890 --> 00:00:38,300 And we already know that this is the prototype of Jonas 11 00:00:38,300 --> 00:00:42,710 which is exactly the prototype property of person. 12 00:00:42,710 --> 00:00:44,900 And so therefore it is this object 13 00:00:44,900 --> 00:00:49,870 which contains the Clock H-method that we defined earlier. 14 00:00:49,870 --> 00:00:52,970 So up here and also this property 15 00:00:52,970 --> 00:00:57,730 so this species property, but now let's actually move up 16 00:00:57,730 --> 00:01:01,350 in the prototype chain and essentially take a look 17 00:01:01,350 --> 00:01:05,460 at the prototype of Jonas's prototype. 18 00:01:05,460 --> 00:01:06,900 And do you remember 19 00:01:06,900 --> 00:01:09,723 from the last video, what that's gonna be? 20 00:01:10,900 --> 00:01:12,383 Well, let's see. 21 00:01:13,230 --> 00:01:17,523 And it is indeed the prototype property of object. 22 00:01:19,090 --> 00:01:20,690 So that's why you can see 23 00:01:20,690 --> 00:01:23,800 that constructor is the object here. 24 00:01:23,800 --> 00:01:26,580 And then right away, we see this method 25 00:01:26,580 --> 00:01:29,760 that we actually already studied in the last video. 26 00:01:29,760 --> 00:01:32,040 So this has own property. 27 00:01:32,040 --> 00:01:35,620 And so this is the reason why we can do this. 28 00:01:35,620 --> 00:01:38,320 So why we can call has own property 29 00:01:38,320 --> 00:01:42,423 on Jonas like we did here in one of the earlier videos. 30 00:01:44,310 --> 00:01:48,410 So again, we learned in the last lecture that this works 31 00:01:48,410 --> 00:01:50,720 because of the prototype chain 32 00:01:50,720 --> 00:01:52,100 and in particular, 33 00:01:52,100 --> 00:01:55,700 because this method here is in this prototype 34 00:01:55,700 --> 00:01:57,510 of Jonas's prototype. 35 00:01:57,510 --> 00:02:00,460 And so, yeah, that's this object 36 00:02:00,460 --> 00:02:02,683 that we are inspecting right now. 37 00:02:04,020 --> 00:02:04,853 All right. 38 00:02:06,570 --> 00:02:09,580 Okay, but let's take this one step further 39 00:02:09,580 --> 00:02:11,150 and check out the prototype 40 00:02:11,150 --> 00:02:12,647 of the prototype 41 00:02:12,647 --> 00:02:14,550 of the prototype. 42 00:02:14,550 --> 00:02:17,513 And do you remember what this one is? 43 00:02:18,600 --> 00:02:19,570 That's right. 44 00:02:19,570 --> 00:02:21,130 It is no. 45 00:02:21,130 --> 00:02:25,180 And so that's because object.prototype is usually the top 46 00:02:25,180 --> 00:02:27,110 of the scope chain. 47 00:02:27,110 --> 00:02:29,830 So this one here right? 48 00:02:29,830 --> 00:02:33,497 So this one is gonna be object.prototype. 49 00:02:36,440 --> 00:02:38,310 And so that's the top of 50 00:02:40,330 --> 00:02:42,380 the prototype chain. 51 00:02:42,380 --> 00:02:43,213 Okay. 52 00:02:44,060 --> 00:02:45,460 Now we can also take a look 53 00:02:45,460 --> 00:02:48,320 at that strange constructor property 54 00:02:48,320 --> 00:02:50,993 that we also saw earlier. 55 00:02:52,800 --> 00:02:57,070 So remember person.prototype itself 56 00:02:57,070 --> 00:02:59,600 has a constructor property 57 00:02:59,600 --> 00:03:04,250 which as we said, will point back to the person itself. 58 00:03:04,250 --> 00:03:07,453 So constructor, like this. 59 00:03:08,370 --> 00:03:12,260 And so here we actually get the function itself. 60 00:03:12,260 --> 00:03:15,000 Now, if we want to inspect that function here 61 00:03:15,000 --> 00:03:16,450 we need to use console.dir 62 00:03:18,780 --> 00:03:20,340 And so here, indeed 63 00:03:20,340 --> 00:03:24,803 we see that the constructor property points back at person. 64 00:03:25,640 --> 00:03:27,170 So that's this. 65 00:03:27,170 --> 00:03:30,010 Now to make things a bit more complicated even, 66 00:03:30,010 --> 00:03:33,763 let's now take a look at the prototype of a function. 67 00:03:34,700 --> 00:03:37,870 So any function of course is also an object. 68 00:03:37,870 --> 00:03:41,640 And so therefore it also has a prototype 69 00:03:41,640 --> 00:03:44,352 but maybe this is a bit too confusing. 70 00:03:44,352 --> 00:03:47,030 So let's just leave it here. 71 00:03:47,030 --> 00:03:50,710 So I will first show you the prototype of arrays 72 00:03:50,710 --> 00:03:54,780 and maybe then we can move a bit further to functions. 73 00:03:54,780 --> 00:03:57,070 So actually let's do that now. 74 00:03:57,070 --> 00:03:58,540 So let's create an array 75 00:04:01,470 --> 00:04:04,403 just like with any random numbers. 76 00:04:06,300 --> 00:04:08,653 So the values here don't matter at all. 77 00:04:09,620 --> 00:04:11,390 All I am interested in 78 00:04:11,390 --> 00:04:15,293 is now to take a look at the proto property. 79 00:04:16,980 --> 00:04:18,963 So the prototype of the array. 80 00:04:20,230 --> 00:04:21,900 So let's see. 81 00:04:21,900 --> 00:04:23,783 And here it is. 82 00:04:24,700 --> 00:04:27,460 So this is the prototype of array 83 00:04:28,410 --> 00:04:29,910 and you see that here 84 00:04:29,910 --> 00:04:33,500 we have all these methods that we already know. 85 00:04:33,500 --> 00:04:35,640 So we have fill, we have filter, 86 00:04:35,640 --> 00:04:40,260 find, find index and all of these methods that we studied 87 00:04:40,260 --> 00:04:42,590 in one of the earlier sections. 88 00:04:42,590 --> 00:04:46,260 And so this is the reason why all the arrays get access 89 00:04:46,260 --> 00:04:47,883 to all of these methods. 90 00:04:48,810 --> 00:04:50,010 So each array 91 00:04:50,010 --> 00:04:53,270 does of course not contain all of these methods 92 00:04:53,270 --> 00:04:57,150 but instead, each array will inherit these methods 93 00:04:57,150 --> 00:04:58,483 from its prototype. 94 00:04:59,500 --> 00:05:00,913 Am I right? 95 00:05:00,913 --> 00:05:02,770 And we can also check out 96 00:05:02,770 --> 00:05:05,550 that this prototype has got to be 97 00:05:05,550 --> 00:05:10,550 exactly array which is the constructor function.prototype. 98 00:05:12,550 --> 00:05:15,490 So one more time, the prototype property 99 00:05:15,490 --> 00:05:19,460 of the constructor is gonna be the prototype 100 00:05:19,460 --> 00:05:22,933 of all the objects created by that constructor. 101 00:05:24,110 --> 00:05:27,113 And so let's see, and it is true indeed. 102 00:05:28,140 --> 00:05:30,550 And just like an object 103 00:05:30,550 --> 00:05:34,210 using this shorthand, basically , 104 00:05:34,210 --> 00:05:37,033 is the same as using new array. 105 00:05:38,470 --> 00:05:41,000 And so therefore whenever we create an array 106 00:05:41,000 --> 00:05:46,000 like this, it is indeed created by the array constructor. 107 00:05:46,120 --> 00:05:49,520 And so that's why all of this works behind the scenes. 108 00:05:49,520 --> 00:05:52,560 But of course, this is not yet the end 109 00:05:52,560 --> 00:05:56,403 of the prototype chain as we saw in the last video. 110 00:05:59,120 --> 00:06:01,660 So let's see. 111 00:06:01,660 --> 00:06:05,233 And so now we are back to having object dot prototype. 112 00:06:06,362 --> 00:06:07,220 And you see. 113 00:06:07,220 --> 00:06:10,243 So this again now has on property 114 00:06:10,243 --> 00:06:11,610 and then all of these methods 115 00:06:11,610 --> 00:06:15,100 here that are available for objects. 116 00:06:15,100 --> 00:06:16,500 And one more time, 117 00:06:16,500 --> 00:06:19,440 that is simply because the prototype itself here 118 00:06:19,440 --> 00:06:20,850 is an object. 119 00:06:20,850 --> 00:06:25,450 And so any object has access to all of these methods. 120 00:06:25,450 --> 00:06:28,720 All right, now we would be able to 121 00:06:28,720 --> 00:06:32,623 see the exact same thing also directly in the console. 122 00:06:33,570 --> 00:06:36,740 So if I check out the array here 123 00:06:36,740 --> 00:06:39,310 and open it, then here in the bottom 124 00:06:39,310 --> 00:06:44,070 you will see that we have the prototype property right here. 125 00:06:44,070 --> 00:06:47,320 So if we click that, then here, one more time 126 00:06:47,320 --> 00:06:50,493 we get all these array methods that we already know. 127 00:06:51,410 --> 00:06:52,450 Okay. 128 00:06:52,450 --> 00:06:55,220 And if we check the documentation on MDN 129 00:06:56,730 --> 00:07:00,290 for example, for filter, then you see 130 00:07:00,290 --> 00:07:02,150 that actually the name 131 00:07:02,150 --> 00:07:07,110 of the method is array.prototype.filter. 132 00:07:07,110 --> 00:07:10,840 And that is because this filter method, does of course, 133 00:07:10,840 --> 00:07:15,093 live in the prototype property of the array constructor. 134 00:07:17,760 --> 00:07:20,180 So one more time you can see 135 00:07:20,180 --> 00:07:24,370 that the prototypal inheritance is really a mechanism 136 00:07:24,370 --> 00:07:26,350 for reusing code. 137 00:07:26,350 --> 00:07:28,570 So all of these built-in methods here 138 00:07:28,570 --> 00:07:32,850 have to exist only once somewhere in the JavaScript engine 139 00:07:32,850 --> 00:07:35,210 and then all the arrays in our code 140 00:07:35,210 --> 00:07:37,210 get access to the functions 141 00:07:37,210 --> 00:07:41,640 through the prototype chain and prototypal inheritance. 142 00:07:41,640 --> 00:07:42,930 Great. 143 00:07:42,930 --> 00:07:46,900 So let's actually take this one step further. 144 00:07:46,900 --> 00:07:48,430 So we know at this point, 145 00:07:48,430 --> 00:07:51,690 that any array inherits all their methods 146 00:07:51,690 --> 00:07:53,390 from it's a prototype. 147 00:07:53,390 --> 00:07:56,000 And therefore we can use that knowledge 148 00:07:56,000 --> 00:08:00,290 to extend the functionality of arrays even further. 149 00:08:00,290 --> 00:08:04,747 So all we would have to do is to say array.prototype. 150 00:08:06,090 --> 00:08:08,650 And then here we can add any new method 151 00:08:08,650 --> 00:08:13,140 to this prototype and all the arrays will then inherit it. 152 00:08:13,140 --> 00:08:16,130 So let's say that we wanted to create a method 153 00:08:16,130 --> 00:08:20,030 which returns all the unique elements of an array. 154 00:08:20,030 --> 00:08:23,223 So let's add a method called unique. 155 00:08:24,830 --> 00:08:28,730 So we set the unique property to a function 156 00:08:28,730 --> 00:08:31,900 and then to get the unique values of an array 157 00:08:31,900 --> 00:08:34,810 all we have to do is to create a new set 158 00:08:34,810 --> 00:08:37,320 and pass the array in there. 159 00:08:37,320 --> 00:08:39,710 And this keyboard is going to be the array 160 00:08:39,710 --> 00:08:42,940 on which this method will be called. 161 00:08:42,940 --> 00:08:45,370 And so now we just need to put this 162 00:08:45,370 --> 00:08:46,340 into an array 163 00:08:47,510 --> 00:08:49,720 and spread it like this, 164 00:08:49,720 --> 00:08:52,573 as we have already done multiple times before. 165 00:08:53,860 --> 00:08:58,540 And so we can now use that. 166 00:08:58,540 --> 00:09:01,953 So array.unique, 167 00:09:02,840 --> 00:09:05,340 and this should now return an array 168 00:09:05,340 --> 00:09:07,600 with only the unique values. 169 00:09:07,600 --> 00:09:10,060 While we don't have a lot of duplicates here 170 00:09:10,060 --> 00:09:14,830 let's add another six here and maybe another nine. 171 00:09:14,830 --> 00:09:16,280 And so let's see what happens 172 00:09:17,280 --> 00:09:19,243 and indeed that worked. 173 00:09:20,410 --> 00:09:22,010 Beautiful. 174 00:09:22,010 --> 00:09:24,920 So just to recap, we added a new method 175 00:09:24,920 --> 00:09:28,730 to the prototype property of the array constructor. 176 00:09:28,730 --> 00:09:33,500 And so therefore now all arrays will inherit this method. 177 00:09:33,500 --> 00:09:35,650 And so we can then call that method 178 00:09:35,650 --> 00:09:37,483 on any array that we want. 179 00:09:39,050 --> 00:09:41,590 However, what we just did here. 180 00:09:41,590 --> 00:09:43,480 So extending the prototype 181 00:09:43,480 --> 00:09:48,040 of a built-in object is generally not a good idea. 182 00:09:48,040 --> 00:09:52,130 I mean if you're working just on a small project on your own 183 00:09:52,130 --> 00:09:54,370 then I guess you could do this, 184 00:09:54,370 --> 00:09:57,310 but really don't get into the habit of doing this 185 00:09:57,310 --> 00:09:59,210 for multiple reasons. 186 00:09:59,210 --> 00:10:02,550 The first reason is that the next version of JavaScript 187 00:10:02,550 --> 00:10:05,240 might add a method with the same name 188 00:10:05,240 --> 00:10:08,143 that we are adding, for example this one here, 189 00:10:09,170 --> 00:10:11,680 but it might work in a different way. 190 00:10:11,680 --> 00:10:14,970 And so your code will then use that new method 191 00:10:14,970 --> 00:10:17,310 which, remember, works differently. 192 00:10:17,310 --> 00:10:20,830 And then that will probably break your code. 193 00:10:20,830 --> 00:10:23,450 And the second reason why you shouldn't do this 194 00:10:23,450 --> 00:10:26,430 is because when you work on a team of developers, 195 00:10:26,430 --> 00:10:29,350 then this is really gonna be a bad idea 196 00:10:29,350 --> 00:10:32,550 because if multiple developers implement the same method 197 00:10:32,550 --> 00:10:33,920 with a different name 198 00:10:33,920 --> 00:10:36,970 then that's just going to create so many bugs 199 00:10:36,970 --> 00:10:40,300 that it's just not worth doing this. 200 00:10:40,300 --> 00:10:43,650 So it's just a nice and fun experiment 201 00:10:43,650 --> 00:10:46,493 but in practice, you should probably not do it. 202 00:10:47,430 --> 00:10:51,260 Now for a little bit of fun to finish this video. 203 00:10:51,260 --> 00:10:52,240 Let's take a look 204 00:10:52,240 --> 00:10:55,950 at some more built-in objects here in the console. 205 00:10:55,950 --> 00:10:59,523 So for example, we can select this DOM element here. 206 00:11:00,570 --> 00:11:02,550 And so let's do that. 207 00:11:02,550 --> 00:11:03,543 This H1. 208 00:11:04,730 --> 00:11:06,887 So that's document.querySelector 209 00:11:09,073 --> 00:11:10,077 H1, 210 00:11:10,077 --> 00:11:13,410 and we already know that all the DOM elements 211 00:11:13,410 --> 00:11:16,450 are behind the scenes objects. 212 00:11:16,450 --> 00:11:19,333 And so let's take a look at this object. 213 00:11:20,330 --> 00:11:22,273 Well, that doesn't really work. 214 00:11:23,470 --> 00:11:25,620 So that just gives us the object. 215 00:11:25,620 --> 00:11:28,330 So let's try a console.dir 216 00:11:30,810 --> 00:11:31,803 on this H1. 217 00:11:33,650 --> 00:11:36,710 And so now we get the actual object. 218 00:11:36,710 --> 00:11:39,570 So here we have all this different stuff 219 00:11:39,570 --> 00:11:41,930 and all these properties 220 00:11:41,930 --> 00:11:44,570 and methods that we already worked with. 221 00:11:44,570 --> 00:11:49,130 But what I'm interested in here is the prototype 222 00:11:49,130 --> 00:11:53,203 and you see that the prototype is an HTML heading element. 223 00:11:55,180 --> 00:11:56,013 All right? 224 00:11:56,013 --> 00:11:59,330 And so that itself will contain a lot of different stuff, 225 00:11:59,330 --> 00:12:01,070 one more time. 226 00:12:01,070 --> 00:12:03,310 So let's scroll all the way down. 227 00:12:03,310 --> 00:12:06,850 And so this is now an HTML element. 228 00:12:06,850 --> 00:12:10,700 And do you remember these names here from somewhere? 229 00:12:10,700 --> 00:12:13,540 Well, these are exactly the types of objects 230 00:12:13,540 --> 00:12:16,990 that we talked about in one of the first lectures 231 00:12:16,990 --> 00:12:18,390 in the DOM section. 232 00:12:18,390 --> 00:12:19,560 Remember that? 233 00:12:19,560 --> 00:12:21,250 So we had this big diagram 234 00:12:21,250 --> 00:12:23,980 with all these different types of elements. 235 00:12:23,980 --> 00:12:26,920 And so now here we can actually inspect them. 236 00:12:26,920 --> 00:12:28,500 And so behind the scenes 237 00:12:28,500 --> 00:12:31,580 these different elements are really different 238 00:12:31,580 --> 00:12:33,790 like constructor functions. 239 00:12:33,790 --> 00:12:35,180 So if we go down here 240 00:12:35,180 --> 00:12:36,710 we should now see element 241 00:12:38,640 --> 00:12:40,850 and indeed, here it is. 242 00:12:40,850 --> 00:12:42,340 And so again, 243 00:12:42,340 --> 00:12:45,880 you can recall that diagram that we inspected there. 244 00:12:45,880 --> 00:12:47,350 And then you will remember 245 00:12:47,350 --> 00:12:52,010 that HTML element was a child element of element 246 00:12:52,010 --> 00:12:56,100 and element itself was a child of node, right? 247 00:12:56,100 --> 00:12:58,420 And so therefore the prototype of element 248 00:12:58,420 --> 00:12:59,653 is gonna be node. 249 00:13:00,690 --> 00:13:02,890 So if we scroll all the way down here 250 00:13:02,890 --> 00:13:07,890 then you see indeed node, and now this one is event target. 251 00:13:08,210 --> 00:13:12,380 And so you'll see, this is a huge, huge prototype chain. 252 00:13:12,380 --> 00:13:15,370 And only now we are at the end. 253 00:13:15,370 --> 00:13:17,280 And so the end is an object 254 00:13:18,740 --> 00:13:20,310 and that's it. 255 00:13:20,310 --> 00:13:24,323 So this prototype chain has easily six or seven levels. 256 00:13:25,508 --> 00:13:28,763 And so you see that it can go really, really deep. 257 00:13:29,600 --> 00:13:33,630 So if you want to go and check this out by yourself 258 00:13:33,630 --> 00:13:36,733 then that would probably be a really nice exercise. 259 00:13:37,880 --> 00:13:40,820 And finally, let's just also 260 00:13:40,820 --> 00:13:44,113 console.dir some random function. 261 00:13:46,150 --> 00:13:47,770 So the function doesn't matter. 262 00:13:47,770 --> 00:13:50,443 I just want to be able to look at the function. 263 00:13:51,910 --> 00:13:52,890 Okay. 264 00:13:52,890 --> 00:13:55,550 And so, as I mentioned a bit earlier in this video 265 00:13:55,550 --> 00:13:58,410 the function itself is also an object. 266 00:13:58,410 --> 00:14:01,970 And so therefore it also has a prototype. 267 00:14:01,970 --> 00:14:05,750 And in this case to prototype will then contain the methods 268 00:14:05,750 --> 00:14:08,670 that we have used previously on functions. 269 00:14:08,670 --> 00:14:13,670 So that's apply, bind and call, remember. 270 00:14:14,150 --> 00:14:15,640 And so once again 271 00:14:15,640 --> 00:14:17,860 this is the reason why we can actually 272 00:14:17,860 --> 00:14:20,270 call methods on functions. 273 00:14:20,270 --> 00:14:24,400 It's because they are objects and objects have prototypes. 274 00:14:24,400 --> 00:14:27,243 And in this case, this function prototype. 275 00:14:28,670 --> 00:14:30,940 So you can spend a lot more time 276 00:14:30,940 --> 00:14:34,110 if you're really interested in exploring all of this. 277 00:14:34,110 --> 00:14:36,800 But once you think you have a good understanding 278 00:14:36,800 --> 00:14:38,740 of all the previous lectures 279 00:14:38,740 --> 00:14:40,870 then you can move on to the next video 280 00:14:40,870 --> 00:14:43,320 which is gonna be the first coding challenge 281 00:14:43,320 --> 00:14:44,483 of this section.