WEBVTT 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.