WEBVTT 1 00:00:00.870 --> 00:00:03.680 Let's now consolidate the knowledge 2 00:00:03.680 --> 00:00:06.600 that we got over the last two videos 3 00:00:06.600 --> 00:00:10.279 in a nice diagram that brings everything together 4 00:00:10.279 --> 00:00:11.883 that we know so far. 5 00:00:13.860 --> 00:00:15.290 And everything starts 6 00:00:15.290 --> 00:00:17.536 with the person the constructor function 7 00:00:17.536 --> 00:00:19.830 that we've been developing. 8 00:00:19.830 --> 00:00:23.900 Now, this constructor function has a prototype property 9 00:00:23.900 --> 00:00:25.610 which is an object 10 00:00:25.610 --> 00:00:27.580 and inside that object, 11 00:00:27.580 --> 00:00:30.610 we defined the calcAge method 12 00:00:30.610 --> 00:00:33.190 and person dot prototype itself 13 00:00:33.190 --> 00:00:37.060 actually also has a reference back to person 14 00:00:37.060 --> 00:00:40.100 which is the constructor property. 15 00:00:40.100 --> 00:00:44.350 So, essentially person dot prototype dot constructor 16 00:00:44.350 --> 00:00:47.580 is gonna point back to person itself. 17 00:00:47.580 --> 00:00:50.550 Now remember, person dot prototype 18 00:00:50.550 --> 00:00:54.150 is actually not the prototype of person 19 00:00:54.150 --> 00:00:57.060 but of all the objects that are created 20 00:00:57.060 --> 00:00:59.330 through the person function 21 00:00:59.330 --> 00:01:02.230 and speaking of the created objects 22 00:01:02.230 --> 00:01:05.800 let's now actually analyze how an object is created 23 00:01:05.800 --> 00:01:10.330 using the new operator and the constructor function. 24 00:01:10.330 --> 00:01:12.490 So, when we call a function, 25 00:01:12.490 --> 00:01:15.340 any function with the new operator 26 00:01:15.340 --> 00:01:17.810 the first thing that is gonna happen 27 00:01:17.810 --> 00:01:21.443 is that a new empty object is created instantly. 28 00:01:22.320 --> 00:01:25.470 Then the this keyboard and the function call 29 00:01:25.470 --> 00:01:28.790 is set to the newly created object. 30 00:01:28.790 --> 00:01:32.070 So, inside the function's execution context 31 00:01:32.070 --> 00:01:35.510 this is now the new empty object 32 00:01:35.510 --> 00:01:37.860 and that's why in the functions code 33 00:01:37.860 --> 00:01:40.670 we set the name and birth year properties 34 00:01:40.670 --> 00:01:42.250 on the this keyword 35 00:01:42.250 --> 00:01:47.250 because doing so will ultimately set them on the new object. 36 00:01:47.500 --> 00:01:50.780 So next comes the magical step. 37 00:01:50.780 --> 00:01:53.280 So now the new object is linked 38 00:01:53.280 --> 00:01:57.170 to the constructor functions prototype property. 39 00:01:57.170 --> 00:02:00.540 So in this case, person dot prototype. 40 00:02:00.540 --> 00:02:02.260 And this happens internally 41 00:02:02.260 --> 00:02:05.860 by adding the underscore, underscore protal property 42 00:02:05.860 --> 00:02:08.120 to the new object. 43 00:02:08.120 --> 00:02:12.740 So, person dot prototype is now the new objects prototype 44 00:02:12.740 --> 00:02:15.910 which is denoted in the underscore, underscore 45 00:02:15.910 --> 00:02:18.770 proto property of Jonas. 46 00:02:18.770 --> 00:02:22.020 So again, underscore proto always points 47 00:02:22.020 --> 00:02:23.590 to an object prototype 48 00:02:23.590 --> 00:02:28.390 and that is true for all objects in JavaScript. 49 00:02:28.390 --> 00:02:29.223 Great. 50 00:02:29.223 --> 00:02:32.890 And finally the new object is automatically returned 51 00:02:32.890 --> 00:02:34.750 from the function unless 52 00:02:34.750 --> 00:02:37.910 we explicitly return something else. 53 00:02:37.910 --> 00:02:41.030 But in a constructor function like person 54 00:02:41.030 --> 00:02:42.963 we usually never do that. 55 00:02:43.830 --> 00:02:47.800 Okay, and with this the result of the new operator 56 00:02:47.800 --> 00:02:50.140 and the person constructor function 57 00:02:50.140 --> 00:02:54.240 is a new object that we just created programmatically 58 00:02:54.240 --> 00:02:58.290 and that is now stored in the Jonas variable 59 00:02:58.290 --> 00:03:00.950 and this whole process that I just explained 60 00:03:00.950 --> 00:03:03.780 is how it works with function constructors 61 00:03:03.780 --> 00:03:06.620 and also with ES6 classes 62 00:03:06.620 --> 00:03:10.070 but not with the object dot create syntax 63 00:03:10.070 --> 00:03:12.070 that we're gonna use later. 64 00:03:12.070 --> 00:03:13.670 So just keep this in mind 65 00:03:13.670 --> 00:03:17.590 once we read the object dot create lectures. 66 00:03:17.590 --> 00:03:21.070 But anyway, why does this work this way 67 00:03:21.070 --> 00:03:24.910 and why is this technique so powerful and useful? 68 00:03:24.910 --> 00:03:29.073 and to answer that let's move on to the next line of code. 69 00:03:30.000 --> 00:03:34.050 So, here we are attempting to call the calcAge function 70 00:03:34.050 --> 00:03:35.483 on the jonas object. 71 00:03:36.320 --> 00:03:39.680 However, JavaScript can actually not find 72 00:03:39.680 --> 00:03:44.620 the calcAge function directly in the jonas object, right? 73 00:03:44.620 --> 00:03:47.010 It is simply not there 74 00:03:47.010 --> 00:03:51.090 and we already observed this behavior in the last lecture. 75 00:03:51.090 --> 00:03:51.943 Remember that? 76 00:03:52.830 --> 00:03:56.190 So, what happens now in this situation? 77 00:03:56.190 --> 00:03:59.950 Well, if a property or a method cannot be found 78 00:03:59.950 --> 00:04:04.720 in a certain object JavaScript will look into its prototype 79 00:04:04.720 --> 00:04:06.900 and there it is. 80 00:04:06.900 --> 00:04:10.970 So there is the calcAge function that we were looking for 81 00:04:10.970 --> 00:04:14.280 and so JavaScript will simply use this one. 82 00:04:14.280 --> 00:04:17.700 That's how the calcAge function can run correctly 83 00:04:17.700 --> 00:04:20.120 and return a result. 84 00:04:20.120 --> 00:04:22.690 And the behavior that we just described 85 00:04:22.690 --> 00:04:25.910 is what we already called prototypal inheritance 86 00:04:25.910 --> 00:04:27.460 or delegation. 87 00:04:27.460 --> 00:04:31.240 So the jonas object inherited the calcAge method 88 00:04:31.240 --> 00:04:33.400 from its prototype 89 00:04:33.400 --> 00:04:37.740 or in other words it delegated the calcAge functionality 90 00:04:37.740 --> 00:04:40.140 to its prototype. 91 00:04:40.140 --> 00:04:41.660 Now, the beauty of this 92 00:04:41.660 --> 00:04:46.220 is that we can create as many person objects as we like 93 00:04:46.220 --> 00:04:50.320 and all of them will then inherit this method. 94 00:04:50.320 --> 00:04:54.960 So we can call this calcAge method on all the person objects 95 00:04:54.960 --> 00:04:57.630 without the method being directly attached 96 00:04:57.630 --> 00:05:00.320 to all the objects themselves 97 00:05:00.320 --> 00:05:03.980 and this is essential for code performance. 98 00:05:03.980 --> 00:05:08.020 Just imagine that we had a 1,000 objects in the code 99 00:05:08.020 --> 00:05:11.230 and if all of them would have to carry the calcAge function 100 00:05:11.230 --> 00:05:15.450 around then that would certainly impact performance. 101 00:05:15.450 --> 00:05:19.400 So instead, they can all simply use the calcAge function 102 00:05:19.400 --> 00:05:22.900 from their common prototype, okay? 103 00:05:22.900 --> 00:05:24.823 So that makes sense, right? 104 00:05:25.810 --> 00:05:30.050 Now the fact that Jonas is connected to a prototype 105 00:05:30.050 --> 00:05:33.630 and the ability of looking up methods and properties 106 00:05:33.630 --> 00:05:38.630 in a prototype is what we call the prototype chain. 107 00:05:38.800 --> 00:05:41.800 So the jonas object and it's prototype 108 00:05:41.800 --> 00:05:44.700 basically form a prototype chain 109 00:05:44.700 --> 00:05:49.700 but actually the prototype chain does not end here. 110 00:05:49.770 --> 00:05:53.250 So let's understand the prototype chain a bit better 111 00:05:53.250 --> 00:05:56.203 by zooming out and looking at the whole picture. 112 00:05:58.500 --> 00:06:01.700 So, here is the diagram that we already had 113 00:06:01.700 --> 00:06:04.010 with the person the function constructor 114 00:06:04.010 --> 00:06:06.290 and its prototype property 115 00:06:06.290 --> 00:06:09.410 and to jonas object linked to its prototype 116 00:06:09.410 --> 00:06:12.730 via the underscore proto property, 117 00:06:12.730 --> 00:06:15.000 so nothing new yet. 118 00:06:15.000 --> 00:06:19.190 But now let's remember that person dot prototype itself 119 00:06:19.190 --> 00:06:21.410 is also an object 120 00:06:21.410 --> 00:06:26.200 and all objects in JavaScript have a prototype, right? 121 00:06:26.200 --> 00:06:28.830 Therefore, person dot prototype itself 122 00:06:28.830 --> 00:06:31.700 must also have a prototype. 123 00:06:31.700 --> 00:06:35.020 And the prototype of person dot prototype 124 00:06:35.020 --> 00:06:37.583 is object dot prototype. 125 00:06:38.520 --> 00:06:40.030 Why is that? 126 00:06:40.030 --> 00:06:44.620 Well, person dot prototype is just a simple object 127 00:06:44.620 --> 00:06:46.770 which means that it has been built 128 00:06:46.770 --> 00:06:50.520 by the built in object constructor function 129 00:06:50.520 --> 00:06:52.380 and this is actually the function 130 00:06:52.380 --> 00:06:54.270 that is called behind the scenes 131 00:06:54.270 --> 00:06:57.170 whenever we create an object literal. 132 00:06:57.170 --> 00:07:01.320 So just an object simply with curly braces. 133 00:07:01.320 --> 00:07:03.710 So essentially the curly braces 134 00:07:03.710 --> 00:07:08.710 are just like a shortcut to writing new object, okay? 135 00:07:09.710 --> 00:07:11.910 But anyway, what matters here 136 00:07:11.910 --> 00:07:14.520 is that person dot prototype itself 137 00:07:14.520 --> 00:07:16.810 needs to have a prototype 138 00:07:16.810 --> 00:07:18.590 and since it has been created 139 00:07:18.590 --> 00:07:21.300 by the object constructor function 140 00:07:21.300 --> 00:07:25.890 its prototype is gonna be object dot prototype. 141 00:07:25.890 --> 00:07:29.600 It's the same logic as with the jonas object. 142 00:07:29.600 --> 00:07:33.010 So, since jonas has been built by a person, 143 00:07:33.010 --> 00:07:38.010 person dot prototype is the prototype of Jonas, all right? 144 00:07:38.150 --> 00:07:40.460 Now this entire series of links 145 00:07:40.460 --> 00:07:45.240 between the objects is what is called the prototype chain 146 00:07:45.240 --> 00:07:48.650 and object dot prototype is usually the top 147 00:07:48.650 --> 00:07:50.400 of the prototype chain 148 00:07:50.400 --> 00:07:54.010 which means that it's prototype is null. 149 00:07:54.010 --> 00:07:58.690 So it's underscore proto property will simply point to null 150 00:07:58.690 --> 00:08:01.863 which then marks the end of the prototype chain. 151 00:08:02.790 --> 00:08:05.590 So in a certain way the prototype chain 152 00:08:05.590 --> 00:08:10.590 is very similar to the scope chain but with prototypes. 153 00:08:10.660 --> 00:08:12.120 So, in the scope chain 154 00:08:12.120 --> 00:08:15.460 whenever JavaScript can find a certain variable 155 00:08:15.460 --> 00:08:16.970 in a certain scope, 156 00:08:16.970 --> 00:08:20.660 it looks up into the next scope and a scope chain 157 00:08:20.660 --> 00:08:23.810 and tries to find the variable there. 158 00:08:23.810 --> 00:08:26.560 On the other hand in the prototype chain 159 00:08:26.560 --> 00:08:29.800 whenever JavaScript can find a certain property 160 00:08:29.800 --> 00:08:32.580 or method in a certain object 161 00:08:32.580 --> 00:08:35.530 it's gonna look up into the next prototype 162 00:08:35.530 --> 00:08:37.210 in the prototype chain 163 00:08:37.210 --> 00:08:41.200 and see if it can find it there, okay? 164 00:08:41.200 --> 00:08:44.930 So again the prototype chain is pretty similar 165 00:08:44.930 --> 00:08:46.270 to the scope chain 166 00:08:46.270 --> 00:08:48.360 but instead of working with scopes, 167 00:08:48.360 --> 00:08:53.083 it works with properties and methods in objects, all right? 168 00:08:53.930 --> 00:08:56.770 And now let's actually see another example 169 00:08:56.770 --> 00:08:58.620 of a method lookup. 170 00:08:58.620 --> 00:09:02.150 To do that we call the has own property method 171 00:09:02.150 --> 00:09:04.100 on the jonas object. 172 00:09:04.100 --> 00:09:06.620 So, just like in the previous slide, 173 00:09:06.620 --> 00:09:08.270 JavaScript is gonna start 174 00:09:08.270 --> 00:09:12.930 by trying to find the called method on the object itself. 175 00:09:12.930 --> 00:09:13.763 But of course 176 00:09:13.763 --> 00:09:18.300 it can't find the has own property method on Jonas. 177 00:09:18.300 --> 00:09:21.580 So, according to how the prototype chain works, 178 00:09:21.580 --> 00:09:24.260 it will then look into its prototype 179 00:09:24.260 --> 00:09:27.790 which is person dot prototype. 180 00:09:27.790 --> 00:09:31.220 Now, we didn't define any has own property method 181 00:09:31.220 --> 00:09:32.290 there either 182 00:09:32.290 --> 00:09:35.740 and so a JavaScript is not gonna find it there 183 00:09:35.740 --> 00:09:39.130 and so therefore it will move up even further 184 00:09:39.130 --> 00:09:40.890 in the prototype chain 185 00:09:40.890 --> 00:09:44.550 and now look into object dot prototype 186 00:09:44.550 --> 00:09:48.890 and object dot prototype does actually contain a bunch 187 00:09:48.890 --> 00:09:53.890 of built in methods and has own property is one of them. 188 00:09:54.090 --> 00:09:58.060 Great, so JavaScript can then take this one 189 00:09:58.060 --> 00:10:00.630 and run it on the jonas object 190 00:10:00.630 --> 00:10:05.410 as if has own property had been defined directly on Jonas. 191 00:10:05.410 --> 00:10:08.430 And remember the method has not been copied 192 00:10:08.430 --> 00:10:10.360 to the jonas object. 193 00:10:10.360 --> 00:10:13.140 Instead, it simply inherited the method 194 00:10:13.140 --> 00:10:17.143 from object dot prototype through the prototype chain. 195 00:10:17.980 --> 00:10:20.760 Okay, and that's actually it. 196 00:10:20.760 --> 00:10:23.970 That's all I have to tell you at this point. 197 00:10:23.970 --> 00:10:27.570 So this is in a nutshell the magic of prototypes 198 00:10:27.570 --> 00:10:29.520 and a prototype chain. 199 00:10:29.520 --> 00:10:32.490 And this will actually become even more interesting 200 00:10:32.490 --> 00:10:35.150 and useful once we add inheritance 201 00:10:35.150 --> 00:10:38.000 between two different kinds of objects 202 00:10:38.000 --> 00:10:40.960 or two different classes so to say. 203 00:10:40.960 --> 00:10:44.080 For example, having a student class inherit 204 00:10:44.080 --> 00:10:45.680 from a person class 205 00:10:45.680 --> 00:10:48.400 just like we learned in one of the four pillars 206 00:10:48.400 --> 00:10:51.350 of OOP, remember. 207 00:10:51.350 --> 00:10:54.290 So there is a lot of exciting stuff ahead 208 00:10:54.290 --> 00:10:55.773 and so let's move on.