Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:00,870 --> 00:00:03,680 Let's now consolidate the knowledge 2 2 00:00:03,680 --> 00:00:06,600 that we got over the last two videos 3 3 00:00:06,600 --> 00:00:10,279 in a nice diagram that brings everything together 4 4 00:00:10,279 --> 00:00:11,883 that we know so far. 5 5 00:00:13,860 --> 00:00:15,290 And everything starts 6 6 00:00:15,290 --> 00:00:17,536 with the person the constructor function 7 7 00:00:17,536 --> 00:00:19,830 that we've been developing. 8 8 00:00:19,830 --> 00:00:23,900 Now, this constructor function has a prototype property 9 9 00:00:23,900 --> 00:00:25,610 which is an object 10 10 00:00:25,610 --> 00:00:27,580 and inside that object, 11 11 00:00:27,580 --> 00:00:30,610 we defined the calcAge method 12 12 00:00:30,610 --> 00:00:33,190 and person dot prototype itself 13 13 00:00:33,190 --> 00:00:37,060 actually also has a reference back to person 14 14 00:00:37,060 --> 00:00:40,100 which is the constructor property. 15 15 00:00:40,100 --> 00:00:44,350 So, essentially person dot prototype dot constructor 16 16 00:00:44,350 --> 00:00:47,580 is gonna point back to person itself. 17 17 00:00:47,580 --> 00:00:50,550 Now remember, person dot prototype 18 18 00:00:50,550 --> 00:00:54,150 is actually not the prototype of person 19 19 00:00:54,150 --> 00:00:57,060 but of all the objects that are created 20 20 00:00:57,060 --> 00:00:59,330 through the person function 21 21 00:00:59,330 --> 00:01:02,230 and speaking of the created objects 22 22 00:01:02,230 --> 00:01:05,800 let's now actually analyze how an object is created 23 23 00:01:05,800 --> 00:01:10,330 using the new operator and the constructor function. 24 24 00:01:10,330 --> 00:01:12,490 So, when we call a function, 25 25 00:01:12,490 --> 00:01:15,340 any function with the new operator 26 26 00:01:15,340 --> 00:01:17,810 the first thing that is gonna happen 27 27 00:01:17,810 --> 00:01:21,443 is that a new empty object is created instantly. 28 28 00:01:22,320 --> 00:01:25,470 Then the this keyboard and the function call 29 29 00:01:25,470 --> 00:01:28,790 is set to the newly created object. 30 30 00:01:28,790 --> 00:01:32,070 So, inside the function's execution context 31 31 00:01:32,070 --> 00:01:35,510 this is now the new empty object 32 32 00:01:35,510 --> 00:01:37,860 and that's why in the functions code 33 33 00:01:37,860 --> 00:01:40,670 we set the name and birth year properties 34 34 00:01:40,670 --> 00:01:42,250 on the this keyword 35 35 00:01:42,250 --> 00:01:47,250 because doing so will ultimately set them on the new object. 36 36 00:01:47,500 --> 00:01:50,780 So next comes the magical step. 37 37 00:01:50,780 --> 00:01:53,280 So now the new object is linked 38 38 00:01:53,280 --> 00:01:57,170 to the constructor functions prototype property. 39 39 00:01:57,170 --> 00:02:00,540 So in this case, person dot prototype. 40 40 00:02:00,540 --> 00:02:02,260 And this happens internally 41 41 00:02:02,260 --> 00:02:05,860 by adding the underscore, underscore protal property 42 42 00:02:05,860 --> 00:02:08,120 to the new object. 43 43 00:02:08,120 --> 00:02:12,740 So, person dot prototype is now the new objects prototype 44 44 00:02:12,740 --> 00:02:15,910 which is denoted in the underscore, underscore 45 45 00:02:15,910 --> 00:02:18,770 proto property of Jonas. 46 46 00:02:18,770 --> 00:02:22,020 So again, underscore proto always points 47 47 00:02:22,020 --> 00:02:23,590 to an object prototype 48 48 00:02:23,590 --> 00:02:28,390 and that is true for all objects in JavaScript. 49 49 00:02:28,390 --> 00:02:29,223 Great. 50 50 00:02:29,223 --> 00:02:32,890 And finally the new object is automatically returned 51 51 00:02:32,890 --> 00:02:34,750 from the function unless 52 52 00:02:34,750 --> 00:02:37,910 we explicitly return something else. 53 53 00:02:37,910 --> 00:02:41,030 But in a constructor function like person 54 54 00:02:41,030 --> 00:02:42,963 we usually never do that. 55 55 00:02:43,830 --> 00:02:47,800 Okay, and with this the result of the new operator 56 56 00:02:47,800 --> 00:02:50,140 and the person constructor function 57 57 00:02:50,140 --> 00:02:54,240 is a new object that we just created programmatically 58 58 00:02:54,240 --> 00:02:58,290 and that is now stored in the Jonas variable 59 59 00:02:58,290 --> 00:03:00,950 and this whole process that I just explained 60 60 00:03:00,950 --> 00:03:03,780 is how it works with function constructors 61 61 00:03:03,780 --> 00:03:06,620 and also with ES6 classes 62 62 00:03:06,620 --> 00:03:10,070 but not with the object dot create syntax 63 63 00:03:10,070 --> 00:03:12,070 that we're gonna use later. 64 64 00:03:12,070 --> 00:03:13,670 So just keep this in mind 65 65 00:03:13,670 --> 00:03:17,590 once we read the object dot create lectures. 66 66 00:03:17,590 --> 00:03:21,070 But anyway, why does this work this way 67 67 00:03:21,070 --> 00:03:24,910 and why is this technique so powerful and useful? 68 68 00:03:24,910 --> 00:03:29,073 and to answer that let's move on to the next line of code. 69 69 00:03:30,000 --> 00:03:34,050 So, here we are attempting to call the calcAge function 70 70 00:03:34,050 --> 00:03:35,483 on the jonas object. 71 71 00:03:36,320 --> 00:03:39,680 However, JavaScript can actually not find 72 72 00:03:39,680 --> 00:03:44,620 the calcAge function directly in the jonas object, right? 73 73 00:03:44,620 --> 00:03:47,010 It is simply not there 74 74 00:03:47,010 --> 00:03:51,090 and we already observed this behavior in the last lecture. 75 75 00:03:51,090 --> 00:03:51,943 Remember that? 76 76 00:03:52,830 --> 00:03:56,190 So, what happens now in this situation? 77 77 00:03:56,190 --> 00:03:59,950 Well, if a property or a method cannot be found 78 78 00:03:59,950 --> 00:04:04,720 in a certain object JavaScript will look into its prototype 79 79 00:04:04,720 --> 00:04:06,900 and there it is. 80 80 00:04:06,900 --> 00:04:10,970 So there is the calcAge function that we were looking for 81 81 00:04:10,970 --> 00:04:14,280 and so JavaScript will simply use this one. 82 82 00:04:14,280 --> 00:04:17,700 That's how the calcAge function can run correctly 83 83 00:04:17,700 --> 00:04:20,120 and return a result. 84 84 00:04:20,120 --> 00:04:22,690 And the behavior that we just described 85 85 00:04:22,690 --> 00:04:25,910 is what we already called prototypal inheritance 86 86 00:04:25,910 --> 00:04:27,460 or delegation. 87 87 00:04:27,460 --> 00:04:31,240 So the jonas object inherited the calcAge method 88 88 00:04:31,240 --> 00:04:33,400 from its prototype 89 89 00:04:33,400 --> 00:04:37,740 or in other words it delegated the calcAge functionality 90 90 00:04:37,740 --> 00:04:40,140 to its prototype. 91 91 00:04:40,140 --> 00:04:41,660 Now, the beauty of this 92 92 00:04:41,660 --> 00:04:46,220 is that we can create as many person objects as we like 93 93 00:04:46,220 --> 00:04:50,320 and all of them will then inherit this method. 94 94 00:04:50,320 --> 00:04:54,960 So we can call this calcAge method on all the person objects 95 95 00:04:54,960 --> 00:04:57,630 without the method being directly attached 96 96 00:04:57,630 --> 00:05:00,320 to all the objects themselves 97 97 00:05:00,320 --> 00:05:03,980 and this is essential for code performance. 98 98 00:05:03,980 --> 00:05:08,020 Just imagine that we had a 1,000 objects in the code 99 99 00:05:08,020 --> 00:05:11,230 and if all of them would have to carry the calcAge function 100 100 00:05:11,230 --> 00:05:15,450 around then that would certainly impact performance. 101 101 00:05:15,450 --> 00:05:19,400 So instead, they can all simply use the calcAge function 102 102 00:05:19,400 --> 00:05:22,900 from their common prototype, okay? 103 103 00:05:22,900 --> 00:05:24,823 So that makes sense, right? 104 104 00:05:25,810 --> 00:05:30,050 Now the fact that Jonas is connected to a prototype 105 105 00:05:30,050 --> 00:05:33,630 and the ability of looking up methods and properties 106 106 00:05:33,630 --> 00:05:38,630 in a prototype is what we call the prototype chain. 107 107 00:05:38,800 --> 00:05:41,800 So the jonas object and it's prototype 108 108 00:05:41,800 --> 00:05:44,700 basically form a prototype chain 109 109 00:05:44,700 --> 00:05:49,700 but actually the prototype chain does not end here. 110 110 00:05:49,770 --> 00:05:53,250 So let's understand the prototype chain a bit better 111 111 00:05:53,250 --> 00:05:56,203 by zooming out and looking at the whole picture. 112 112 00:05:58,500 --> 00:06:01,700 So, here is the diagram that we already had 113 113 00:06:01,700 --> 00:06:04,010 with the person the function constructor 114 114 00:06:04,010 --> 00:06:06,290 and its prototype property 115 115 00:06:06,290 --> 00:06:09,410 and to jonas object linked to its prototype 116 116 00:06:09,410 --> 00:06:12,730 via the underscore proto property, 117 117 00:06:12,730 --> 00:06:15,000 so nothing new yet. 118 118 00:06:15,000 --> 00:06:19,190 But now let's remember that person dot prototype itself 119 119 00:06:19,190 --> 00:06:21,410 is also an object 120 120 00:06:21,410 --> 00:06:26,200 and all objects in JavaScript have a prototype, right? 121 121 00:06:26,200 --> 00:06:28,830 Therefore, person dot prototype itself 122 122 00:06:28,830 --> 00:06:31,700 must also have a prototype. 123 123 00:06:31,700 --> 00:06:35,020 And the prototype of person dot prototype 124 124 00:06:35,020 --> 00:06:37,583 is object dot prototype. 125 125 00:06:38,520 --> 00:06:40,030 Why is that? 126 126 00:06:40,030 --> 00:06:44,620 Well, person dot prototype is just a simple object 127 127 00:06:44,620 --> 00:06:46,770 which means that it has been built 128 128 00:06:46,770 --> 00:06:50,520 by the built in object constructor function 129 129 00:06:50,520 --> 00:06:52,380 and this is actually the function 130 130 00:06:52,380 --> 00:06:54,270 that is called behind the scenes 131 131 00:06:54,270 --> 00:06:57,170 whenever we create an object literal. 132 132 00:06:57,170 --> 00:07:01,320 So just an object simply with curly braces. 133 133 00:07:01,320 --> 00:07:03,710 So essentially the curly braces 134 134 00:07:03,710 --> 00:07:08,710 are just like a shortcut to writing new object, okay? 135 135 00:07:09,710 --> 00:07:11,910 But anyway, what matters here 136 136 00:07:11,910 --> 00:07:14,520 is that person dot prototype itself 137 137 00:07:14,520 --> 00:07:16,810 needs to have a prototype 138 138 00:07:16,810 --> 00:07:18,590 and since it has been created 139 139 00:07:18,590 --> 00:07:21,300 by the object constructor function 140 140 00:07:21,300 --> 00:07:25,890 its prototype is gonna be object dot prototype. 141 141 00:07:25,890 --> 00:07:29,600 It's the same logic as with the jonas object. 142 142 00:07:29,600 --> 00:07:33,010 So, since jonas has been built by a person, 143 143 00:07:33,010 --> 00:07:38,010 person dot prototype is the prototype of Jonas, all right? 144 144 00:07:38,150 --> 00:07:40,460 Now this entire series of links 145 145 00:07:40,460 --> 00:07:45,240 between the objects is what is called the prototype chain 146 146 00:07:45,240 --> 00:07:48,650 and object dot prototype is usually the top 147 147 00:07:48,650 --> 00:07:50,400 of the prototype chain 148 148 00:07:50,400 --> 00:07:54,010 which means that it's prototype is null. 149 149 00:07:54,010 --> 00:07:58,690 So it's underscore proto property will simply point to null 150 150 00:07:58,690 --> 00:08:01,863 which then marks the end of the prototype chain. 151 151 00:08:02,790 --> 00:08:05,590 So in a certain way the prototype chain 152 152 00:08:05,590 --> 00:08:10,590 is very similar to the scope chain but with prototypes. 153 153 00:08:10,660 --> 00:08:12,120 So, in the scope chain 154 154 00:08:12,120 --> 00:08:15,460 whenever JavaScript can find a certain variable 155 155 00:08:15,460 --> 00:08:16,970 in a certain scope, 156 156 00:08:16,970 --> 00:08:20,660 it looks up into the next scope and a scope chain 157 157 00:08:20,660 --> 00:08:23,810 and tries to find the variable there. 158 158 00:08:23,810 --> 00:08:26,560 On the other hand in the prototype chain 159 159 00:08:26,560 --> 00:08:29,800 whenever JavaScript can find a certain property 160 160 00:08:29,800 --> 00:08:32,580 or method in a certain object 161 161 00:08:32,580 --> 00:08:35,530 it's gonna look up into the next prototype 162 162 00:08:35,530 --> 00:08:37,210 in the prototype chain 163 163 00:08:37,210 --> 00:08:41,200 and see if it can find it there, okay? 164 164 00:08:41,200 --> 00:08:44,930 So again the prototype chain is pretty similar 165 165 00:08:44,930 --> 00:08:46,270 to the scope chain 166 166 00:08:46,270 --> 00:08:48,360 but instead of working with scopes, 167 167 00:08:48,360 --> 00:08:53,083 it works with properties and methods in objects, all right? 168 168 00:08:53,930 --> 00:08:56,770 And now let's actually see another example 169 169 00:08:56,770 --> 00:08:58,620 of a method lookup. 170 170 00:08:58,620 --> 00:09:02,150 To do that we call the has own property method 171 171 00:09:02,150 --> 00:09:04,100 on the jonas object. 172 172 00:09:04,100 --> 00:09:06,620 So, just like in the previous slide, 173 173 00:09:06,620 --> 00:09:08,270 JavaScript is gonna start 174 174 00:09:08,270 --> 00:09:12,930 by trying to find the called method on the object itself. 175 175 00:09:12,930 --> 00:09:13,763 But of course 176 176 00:09:13,763 --> 00:09:18,300 it can't find the has own property method on Jonas. 177 177 00:09:18,300 --> 00:09:21,580 So, according to how the prototype chain works, 178 178 00:09:21,580 --> 00:09:24,260 it will then look into its prototype 179 179 00:09:24,260 --> 00:09:27,790 which is person dot prototype. 180 180 00:09:27,790 --> 00:09:31,220 Now, we didn't define any has own property method 181 181 00:09:31,220 --> 00:09:32,290 there either 182 182 00:09:32,290 --> 00:09:35,740 and so a JavaScript is not gonna find it there 183 183 00:09:35,740 --> 00:09:39,130 and so therefore it will move up even further 184 184 00:09:39,130 --> 00:09:40,890 in the prototype chain 185 185 00:09:40,890 --> 00:09:44,550 and now look into object dot prototype 186 186 00:09:44,550 --> 00:09:48,890 and object dot prototype does actually contain a bunch 187 187 00:09:48,890 --> 00:09:53,890 of built in methods and has own property is one of them. 188 188 00:09:54,090 --> 00:09:58,060 Great, so JavaScript can then take this one 189 189 00:09:58,060 --> 00:10:00,630 and run it on the jonas object 190 190 00:10:00,630 --> 00:10:05,410 as if has own property had been defined directly on Jonas. 191 191 00:10:05,410 --> 00:10:08,430 And remember the method has not been copied 192 192 00:10:08,430 --> 00:10:10,360 to the jonas object. 193 193 00:10:10,360 --> 00:10:13,140 Instead, it simply inherited the method 194 194 00:10:13,140 --> 00:10:17,143 from object dot prototype through the prototype chain. 195 195 00:10:17,980 --> 00:10:20,760 Okay, and that's actually it. 196 196 00:10:20,760 --> 00:10:23,970 That's all I have to tell you at this point. 197 197 00:10:23,970 --> 00:10:27,570 So this is in a nutshell the magic of prototypes 198 198 00:10:27,570 --> 00:10:29,520 and a prototype chain. 199 199 00:10:29,520 --> 00:10:32,490 And this will actually become even more interesting 200 200 00:10:32,490 --> 00:10:35,150 and useful once we add inheritance 201 201 00:10:35,150 --> 00:10:38,000 between two different kinds of objects 202 202 00:10:38,000 --> 00:10:40,960 or two different classes so to say. 203 203 00:10:40,960 --> 00:10:44,080 For example, having a student class inherit 204 204 00:10:44,080 --> 00:10:45,680 from a person class 205 205 00:10:45,680 --> 00:10:48,400 just like we learned in one of the four pillars 206 206 00:10:48,400 --> 00:10:51,350 of OOP, remember. 207 207 00:10:51,350 --> 00:10:54,290 So there is a lot of exciting stuff ahead 208 208 00:10:54,290 --> 00:10:55,773 and so let's move on. 17940