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