1 00:00:01,280 --> 00:00:06,110 So we learned about constructor functions and ESX classes. 2 00:00:06,110 --> 00:00:08,380 But there is actually a third way 3 00:00:08,380 --> 00:00:12,440 of implementing prototypal inheritance or delegation, 4 00:00:12,440 --> 00:00:14,540 as we can also call it. 5 00:00:14,540 --> 00:00:16,540 And that third way is 6 00:00:16,540 --> 00:00:20,060 to use a function called Object.create, 7 00:00:20,060 --> 00:00:22,810 which works in a pretty different way 8 00:00:22,810 --> 00:00:25,793 than constructor functions and classes work. 9 00:00:27,770 --> 00:00:30,150 Now, with Object.create, 10 00:00:30,150 --> 00:00:34,200 there is still the idea of prototypal inheritance. 11 00:00:34,200 --> 00:00:38,240 However, there are no prototype properties involved. 12 00:00:38,240 --> 00:00:43,220 And also no constructor functions, and no new operator. 13 00:00:43,220 --> 00:00:46,870 So instead, we can use Object.create 14 00:00:46,870 --> 00:00:51,200 to essentially manually set the prototype of an object, 15 00:00:51,200 --> 00:00:54,450 to any other object that we want. 16 00:00:54,450 --> 00:00:59,240 Okay, so if we can set the prototype to any object, 17 00:00:59,240 --> 00:01:01,293 let's actually create an object 18 00:01:01,293 --> 00:01:05,710 that we want to be the prototype of all the person objects. 19 00:01:05,710 --> 00:01:09,030 So essentially, let's recreate the person class 20 00:01:09,030 --> 00:01:14,030 from earlier, so let's say, person, 21 00:01:14,740 --> 00:01:16,910 and I'm calling it person PersonProto, 22 00:01:16,910 --> 00:01:18,960 which stands for prototype. 23 00:01:18,960 --> 00:01:20,480 Because, again, 24 00:01:20,480 --> 00:01:23,720 this object is gonna be literally the prototype 25 00:01:23,720 --> 00:01:25,533 of all the person objects. 26 00:01:27,760 --> 00:01:32,090 And now, this is actually just a simple object literal. 27 00:01:32,090 --> 00:01:34,973 And so now, what should we actually put in here? 28 00:01:36,380 --> 00:01:39,130 We're gonna put exactly what we put before 29 00:01:39,130 --> 00:01:41,460 into the prototype property. 30 00:01:41,460 --> 00:01:44,413 And so that was the CalcAge method. 31 00:01:46,100 --> 00:01:49,790 So we did that, actually here first manually. 32 00:01:49,790 --> 00:01:54,510 So we added CalcAge to the prototype property of person. 33 00:01:54,510 --> 00:01:56,793 And then here, we also did that, 34 00:01:58,130 --> 00:02:00,700 but in a more implicit way. 35 00:02:00,700 --> 00:02:04,310 So JavaScript did that for us behind the scenes. 36 00:02:04,310 --> 00:02:06,780 But now let's take this function here. 37 00:02:06,780 --> 00:02:08,940 Or actually, we can take all of this, 38 00:02:08,940 --> 00:02:12,480 because we can also write methods in this way, 39 00:02:12,480 --> 00:02:13,993 in object literals. 40 00:02:15,160 --> 00:02:17,593 And so that's actually it. 41 00:02:18,970 --> 00:02:20,400 That's all the methods 42 00:02:20,400 --> 00:02:23,540 that we want the person objects to inherit. 43 00:02:23,540 --> 00:02:25,760 And so we put them in the prototype. 44 00:02:25,760 --> 00:02:27,193 And now all we need to do is 45 00:02:27,193 --> 00:02:29,780 to actually create a person object 46 00:02:29,780 --> 00:02:33,630 with this object here as the prototype. 47 00:02:33,630 --> 00:02:36,773 And for that, we can use Object.create. 48 00:02:38,130 --> 00:02:40,683 So let's create a person called Steven here. 49 00:02:42,620 --> 00:02:45,333 And so now, Object.create. 50 00:02:46,220 --> 00:02:49,040 And here we pass in the object that we want 51 00:02:49,040 --> 00:02:51,903 to be the prototype of the new object. 52 00:02:53,380 --> 00:02:56,793 So that's PersonProto. 53 00:02:57,770 --> 00:03:00,538 And so this will now return a brand new object, 54 00:03:00,538 --> 00:03:05,060 that is linked to the prototype that we passed in here. 55 00:03:05,060 --> 00:03:09,390 So Steven here is right now an empty object. 56 00:03:09,390 --> 00:03:13,190 And it will be linked to this PersonProto object, 57 00:03:13,190 --> 00:03:15,810 which will be its prototype. 58 00:03:15,810 --> 00:03:17,930 And we can actually already see 59 00:03:17,930 --> 00:03:19,323 that here in the console. 60 00:03:20,570 --> 00:03:23,820 So as I said, For now, it is empty. 61 00:03:23,820 --> 00:03:26,250 But we already have the prototype. 62 00:03:26,250 --> 00:03:28,603 And in there, we see we have CalcAge. 63 00:03:31,920 --> 00:03:35,860 But now we don't have any properties on the object yet. 64 00:03:35,860 --> 00:03:38,850 So let's quickly fix that. 65 00:03:38,850 --> 00:03:42,000 So Stephen.name. 66 00:03:42,000 --> 00:03:43,230 So I'm doing it here, 67 00:03:43,230 --> 00:03:47,323 just like I would do in any other object literal. 68 00:03:49,070 --> 00:03:51,743 And so this is not ideal, of course. 69 00:03:52,900 --> 00:03:55,700 But we're gonna fix that in a minute. 70 00:03:55,700 --> 00:03:59,470 Because of course, we want actually a programmatic way 71 00:03:59,470 --> 00:04:01,370 of creating new objects, 72 00:04:01,370 --> 00:04:03,723 instead of having to do it like this. 73 00:04:04,560 --> 00:04:05,570 But again, for now, 74 00:04:05,570 --> 00:04:08,390 we are just worried about the prototypes 75 00:04:08,390 --> 00:04:10,700 and the prototype chain here. 76 00:04:10,700 --> 00:04:14,890 So we should now be able to say Stephen.CalcAge, 77 00:04:17,850 --> 00:04:21,260 and, yeah, that worked. 78 00:04:21,260 --> 00:04:24,188 And so you see that we just like before, 79 00:04:24,188 --> 00:04:26,780 implemented prototypal inheritance, 80 00:04:26,780 --> 00:04:28,913 but in a completely different way. 81 00:04:29,940 --> 00:04:31,782 And now, just to make sure that we're all 82 00:04:31,782 --> 00:04:33,650 on the same page here, 83 00:04:33,650 --> 00:04:36,100 let's make sure that we really understand 84 00:04:36,100 --> 00:04:37,730 this big difference. 85 00:04:37,730 --> 00:04:40,080 And so let's take a look at a diagram 86 00:04:40,080 --> 00:04:42,223 of what's really going on here. 87 00:04:44,330 --> 00:04:45,960 So here at the right side, 88 00:04:45,960 --> 00:04:49,560 we have the way it works where de constructor functions, 89 00:04:49,560 --> 00:04:53,210 just as we have been doing it up until this point. 90 00:04:53,210 --> 00:04:55,350 So when we use the new operator 91 00:04:55,350 --> 00:04:58,180 in constructor functions or classes, 92 00:04:58,180 --> 00:05:00,800 it automatically sets the prototype 93 00:05:00,800 --> 00:05:03,430 of the instances to the constructors, 94 00:05:03,430 --> 00:05:04,803 prototype property. 95 00:05:06,350 --> 00:05:08,530 So this happens automatically. 96 00:05:08,530 --> 00:05:11,423 And so that's nothing new at this point for you. 97 00:05:12,260 --> 00:05:15,930 Now, on the other hand, with Object.create, 98 00:05:15,930 --> 00:05:19,410 we can set the prototype of objects manually 99 00:05:19,410 --> 00:05:21,920 to any object that we want. 100 00:05:21,920 --> 00:05:22,920 And in this case, 101 00:05:22,920 --> 00:05:24,760 we manually set the prototype 102 00:05:24,760 --> 00:05:29,280 of the Steven object to the person proto object. 103 00:05:29,280 --> 00:05:30,520 And that's it. 104 00:05:30,520 --> 00:05:31,780 Now the two objects 105 00:05:31,780 --> 00:05:35,190 are effectively linked through the proto property, 106 00:05:35,190 --> 00:05:37,480 just like before. 107 00:05:37,480 --> 00:05:39,270 So now looking at properties, 108 00:05:39,270 --> 00:05:41,670 or methods in a prototype chain, 109 00:05:41,670 --> 00:05:43,620 works just like it worked 110 00:05:43,620 --> 00:05:46,860 in function constructors, or classes. 111 00:05:46,860 --> 00:05:49,570 And so the prototype chain, in fact, 112 00:05:49,570 --> 00:05:51,920 looks exactly the same here. 113 00:05:51,920 --> 00:05:53,500 The big difference is 114 00:05:53,500 --> 00:05:56,004 that we didn't need any constructor function, 115 00:05:56,004 --> 00:05:59,016 and also no prototype property at all, 116 00:05:59,016 --> 00:06:02,320 to achieve the exact same thing. 117 00:06:02,320 --> 00:06:05,360 So this is actually a bit more straightforward, 118 00:06:05,360 --> 00:06:07,290 and a bit more natural. 119 00:06:07,290 --> 00:06:11,480 And I guess, that it might also be easier to understand. 120 00:06:11,480 --> 00:06:13,770 However, the reason why I'm showing you 121 00:06:13,770 --> 00:06:15,900 this Object.create technique, 122 00:06:15,900 --> 00:06:19,110 right at the end, is because in practice, 123 00:06:19,110 --> 00:06:20,350 in the real world, 124 00:06:20,350 --> 00:06:22,790 this is actually the least used way 125 00:06:22,790 --> 00:06:25,916 of implementing prototypal inheritance. 126 00:06:25,916 --> 00:06:28,490 However, it's still very important 127 00:06:28,490 --> 00:06:31,940 to know exactly how Object.create works, 128 00:06:31,940 --> 00:06:33,960 because you will still stumble upon 129 00:06:33,960 --> 00:06:36,020 this in the real world. 130 00:06:36,020 --> 00:06:37,715 And even more importantly, 131 00:06:37,715 --> 00:06:39,990 we will need Object.create 132 00:06:39,990 --> 00:06:42,436 to link prototypes in the next lecture, 133 00:06:42,436 --> 00:06:47,010 in order to implement inheritance between classes. 134 00:06:47,010 --> 00:06:50,270 So with that, we're gonna take object oriented programming 135 00:06:50,270 --> 00:06:52,100 to a whole new level. 136 00:06:52,100 --> 00:06:55,920 And the Object.create function is gonna be crucial in that, 137 00:06:55,920 --> 00:06:56,943 as we will see. 138 00:06:58,511 --> 00:07:02,930 And of course, we can now verify everything I just said, 139 00:07:02,930 --> 00:07:07,930 using CALT here. So we can do Steven.__Proto. 140 00:07:11,943 --> 00:07:14,533 And so that is now exactly the object 141 00:07:14,533 --> 00:07:16,293 that we specified up here. 142 00:07:17,360 --> 00:07:21,260 So you see, this is exactly PersonProto. 143 00:07:21,260 --> 00:07:22,683 And that makes sense, 144 00:07:23,590 --> 00:07:26,350 Because here, we said explicitly, 145 00:07:26,350 --> 00:07:28,800 that personal proto should in fact, 146 00:07:28,800 --> 00:07:30,503 be the prototype of Steven. 147 00:07:32,130 --> 00:07:34,510 And so therefore, this, of course, 148 00:07:34,510 --> 00:07:39,510 is gonna be true, and it is. 149 00:07:42,070 --> 00:07:45,189 So now that we know exactly what's going on here, 150 00:07:45,189 --> 00:07:47,633 let's quickly create another person. 151 00:07:48,710 --> 00:07:53,710 So const Sarah = Object.create. 152 00:07:57,420 --> 00:08:00,453 And once again, here, use PersonProto. 153 00:08:02,810 --> 00:08:06,150 But now, in order to set properties on this object, 154 00:08:06,150 --> 00:08:10,120 let's do it in a better way than what we did here. 155 00:08:10,120 --> 00:08:12,570 So doing this is a little bit weird. 156 00:08:12,570 --> 00:08:14,268 And it goes against the spirit 157 00:08:14,268 --> 00:08:17,520 of creating objects programmatically. 158 00:08:17,520 --> 00:08:21,020 So if we're serious about using Object.create, 159 00:08:21,020 --> 00:08:22,750 we should implement a function 160 00:08:22,750 --> 00:08:25,343 that basically does this work for us. 161 00:08:26,400 --> 00:08:29,517 So let's create a new method here. 162 00:08:29,517 --> 00:08:31,173 And this can have any name, 163 00:08:32,060 --> 00:08:33,970 so I will call it init. 164 00:08:33,970 --> 00:08:35,990 But this is going to be a little bit similar 165 00:08:35,990 --> 00:08:38,973 to the constructor, that we have in classes. 166 00:08:40,160 --> 00:08:42,780 So this one will also get a name, 167 00:08:42,780 --> 00:08:44,397 or let's say first name, 168 00:08:44,397 --> 00:08:46,563 and a birth year. 169 00:08:48,410 --> 00:08:49,980 And then just like before, 170 00:08:49,980 --> 00:08:52,960 we will use this property 171 00:08:52,960 --> 00:08:56,470 and set first name to first name, 172 00:08:56,470 --> 00:08:59,453 and then this.birth year, 173 00:09:00,310 --> 00:09:03,223 set it to birth year, as well. 174 00:09:04,120 --> 00:09:05,370 And so you see that 175 00:09:05,370 --> 00:09:08,220 this looks a bit like the constructor function 176 00:09:08,220 --> 00:09:09,713 that we created earlier. 177 00:09:11,130 --> 00:09:13,300 However, this has actually nothing 178 00:09:13,300 --> 00:09:16,370 to do with any constructor function, 179 00:09:16,370 --> 00:09:19,130 because we are not using the new operator 180 00:09:19,130 --> 00:09:24,027 to call this we will simply do Sarah.init 181 00:09:26,580 --> 00:09:29,320 and then we will pass in the arguments. 182 00:09:29,320 --> 00:09:33,553 So let's say Sarah, and 1979, for example. 183 00:09:37,010 --> 00:09:40,453 And so let's then use CalcAGe here as well. 184 00:09:42,730 --> 00:09:46,173 And so then, that just works beautifully as well. 185 00:09:47,540 --> 00:09:50,030 So here this keyword will of course, 186 00:09:50,030 --> 00:09:52,950 also points to the Sarah object now, 187 00:09:52,950 --> 00:09:57,720 but it does so because we explicitly called init on Sarah. 188 00:09:57,720 --> 00:09:59,520 So again, this has nothing to do 189 00:09:59,520 --> 00:10:03,250 with constructor functions that we saw earlier. 190 00:10:03,250 --> 00:10:04,990 And it's also completely different 191 00:10:04,990 --> 00:10:09,990 from the constructor method that we have in ESX classes. 192 00:10:10,240 --> 00:10:11,750 This is just a manual way 193 00:10:12,750 --> 00:10:15,860 of basically initializing the object. 194 00:10:15,860 --> 00:10:18,310 And this here could be any name. 195 00:10:18,310 --> 00:10:20,440 And indeed, we could have a method like 196 00:10:20,440 --> 00:10:23,053 this in any other object literal. 197 00:10:25,660 --> 00:10:30,210 So essentially, this is how Object.create works. 198 00:10:30,210 --> 00:10:32,440 So the big takeaway is 199 00:10:32,440 --> 00:10:35,670 that Object.create creates a new object, 200 00:10:35,670 --> 00:10:38,450 and the prototype of that object 201 00:10:38,450 --> 00:10:41,660 will be the object that we passed in. 202 00:10:41,660 --> 00:10:44,040 So that's what matters from this video. 203 00:10:44,040 --> 00:10:47,190 And that's very important to understand in the future, 204 00:10:47,190 --> 00:10:50,750 when we will implement true class inheritance because 205 00:10:50,750 --> 00:10:53,863 for that, we are gonna need Object.create.