WEBVTT 1 00:00:01.430 --> 00:00:03.800 Welcome back to the second part 2 00:00:03.800 --> 00:00:07.860 of the introduction to Object-Oriented Programming. 3 00:00:07.860 --> 00:00:10.870 And in this lecture, we will learn about OOP 4 00:00:10.870 --> 00:00:13.780 specifically in JavaScript. 5 00:00:13.780 --> 00:00:16.933 So, how it's different from the more traditional OOP 6 00:00:17.798 --> 00:00:19.350 and also different ways 7 00:00:19.350 --> 00:00:23.410 of implementing this paradigm in JavaScript. 8 00:00:23.410 --> 00:00:26.350 And don't worry, this will be a lot shorter 9 00:00:26.350 --> 00:00:27.583 than the last lecture. 10 00:00:29.490 --> 00:00:31.210 So, just to review. 11 00:00:31.210 --> 00:00:33.140 In the last lecture, we talked about 12 00:00:33.140 --> 00:00:36.280 the classical Object-Oriented Programming model 13 00:00:36.280 --> 00:00:41.280 with classes and instances created from these classes. 14 00:00:41.390 --> 00:00:44.870 And remember, a class is like a blueprint 15 00:00:44.870 --> 00:00:47.026 which is a theoretical plan 16 00:00:47.026 --> 00:00:52.020 and that we use to build many houses in the real world. 17 00:00:52.020 --> 00:00:53.350 And in the same way, 18 00:00:53.350 --> 00:00:57.940 the theoretical class can be used to create actual objects 19 00:00:57.940 --> 00:01:00.080 which are called instances 20 00:01:00.080 --> 00:01:02.503 and which we can then use in our cout. 21 00:01:03.350 --> 00:01:06.040 And this process of creating an instance 22 00:01:06.040 --> 00:01:07.883 is called instantiation. 23 00:01:08.960 --> 00:01:12.040 Now earlier, I said that in JavaScript 24 00:01:12.040 --> 00:01:14.640 things work a bit differently. 25 00:01:14.640 --> 00:01:19.540 So why did I first tell you about classes and instances? 26 00:01:19.540 --> 00:01:24.120 Well, it's because we do have similar concepts in JavaScript 27 00:01:24.120 --> 00:01:25.520 and so it's very useful 28 00:01:25.520 --> 00:01:29.570 to first understand the class instance model. 29 00:01:29.570 --> 00:01:33.710 Plus, many people also just use this terminology 30 00:01:33.710 --> 00:01:36.110 in the context of JavaScript. 31 00:01:36.110 --> 00:01:39.660 And finally, JavaScript syntax itself 32 00:01:39.660 --> 00:01:44.460 uses also some of these terms for example, instances. 33 00:01:44.460 --> 00:01:45.960 And so, you really need to know 34 00:01:45.960 --> 00:01:48.733 what a class is and what an instance is. 35 00:01:49.920 --> 00:01:54.920 Now, anyway, how does OOP actually work in JavaScript? 36 00:01:55.680 --> 00:02:00.150 Well, in JavaScript we have something called prototypes 37 00:02:00.150 --> 00:02:02.230 and all objects in JavaScript 38 00:02:02.230 --> 00:02:06.150 are linked to a certain prototype object. 39 00:02:06.150 --> 00:02:10.260 So we say that each object has a prototype. 40 00:02:10.260 --> 00:02:12.920 And now here comes the magic. 41 00:02:12.920 --> 00:02:17.400 So, the prototype object contains methods and properties 42 00:02:17.400 --> 00:02:21.530 that all the objects that are linked to that prototype 43 00:02:21.530 --> 00:02:24.270 can access and use. 44 00:02:24.270 --> 00:02:28.623 And this behavior is usually called prototypal inheritance. 45 00:02:29.480 --> 00:02:34.280 So, again, prototypal inheritance means that all objects 46 00:02:34.280 --> 00:02:37.550 that are linked to a certain prototype object 47 00:02:37.550 --> 00:02:40.040 can use the methods and properties 48 00:02:40.040 --> 00:02:43.360 that are defined on that prototype. 49 00:02:43.360 --> 00:02:47.470 So basically, objects inherit methods and properties 50 00:02:47.470 --> 00:02:51.220 from the prototype which is the reason why this mechanism 51 00:02:51.220 --> 00:02:54.310 is called prototypal inheritance. 52 00:02:54.310 --> 00:02:58.060 Just note that this inheritance is actually different 53 00:02:58.060 --> 00:03:00.520 from the inheritance that we talked about 54 00:03:00.520 --> 00:03:02.260 in the last lecture. 55 00:03:02.260 --> 00:03:06.150 So that was one class inheriting from another class. 56 00:03:06.150 --> 00:03:07.300 But in this case, 57 00:03:07.300 --> 00:03:11.610 it's basically an instance inheriting from a class. 58 00:03:11.610 --> 00:03:13.230 So that's very different 59 00:03:13.230 --> 00:03:15.150 and so keep that in mind 60 00:03:15.150 --> 00:03:17.150 or maybe in your notes. 61 00:03:17.150 --> 00:03:18.780 Alright? 62 00:03:18.780 --> 00:03:22.760 Now we can also say that objects delegate behavior 63 00:03:22.760 --> 00:03:25.440 to the linked prototype object. 64 00:03:25.440 --> 00:03:29.313 And behavior is just another term for methods here. 65 00:03:30.290 --> 00:03:32.960 So besides prototypal inheritance, 66 00:03:32.960 --> 00:03:36.090 we also call this mechanism, delegation. 67 00:03:36.090 --> 00:03:37.920 And that's also the reason why 68 00:03:37.920 --> 00:03:40.510 this arrow is pointing upwards 69 00:03:40.510 --> 00:03:44.290 because technically, objects delegate their behavior 70 00:03:44.290 --> 00:03:46.390 to the prototype. 71 00:03:46.390 --> 00:03:50.520 On the other hand, in classical OOP with classes, 72 00:03:50.520 --> 00:03:54.550 the behavior, so the methods, are actually copied 73 00:03:54.550 --> 00:03:57.130 from the class to the object 74 00:03:57.130 --> 00:03:59.790 and so that is completely different. 75 00:03:59.790 --> 00:04:02.080 Now, I don't want you to stress out 76 00:04:02.080 --> 00:04:05.770 about the exact terminology here, okay? 77 00:04:05.770 --> 00:04:09.730 So I know that this is a lot of new stuff to take in, 78 00:04:09.730 --> 00:04:13.180 so a lot of new words and new concepts. 79 00:04:13.180 --> 00:04:16.420 But this is just to paint a very clear picture 80 00:04:16.420 --> 00:04:19.130 and to give you the complete overview. 81 00:04:19.130 --> 00:04:20.480 What matters to me 82 00:04:20.480 --> 00:04:23.580 is that you understand how does prototypal inheritance 83 00:04:23.580 --> 00:04:25.200 actually works. 84 00:04:25.200 --> 00:04:28.380 Because, when we actually start using this in practice 85 00:04:28.380 --> 00:04:29.820 in the next lecture, 86 00:04:29.820 --> 00:04:31.180 it won't really matter 87 00:04:31.180 --> 00:04:34.270 if it's called inheritance or delegation 88 00:04:34.270 --> 00:04:38.550 as long as it just works as intended, right? 89 00:04:38.550 --> 00:04:40.840 But since you came to this course 90 00:04:40.840 --> 00:04:44.140 to learn how things actually work in JavaScript, 91 00:04:44.140 --> 00:04:47.050 I'm giving you all that information here. 92 00:04:47.050 --> 00:04:50.360 Even though for now it looks a little bit too much, 93 00:04:50.360 --> 00:04:52.983 but am sure you will find it useful eventually. 94 00:04:53.820 --> 00:04:57.060 So actually, we will come back to this diagram 95 00:04:57.060 --> 00:04:59.530 and fill it with some more detail 96 00:04:59.530 --> 00:05:04.100 after we have actually implemented prototypes in JavaScript. 97 00:05:04.100 --> 00:05:08.460 So after you have actually see how they work in practice. 98 00:05:08.460 --> 00:05:10.600 And by then, am sure that all this 99 00:05:10.600 --> 00:05:13.103 will make 100% sense to you. 100 00:05:14.090 --> 00:05:17.890 But anyway, we have actually already seen this mechanism 101 00:05:17.890 --> 00:05:20.380 in action many times before 102 00:05:20.380 --> 00:05:23.400 but without knowing that it was happening. 103 00:05:23.400 --> 00:05:26.860 For example, each time that we used an array method 104 00:05:26.860 --> 00:05:29.960 like map, we are able to use that method 105 00:05:29.960 --> 00:05:33.290 because of prototypal inheritance. 106 00:05:33.290 --> 00:05:36.920 So, when you go to MDN to check the documentation 107 00:05:36.920 --> 00:05:38.700 for any array method, 108 00:05:38.700 --> 00:05:41.410 what you will see there is that it's actually called 109 00:05:41.410 --> 00:05:45.330 array.prototype.map. 110 00:05:45.330 --> 00:05:47.580 But why is that relevant? 111 00:05:47.580 --> 00:05:50.000 So, what does this mean? 112 00:05:50.000 --> 00:05:53.940 Well, array.prototype is the prototype object 113 00:05:53.940 --> 00:05:57.700 of all the arrays that we create in JavaScript. 114 00:05:57.700 --> 00:06:01.860 So, just like this example array called num here. 115 00:06:01.860 --> 00:06:04.610 Now this prototype object contains all the 116 00:06:04.610 --> 00:06:07.510 array methods, including map. 117 00:06:07.510 --> 00:06:10.083 So, this is where they are actually defined. 118 00:06:10.970 --> 00:06:15.040 So, since array.prototype is the prototype of the 119 00:06:15.040 --> 00:06:20.040 num array, it means that num is linked to that prototype. 120 00:06:20.320 --> 00:06:23.610 And therefore, it has access to all the methods 121 00:06:23.610 --> 00:06:27.420 that are defined on the array.prototype object, 122 00:06:27.420 --> 00:06:30.040 just like the map method. 123 00:06:30.040 --> 00:06:34.860 So, in a sense, our array inherits the map method. 124 00:06:34.860 --> 00:06:39.280 Or again, we can also say that the array delegated 125 00:06:39.280 --> 00:06:42.900 the behavior of mapping to its prototype. 126 00:06:42.900 --> 00:06:47.150 So, you can choose whatever makes more sense in your mind. 127 00:06:47.150 --> 00:06:49.640 But what matters, is that the map method 128 00:06:49.640 --> 00:06:53.690 is actually not defined on the num array itself 129 00:06:53.690 --> 00:06:55.820 but on its prototype. 130 00:06:55.820 --> 00:06:58.640 And of course, we're gonna check out this behavior 131 00:06:58.640 --> 00:07:01.559 also in our cout and practice, 132 00:07:01.559 --> 00:07:02.392 okay? 133 00:07:04.255 --> 00:07:08.060 Right now, you might have a ton of questions 134 00:07:08.060 --> 00:07:09.510 in your head. 135 00:07:09.510 --> 00:07:13.260 Like, how do we actually create prototypes? 136 00:07:13.260 --> 00:07:16.680 And, how do we link objects to prototypes? 137 00:07:16.680 --> 00:07:20.590 And how can we create new objects without having classes 138 00:07:20.590 --> 00:07:24.010 from which we can instantiate objects? 139 00:07:24.010 --> 00:07:26.630 So, in summary, the question is 140 00:07:26.630 --> 00:07:29.550 how do we implement Object-Oriented Programming 141 00:07:29.550 --> 00:07:31.973 in JavaScript in practice? 142 00:07:32.820 --> 00:07:36.520 Well, in JavaScript there are actually three different ways 143 00:07:36.520 --> 00:07:40.420 of doing all this: the constructor function technique, 144 00:07:40.420 --> 00:07:44.607 ES6 classes and also the Object.create(). 145 00:07:45.660 --> 00:07:49.100 So first, constructor functions are a way 146 00:07:49.100 --> 00:07:51.790 of creating objects programmatically, 147 00:07:51.790 --> 00:07:54.650 using a function which will also set 148 00:07:54.650 --> 00:07:57.140 the new object's prototype. 149 00:07:57.140 --> 00:08:00.770 And this is actually how built-in objects like arrays 150 00:08:00.770 --> 00:08:04.760 or maps or sets are implemented. 151 00:08:04.760 --> 00:08:08.870 Also, this is how OOP has been done in JavaScript 152 00:08:08.870 --> 00:08:10.573 basically since the beginning. 153 00:08:11.530 --> 00:08:16.530 Next, the ES6 release introduced classes into JavaScript. 154 00:08:16.600 --> 00:08:21.210 And so now, ES6 classes are actually the more modern way 155 00:08:21.210 --> 00:08:24.370 of doing OOP in JavaScript. 156 00:08:24.370 --> 00:08:27.270 However, keep in mind that these are actually 157 00:08:27.270 --> 00:08:30.210 not the kind of classes that we talked about 158 00:08:30.210 --> 00:08:33.810 in the last lecture and in the last slide. 159 00:08:33.810 --> 00:08:37.302 They are instead just so called 'synthetic sugar' 160 00:08:37.302 --> 00:08:40.020 over constructor functions. 161 00:08:40.020 --> 00:08:43.940 So this means that ES6 classes are basically just 162 00:08:43.940 --> 00:08:48.270 a layer of obstruction over constructor functions. 163 00:08:48.270 --> 00:08:51.200 So, it's really just a nicer syntax 164 00:08:51.200 --> 00:08:56.200 that makes it easier for newcomers to do OOP in JavaScript. 165 00:08:56.370 --> 00:09:00.810 But behind the scenes, ES6 classes are actually implemented 166 00:09:00.810 --> 00:09:02.930 with constructor functions. 167 00:09:02.930 --> 00:09:06.050 And so they also use prototypal inheritance 168 00:09:06.050 --> 00:09:08.183 just like we learnt in the last slide. 169 00:09:09.380 --> 00:09:12.610 Finally, there's also the object.create() 170 00:09:13.480 --> 00:09:18.120 which is basically the easiest and most straightforward way 171 00:09:18.120 --> 00:09:22.250 of linking an object to a prototype object. 172 00:09:22.250 --> 00:09:25.990 However, it's not as used as the other two methods 173 00:09:25.990 --> 00:09:28.653 as we will see over the next couple of lectures. 174 00:09:29.590 --> 00:09:33.260 Now, to finish, one important thing to keep in mind 175 00:09:33.260 --> 00:09:37.240 is that the four principles of Object-Oriented Programming 176 00:09:37.240 --> 00:09:39.440 that we learnt in the last lecture, 177 00:09:39.440 --> 00:09:43.180 so that's obstruction, encapsulation, inheritance 178 00:09:43.180 --> 00:09:47.000 and polymorphism are still valid and important 179 00:09:47.000 --> 00:09:49.700 with prototypal inheritance. 180 00:09:49.700 --> 00:09:51.580 And throughout this section, 181 00:09:51.580 --> 00:09:53.540 we will of course learn how to use 182 00:09:53.540 --> 00:09:56.616 and implement these principles. 183 00:09:56.616 --> 00:09:57.449 Alright. 184 00:09:57.449 --> 00:09:59.670 And with all that being said, 185 00:09:59.670 --> 00:10:03.300 let's now finally put OOP into practice 186 00:10:03.300 --> 00:10:05.393 and get a bit more technical.