1 00:00:01,110 --> 00:00:06,110 And now finally lets look at how we can use Object.create 2 00:00:06,220 --> 00:00:09,382 in order to implement a complex prototype chain. 3 00:00:09,382 --> 00:00:12,450 So similar to what we implemented before 4 00:00:12,450 --> 00:00:15,363 with classes and constructor functions. 5 00:00:17,380 --> 00:00:20,830 And so here I already copied this object here 6 00:00:20,830 --> 00:00:23,040 which will serve as the prototype 7 00:00:23,040 --> 00:00:28,040 to create a new person object using Object.create. 8 00:00:28,490 --> 00:00:29,323 Alright. 9 00:00:29,323 --> 00:00:33,800 And so of course, this will basically be our parent class, 10 00:00:33,800 --> 00:00:37,670 and we already know that Object.create it's a bit easier 11 00:00:37,670 --> 00:00:39,900 to use and to understand. 12 00:00:39,900 --> 00:00:42,420 And so it shouldn't be too hard to implement 13 00:00:42,420 --> 00:00:47,110 a similar hierarchy between a person and student. 14 00:00:47,110 --> 00:00:48,513 So here, 15 00:00:48,513 --> 00:00:50,020 PersonProto. 16 00:00:50,020 --> 00:00:54,060 So this object up here used to be the prototype of all 17 00:00:54,060 --> 00:00:55,920 the new person objects. 18 00:00:55,920 --> 00:00:59,340 But now we basically want to add another prototype 19 00:00:59,340 --> 00:01:01,330 in the middle of the chain. 20 00:01:01,330 --> 00:01:04,940 So between PersonProto and the object. 21 00:01:04,940 --> 00:01:06,650 And so what we're going to do is 22 00:01:06,650 --> 00:01:10,163 to make student inherit directly from person. 23 00:01:11,930 --> 00:01:14,380 So we're going to create now an object 24 00:01:14,380 --> 00:01:16,923 that will be the prototype of students. 25 00:01:17,870 --> 00:01:22,790 So StudentProto, and this will be, 26 00:01:22,790 --> 00:01:25,380 for now an empty object. 27 00:01:25,380 --> 00:01:29,960 So Object.create and to prototype will be, 28 00:01:29,960 --> 00:01:30,953 PersonProto. 29 00:01:31,820 --> 00:01:33,450 And that's it. 30 00:01:33,450 --> 00:01:35,773 And so now we can use this StudentProto 31 00:01:35,773 --> 00:01:37,653 to create new students. 32 00:01:39,300 --> 00:01:41,593 So let's create jay, 33 00:01:42,780 --> 00:01:46,593 and Object.create, create, 34 00:01:48,370 --> 00:01:51,784 and it will inherit from StudentProto. 35 00:01:51,784 --> 00:01:54,290 And so now the StudentProto object 36 00:01:54,290 --> 00:01:56,160 that we just created earlier, 37 00:01:56,160 --> 00:01:59,520 is now the prototype off the jay object. 38 00:01:59,520 --> 00:02:02,120 So again, the StudentProto object 39 00:02:02,120 --> 00:02:05,070 is now the prototype of jay, 40 00:02:05,070 --> 00:02:07,860 and the PersonProto object is in turn 41 00:02:07,860 --> 00:02:10,840 the prototype of StudentProto. 42 00:02:10,840 --> 00:02:15,750 And so therefore, PersonProto is a parent prototype of jay, 43 00:02:15,750 --> 00:02:19,430 which means that it's in its prototype chain. 44 00:02:19,430 --> 00:02:24,283 Whoa, but that once again sounded a bit confusing. 45 00:02:24,283 --> 00:02:26,668 And so let's make sure that we really understand 46 00:02:26,668 --> 00:02:29,983 this by looking at a nice diagram again. 47 00:02:31,760 --> 00:02:35,320 So it all starts with the PersonProto object, 48 00:02:35,320 --> 00:02:39,550 which used to be the prototype of all person objects, 49 00:02:39,550 --> 00:02:42,430 but now using Object.create, 50 00:02:42,430 --> 00:02:45,390 we make it so that PersonProto will actually 51 00:02:45,390 --> 00:02:49,280 become the prototype of StudentProto. 52 00:02:49,280 --> 00:02:51,430 And what this does is that now 53 00:02:51,430 --> 00:02:54,860 basically student inherits from person. 54 00:02:54,860 --> 00:02:57,260 And so it is, we already established 55 00:02:57,260 --> 00:03:01,290 the parent child relationship that we were looking for. 56 00:03:01,290 --> 00:03:03,180 Now to finish, all we need to do 57 00:03:03,180 --> 00:03:06,000 is to use Object.create again, 58 00:03:06,000 --> 00:03:10,210 but this time to create a new actual student object. 59 00:03:10,210 --> 00:03:12,200 And of course we make the student. 60 00:03:12,200 --> 00:03:16,240 So jay in this course inherit from StudentProto, 61 00:03:16,240 --> 00:03:19,230 which is now jay's prototype. 62 00:03:19,230 --> 00:03:23,960 And like this, we created a nice and simple prototype chain. 63 00:03:23,960 --> 00:03:26,460 So jay inherits from StudentProto, 64 00:03:26,460 --> 00:03:29,850 which in turn inherits from PersonProto, 65 00:03:29,850 --> 00:03:32,540 and therefore the jay object will be able 66 00:03:32,540 --> 00:03:35,330 to use all the methods that are contained 67 00:03:35,330 --> 00:03:38,233 in StudentProto and PersonProto. 68 00:03:40,320 --> 00:03:43,240 Now with the scope chain correctly established, 69 00:03:43,240 --> 00:03:46,533 let's also add an init method to StudentProto. 70 00:03:47,460 --> 00:03:50,880 So just like we did here with PersonProto, 71 00:03:50,880 --> 00:03:53,230 so that we don't have to manually specify 72 00:03:53,230 --> 00:03:56,363 the properties on any new student object. 73 00:03:58,260 --> 00:04:01,773 So let's add that here to StudentProto.init. 74 00:04:05,280 --> 00:04:10,280 So this is gonna be receiving the first name, then, 75 00:04:10,370 --> 00:04:13,910 the birth year, and again, 76 00:04:13,910 --> 00:04:14,743 the course. 77 00:04:15,740 --> 00:04:18,680 And so now we can actually use the same trick 78 00:04:18,680 --> 00:04:20,010 that we used before, 79 00:04:20,010 --> 00:04:22,650 where we use constructor functions. 80 00:04:22,650 --> 00:04:25,710 So what I mean is to take advantage 81 00:04:25,710 --> 00:04:27,960 basically of this init method 82 00:04:27,960 --> 00:04:30,703 so that we don't have to write the same code again. 83 00:04:32,050 --> 00:04:35,000 So basically the child prototype can reuse 84 00:04:35,000 --> 00:04:38,700 this init method here from the person prototype, 85 00:04:38,700 --> 00:04:42,830 which is the parent prototype, right? 86 00:04:42,830 --> 00:04:47,770 So that is PersonProto.init.call, 87 00:04:47,770 --> 00:04:49,860 because once again, we want to set 88 00:04:49,860 --> 00:04:54,820 the this keywords to the this keyword in this method here. 89 00:04:54,820 --> 00:04:59,043 So this and then first name and the birth year. 90 00:05:00,270 --> 00:05:04,270 And then of course we set the course property here, 91 00:05:04,270 --> 00:05:06,753 which is unique to the student. 92 00:05:09,490 --> 00:05:13,973 So let's now use that method jay.init. 93 00:05:16,720 --> 00:05:21,123 So Jay born in, let's say 2010, and again, computer science. 94 00:05:24,780 --> 00:05:25,960 Alright. 95 00:05:25,960 --> 00:05:27,173 So let's take a look, 96 00:05:28,150 --> 00:05:30,233 and yeah, that works. 97 00:05:31,720 --> 00:05:33,200 That's nice. 98 00:05:33,200 --> 00:05:37,200 And let's now add again, the introduced method here. 99 00:05:37,200 --> 00:05:40,370 Just so that it is similar to the other two techniques 100 00:05:40,370 --> 00:05:42,200 that we used earlier. 101 00:05:42,200 --> 00:05:43,213 So introduce, 102 00:05:45,940 --> 00:05:47,483 is gonna be a function. 103 00:05:48,560 --> 00:05:52,063 And let me just again, grab that from here. 104 00:05:57,460 --> 00:05:58,910 Alright. 105 00:05:58,910 --> 00:06:02,323 And now let's call jay.introduce, 106 00:06:04,800 --> 00:06:06,630 and indeed that works. 107 00:06:06,630 --> 00:06:08,510 And now, as you would expect, 108 00:06:08,510 --> 00:06:11,773 we should also be able to call jay.calcAge, 109 00:06:12,700 --> 00:06:16,703 because that method is up here in the prototype chain. 110 00:06:17,600 --> 00:06:19,833 And so that has got to work as well. 111 00:06:22,810 --> 00:06:23,720 And yeah. 112 00:06:23,720 --> 00:06:26,760 So 27 and one more time, 113 00:06:26,760 --> 00:06:31,030 just to take a look here at the prototype chain, 114 00:06:31,030 --> 00:06:35,400 we see that indeed, it has a prototype, which contains 115 00:06:35,400 --> 00:06:38,440 the init and the introduce methods. 116 00:06:38,440 --> 00:06:40,483 So these two that we just created, 117 00:06:42,120 --> 00:06:46,130 and this prototype in turn has its own prototype, 118 00:06:46,130 --> 00:06:47,440 which is then the one, 119 00:06:47,440 --> 00:06:50,930 which contains calcAge method, 120 00:06:50,930 --> 00:06:53,693 and so that is indeed PersonProto. 121 00:06:57,390 --> 00:07:00,630 So this is exactly the prototype chain 122 00:07:00,630 --> 00:07:03,950 that we just saw earlier in the diagram. 123 00:07:03,950 --> 00:07:04,800 Now, okay. 124 00:07:04,800 --> 00:07:06,880 And that's actually it. 125 00:07:06,880 --> 00:07:09,270 So in this version, we don't even worry 126 00:07:09,270 --> 00:07:11,290 about constructors anymore, 127 00:07:11,290 --> 00:07:14,320 and also not about prototype properties, 128 00:07:14,320 --> 00:07:17,200 and not about the new operator. 129 00:07:17,200 --> 00:07:21,230 So it's really just objects linked to other objects. 130 00:07:21,230 --> 00:07:24,170 And it's all really simple and beautiful, 131 00:07:24,170 --> 00:07:25,810 if you ask me. 132 00:07:25,810 --> 00:07:28,910 And in fact, some people think that this pattern 133 00:07:28,910 --> 00:07:31,940 is a lot better than basically trying 134 00:07:31,940 --> 00:07:34,770 to fake classes in JavaScript, 135 00:07:34,770 --> 00:07:36,900 because faking classes in the way 136 00:07:36,900 --> 00:07:41,230 that they exist in other languages like Java or C plus plus 137 00:07:41,230 --> 00:07:44,580 is exactly what we do by using constructor functions, 138 00:07:44,580 --> 00:07:47,080 and even ES6 classes. 139 00:07:47,080 --> 00:07:48,850 But here, in this technique 140 00:07:48,850 --> 00:07:51,519 that I just showed you with Object.create, 141 00:07:51,519 --> 00:07:54,880 we are, in fact, not faking classes. 142 00:07:54,880 --> 00:07:58,170 All we are doing is simply linking objects together, 143 00:07:58,170 --> 00:08:00,320 where some objects then serve 144 00:08:00,320 --> 00:08:03,470 as the prototype of other objects. 145 00:08:03,470 --> 00:08:05,880 And personally, I wouldn't mind if this 146 00:08:05,880 --> 00:08:10,080 was the only way of doing OOP in JavaScript, 147 00:08:10,080 --> 00:08:11,870 but as I mentioned earlier, 148 00:08:11,870 --> 00:08:14,743 ES6 classes and constructor functions 149 00:08:14,743 --> 00:08:18,520 are actually way more used in the real world. 150 00:08:18,520 --> 00:08:22,450 But in any case, it's still super important and valuable 151 00:08:22,450 --> 00:08:25,580 that you learned all of these three techniques now, 152 00:08:25,580 --> 00:08:29,000 because you will see them all in the real world still. 153 00:08:29,000 --> 00:08:33,000 And this also allows you to think about this on your own 154 00:08:33,000 --> 00:08:36,070 and choose the style that you like the best, 155 00:08:36,070 --> 00:08:38,340 but again, in the real world, 156 00:08:38,340 --> 00:08:40,790 and especially in modern JavaScript, 157 00:08:40,790 --> 00:08:44,750 you will mostly see ES6 classes being used now. 158 00:08:44,750 --> 00:08:48,160 And so, since I want to prepare you for the real world, 159 00:08:48,160 --> 00:08:51,223 I will start using classes from this point on.