WEBVTT 1 00:00:01.210 --> 00:00:03.050 Let's finally implement 2 00:00:03.050 --> 00:00:05.420 object oriented programming now. 3 00:00:05.420 --> 00:00:08.393 And starting with constructor functions. 4 00:00:10.390 --> 00:00:14.170 And as always, I already have to start our files open here 5 00:00:14.170 --> 00:00:16.140 in my VS code editor. 6 00:00:16.140 --> 00:00:19.280 So please go ahead and do the same now. 7 00:00:19.280 --> 00:00:23.040 And we can actually already also open up a new terminal 8 00:00:24.880 --> 00:00:26.913 and start our live server. 9 00:00:28.740 --> 00:00:31.973 So we can close that, open up the console here, 10 00:00:32.810 --> 00:00:34.870 and increase it a little bit, 11 00:00:34.870 --> 00:00:38.470 and now we're all set up and ready to go. 12 00:00:38.470 --> 00:00:40.980 So, we actually kind of used 13 00:00:40.980 --> 00:00:43.220 object oriented programming before 14 00:00:43.220 --> 00:00:45.320 but in a very limited way. 15 00:00:45.320 --> 00:00:49.970 Because we had no way of programmatically creating objects. 16 00:00:49.970 --> 00:00:54.790 And so all we did was to use some simple object literals 17 00:00:54.790 --> 00:00:58.210 for example, in the bankist app, right? 18 00:00:58.210 --> 00:01:02.380 But now that all changes with constructor functions. 19 00:01:02.380 --> 00:01:05.010 So, we can use constructor functions, 20 00:01:05.010 --> 00:01:08.350 to build an object using a function. 21 00:01:08.350 --> 00:01:11.600 Now, a constructor function is actually 22 00:01:11.600 --> 00:01:14.290 a completely normal function. 23 00:01:14.290 --> 00:01:17.240 The only difference between a regular function, 24 00:01:17.240 --> 00:01:20.400 and a function that we call constructor function, 25 00:01:20.400 --> 00:01:22.980 is that we call a constructor function 26 00:01:22.980 --> 00:01:25.570 with the new operator. 27 00:01:25.570 --> 00:01:26.710 But enough talk, 28 00:01:26.710 --> 00:01:29.890 let's now actually create a constructor function 29 00:01:29.890 --> 00:01:31.313 for a person. 30 00:01:32.720 --> 00:01:37.720 So that person and in OOP there is this convention 31 00:01:38.633 --> 00:01:41.310 that constructor functions always start 32 00:01:41.310 --> 00:01:43.060 with a capital letter. 33 00:01:43.060 --> 00:01:46.350 And so we should always follow that convention too. 34 00:01:46.350 --> 00:01:49.000 And in fact, other a built in constructors 35 00:01:49.000 --> 00:01:52.523 like array or map, follow that convention as well. 36 00:01:55.340 --> 00:01:57.860 Now here I'm using a function expression 37 00:01:57.860 --> 00:02:01.830 but of course a function declaration will also work. 38 00:02:01.830 --> 00:02:05.100 Now an arrow function will actually not work 39 00:02:05.100 --> 00:02:07.060 as a function constructor. 40 00:02:07.060 --> 00:02:10.710 And that's because it doesn't have its own this keyword 41 00:02:10.710 --> 00:02:13.070 and we need that, okay. 42 00:02:13.070 --> 00:02:17.000 So only function declarations and function expressions. 43 00:02:17.000 --> 00:02:18.770 Now remember that this function 44 00:02:18.770 --> 00:02:21.390 is basically gonna produce an object 45 00:02:21.390 --> 00:02:23.393 and in this case for a person. 46 00:02:24.350 --> 00:02:27.280 So we want a person to have a name 47 00:02:27.280 --> 00:02:31.363 or let's say a first name and a birth here. 48 00:02:32.770 --> 00:02:35.390 And so we specified these two parameters 49 00:02:35.390 --> 00:02:38.160 for that here in our constructor function 50 00:02:38.160 --> 00:02:42.250 so that we can then pass in the name and the birth year. 51 00:02:42.250 --> 00:02:44.493 And now let's actually call this function. 52 00:02:46.380 --> 00:02:48.710 And so, as I said, previously, 53 00:02:48.710 --> 00:02:51.510 the only difference between a regular function, 54 00:02:51.510 --> 00:02:55.530 and a constructor function is that we call the constructor 55 00:02:55.530 --> 00:02:58.300 using the new keyword. 56 00:02:58.300 --> 00:03:03.300 So we write new, then person and then let's pass in Jonas 57 00:03:05.630 --> 00:03:08.133 and 1991, let's say. 58 00:03:08.970 --> 00:03:11.330 So this new operator here, 59 00:03:11.330 --> 00:03:14.160 is actually a very special operator 60 00:03:14.160 --> 00:03:17.540 because what it does is to call this function here. 61 00:03:17.540 --> 00:03:19.250 So this person function, 62 00:03:19.250 --> 00:03:22.770 but it does a whole lot more than just that. 63 00:03:22.770 --> 00:03:26.380 So let's see what exactly happens when we call a function 64 00:03:26.380 --> 00:03:28.913 with the new operator like this. 65 00:03:29.880 --> 00:03:32.863 So behind the scenes, there have been four steps. 66 00:03:34.240 --> 00:03:35.830 And let me actually write them here 67 00:03:35.830 --> 00:03:38.170 because this is very important. 68 00:03:38.170 --> 00:03:42.400 So first, a new empty object is created. 69 00:03:42.400 --> 00:03:45.313 So an empty object is created, 70 00:03:46.310 --> 00:03:50.800 then afterwards the function is called 71 00:03:50.800 --> 00:03:54.600 and in this function call the this keyword will be set 72 00:03:54.600 --> 00:03:56.653 to this newly created object. 73 00:03:58.090 --> 00:04:01.030 All right? So let's write that here. 74 00:04:01.030 --> 00:04:04.930 So the this keyword is this new empty object. 75 00:04:04.930 --> 00:04:08.000 So, basically in the execution context 76 00:04:08.000 --> 00:04:09.780 of the person function, 77 00:04:09.780 --> 00:04:13.240 the this keyword will point to this new object here 78 00:04:13.240 --> 00:04:16.123 that was created in step number one. 79 00:04:18.230 --> 00:04:20.440 And remember all of this happens 80 00:04:20.440 --> 00:04:22.870 only because we are calling the function 81 00:04:22.870 --> 00:04:25.053 using the new operator here. 82 00:04:27.180 --> 00:04:31.060 So step number three is that this newly created object 83 00:04:31.060 --> 00:04:33.223 is linked to a prototype. 84 00:04:35.400 --> 00:04:40.400 So linked to prototype but more about this 85 00:04:40.830 --> 00:04:42.290 in the next video. 86 00:04:42.290 --> 00:04:46.343 For now, we just care about creating the object itself. 87 00:04:47.190 --> 00:04:48.910 Finally, the last step, 88 00:04:48.910 --> 00:04:52.080 is that the object that was created in the beginning 89 00:04:52.080 --> 00:04:54.130 is then automatically returned 90 00:04:54.130 --> 00:04:55.943 from the constructor function. 91 00:04:56.820 --> 00:05:01.820 So the function automatically returns 92 00:05:02.120 --> 00:05:05.280 that empty object from the beginning. 93 00:05:05.280 --> 00:05:07.220 But actually at this point, 94 00:05:07.220 --> 00:05:10.160 the object no longer needs to be empty. 95 00:05:10.160 --> 00:05:12.280 And this is actually the trick 96 00:05:12.280 --> 00:05:14.633 of making the constructor function work. 97 00:05:15.610 --> 00:05:17.360 So let's go here now 98 00:05:17.360 --> 00:05:21.520 and the lock to the console, the this keyword. 99 00:05:21.520 --> 00:05:23.880 And so we already know that it should be 100 00:05:23.880 --> 00:05:26.690 this empty object that was just created here 101 00:05:26.690 --> 00:05:29.030 in step number one, right? 102 00:05:29.030 --> 00:05:30.250 Because the this keyword 103 00:05:30.250 --> 00:05:35.250 inside this function will be exactly that empty object. 104 00:05:35.480 --> 00:05:38.110 And again, that's because we are calling it 105 00:05:38.110 --> 00:05:40.790 with the new keyword. 106 00:05:40.790 --> 00:05:42.290 So let's see. 107 00:05:42.290 --> 00:05:45.090 And indeed we get to this empty object. 108 00:05:45.090 --> 00:05:48.650 And the browser console is actually already telling us 109 00:05:48.650 --> 00:05:53.000 that it's basically here of the type of person, all right? 110 00:05:53.000 --> 00:05:57.280 And so this is just the name of the constructor function. 111 00:05:57.280 --> 00:05:58.340 All right. 112 00:05:58.340 --> 00:06:01.680 And now let's use this knowledge to our advantage. 113 00:06:01.680 --> 00:06:05.420 Because we already know that in the end of this function, 114 00:06:05.420 --> 00:06:08.660 the this keyword will basically be returned. 115 00:06:08.660 --> 00:06:12.340 And so whatever we add to that empty object, 116 00:06:12.340 --> 00:06:14.770 will then be returned from the function. 117 00:06:14.770 --> 00:06:17.963 And that returned object, is gonna be the object, 118 00:06:17.963 --> 00:06:20.573 that we are trying to build here, actually. 119 00:06:22.000 --> 00:06:24.600 So, all we need to do is to now take 120 00:06:24.600 --> 00:06:26.550 that first name parameter, 121 00:06:26.550 --> 00:06:28.530 so the value that we receive, 122 00:06:28.530 --> 00:06:31.880 and then create a property on the this keyword 123 00:06:31.880 --> 00:06:35.113 with the same name and then set it to that value. 124 00:06:37.150 --> 00:06:42.150 And then the same with the birth year, equal to birth year. 125 00:06:44.360 --> 00:06:47.940 And so now let's store the result here 126 00:06:47.940 --> 00:06:51.323 in some variable and that's actually it. 127 00:06:52.200 --> 00:06:54.713 So let's see what Jonas is gonna look like, 128 00:06:56.950 --> 00:06:59.970 now and we have to log it to the console here. 129 00:06:59.970 --> 00:07:02.170 If we want to take a look at it. 130 00:07:02.170 --> 00:07:05.960 And indeed here it is, here is the person object 131 00:07:05.960 --> 00:07:09.020 with the first name Jonas and the birth year, 132 00:07:09.020 --> 00:07:12.960 that we passed here into the constructor function. 133 00:07:12.960 --> 00:07:16.460 So, let's quickly recap what just happened here. 134 00:07:16.460 --> 00:07:20.090 So again, we're calling this constructor function 135 00:07:20.090 --> 00:07:23.290 with the new keyword or the new operator. 136 00:07:23.290 --> 00:07:27.460 And so therefore a new empty object is created right away. 137 00:07:27.460 --> 00:07:29.460 Then the function is called 138 00:07:29.460 --> 00:07:33.640 and then here the this keyword, is that empty object. 139 00:07:33.640 --> 00:07:36.710 And then in the function, we start to set properties 140 00:07:36.710 --> 00:07:38.380 to that object. 141 00:07:38.380 --> 00:07:40.730 And we give them the exact same name 142 00:07:40.730 --> 00:07:44.080 as the parameters that we're passing in here. 143 00:07:44.080 --> 00:07:46.470 And of course they could have any other name, 144 00:07:46.470 --> 00:07:50.330 so it doesn't have to be the same name as our arguments. 145 00:07:50.330 --> 00:07:53.950 So it doesn't have to be the same name as our parameters, 146 00:07:53.950 --> 00:07:56.410 but this is kind of a convention. 147 00:07:56.410 --> 00:07:58.650 So if we pass in first name 148 00:07:58.650 --> 00:08:01.983 then we should also create a property called first name. 149 00:08:03.350 --> 00:08:05.660 So then here by the end of the function 150 00:08:05.660 --> 00:08:10.150 or this keyword now has these two new properties. 151 00:08:10.150 --> 00:08:12.220 And then here in step number four, 152 00:08:12.220 --> 00:08:14.900 that object that was created in the beginning, 153 00:08:14.900 --> 00:08:18.130 is then automatically returned from the function. 154 00:08:18.130 --> 00:08:19.303 And so at this point, 155 00:08:19.303 --> 00:08:22.990 that is the object with these two properties. 156 00:08:22.990 --> 00:08:26.726 And so that's gonna be the result of this function call, 157 00:08:26.726 --> 00:08:29.930 and so it will then be stored in Jonas 158 00:08:29.930 --> 00:08:32.320 and then that's what we get here. 159 00:08:32.320 --> 00:08:33.670 Great. 160 00:08:33.670 --> 00:08:35.630 So I hope that made sense. 161 00:08:35.630 --> 00:08:39.180 And so now of course we can use this constructor function 162 00:08:39.180 --> 00:08:42.613 to create as many different objects as we want. 163 00:08:46.360 --> 00:08:51.223 So let's say we want to create Matilda new person, 164 00:08:52.980 --> 00:08:56.053 Matilda and then let's say 2017, 165 00:08:57.800 --> 00:09:00.660 and let's just do another one, why not? 166 00:09:00.660 --> 00:09:03.570 Let's call it Jack new person, 167 00:09:03.570 --> 00:09:05.690 just so you see that we can create 168 00:09:05.690 --> 00:09:09.343 as many objects now based on this constructor function. 169 00:09:12.040 --> 00:09:15.470 And so this is a bit like the analogy from before, 170 00:09:15.470 --> 00:09:17.250 where this constructor function, 171 00:09:17.250 --> 00:09:19.560 is now the blueprint for a house, 172 00:09:19.560 --> 00:09:22.410 and then each of these objects that we create 173 00:09:22.410 --> 00:09:23.930 through that function. 174 00:09:23.930 --> 00:09:27.530 So through that blueprint will be the actual house 175 00:09:27.530 --> 00:09:28.763 in the real world. 176 00:09:29.820 --> 00:09:32.310 So in this case, the actual objects 177 00:09:32.310 --> 00:09:34.223 with actual data in them. 178 00:09:35.820 --> 00:09:39.690 So Matilda and Jack, and so of course, 179 00:09:39.690 --> 00:09:42.950 now each of them is its own new object 180 00:09:42.950 --> 00:09:44.950 that we created programmatically, 181 00:09:44.950 --> 00:09:46.683 using a function constructor. 182 00:09:47.570 --> 00:09:50.690 Now remember from one of the previous lectures, 183 00:09:50.690 --> 00:09:53.760 that in classical object oriented programming, 184 00:09:53.760 --> 00:09:57.810 an object created from a class is called an instance, 185 00:09:57.810 --> 00:10:01.860 right? Now we didn't technically create a class here 186 00:10:01.860 --> 00:10:04.070 because as we discussed before, 187 00:10:04.070 --> 00:10:06.550 JavaScript doesn't really have classes 188 00:10:06.550 --> 00:10:09.360 in the sense of traditional OOP. 189 00:10:09.360 --> 00:10:11.890 However, we did create an object 190 00:10:11.890 --> 00:10:14.270 from a constructor function. 191 00:10:14.270 --> 00:10:17.590 And actually three objects, right? 192 00:10:17.590 --> 00:10:20.150 And constructor functions have been used 193 00:10:20.150 --> 00:10:22.170 since the beginning of JavaScript 194 00:10:22.170 --> 00:10:24.750 to kind of simulate classes. 195 00:10:24.750 --> 00:10:27.270 And so therefore we can still say 196 00:10:27.270 --> 00:10:31.580 that Jonas here is an instance of person 197 00:10:31.580 --> 00:10:35.460 and the same goes for Matilda and for Jack here. 198 00:10:35.460 --> 00:10:38.370 And in fact there is even an operator 199 00:10:38.370 --> 00:10:40.853 that we can use to test for that. 200 00:10:42.400 --> 00:10:44.710 So that works like this. 201 00:10:44.710 --> 00:10:49.603 So Jonas is an instance of, and then person. 202 00:10:50.610 --> 00:10:53.573 And so this will then return either true or false. 203 00:10:54.550 --> 00:10:56.793 Now, if we created something else here, 204 00:10:57.820 --> 00:11:02.820 let's say J, just like this, then if we do this, 205 00:11:05.940 --> 00:11:08.990 this would of course be false, right? 206 00:11:08.990 --> 00:11:12.610 Because of course we didn't create this variable here, 207 00:11:12.610 --> 00:11:17.000 so this object using any constructor function, all right? 208 00:11:20.340 --> 00:11:23.283 And since we're talking about instances here, 209 00:11:24.260 --> 00:11:27.150 we can also say that these properties here 210 00:11:27.150 --> 00:11:29.223 will be the instance properties. 211 00:11:30.580 --> 00:11:31.853 Let's write that here. 212 00:11:32.810 --> 00:11:35.810 And that's because the properties' first name 213 00:11:35.810 --> 00:11:38.210 and birth year will be available 214 00:11:38.210 --> 00:11:41.040 on all the instances that are created 215 00:11:41.040 --> 00:11:43.113 through this constructor function. 216 00:11:44.220 --> 00:11:48.920 So that's for properties, but now what about methods, 217 00:11:48.920 --> 00:11:53.290 So what if we wanted to add a method to our objects? 218 00:11:53.290 --> 00:11:56.290 Well, just like we added properties, 219 00:11:56.290 --> 00:11:58.513 we can of course also add methods. 220 00:12:00.900 --> 00:12:04.483 So let's again, use our old friend calcage here. 221 00:12:05.410 --> 00:12:09.010 And so here we are going to create a function 222 00:12:09.010 --> 00:12:11.720 and assign it to this property. 223 00:12:11.720 --> 00:12:15.143 And so this will then basically become a method, right? 224 00:12:16.040 --> 00:12:20.640 And this year showed simply log to the console 2037, 225 00:12:20.640 --> 00:12:23.130 which is the year we've always been using, 226 00:12:23.130 --> 00:12:27.400 and then minus this.birth here. 227 00:12:27.400 --> 00:12:29.600 And so this method is exactly the same 228 00:12:29.600 --> 00:12:33.330 that we've been using all the time, right? 229 00:12:33.330 --> 00:12:36.840 So, this would work just fine here 230 00:12:36.840 --> 00:12:40.750 but this is actually a really bad practice. 231 00:12:40.750 --> 00:12:43.093 So you should never do this. 232 00:12:44.250 --> 00:12:46.580 You should never create a method 233 00:12:46.580 --> 00:12:49.520 inside of a constructor function. 234 00:12:49.520 --> 00:12:52.770 That's because imagine we were gonna create a hundred 235 00:12:52.770 --> 00:12:55.810 or thousands or even tens of thousands 236 00:12:55.810 --> 00:12:59.860 of person objects using this constructor function. 237 00:12:59.860 --> 00:13:01.550 Then what would happen, 238 00:13:01.550 --> 00:13:03.410 is that each of these objects 239 00:13:03.410 --> 00:13:06.113 would carry around this function here. 240 00:13:07.290 --> 00:13:09.460 So if we had a thousand objects, 241 00:13:09.460 --> 00:13:12.660 we would essentially create a thousand copies 242 00:13:12.660 --> 00:13:14.170 of this function. 243 00:13:14.170 --> 00:13:15.730 And so that would be terrible 244 00:13:15.730 --> 00:13:18.630 for the performance of our code. 245 00:13:18.630 --> 00:13:20.880 Again, don't do this. 246 00:13:20.880 --> 00:13:23.230 But instead to solve this problem, 247 00:13:23.230 --> 00:13:26.920 we are gonna use prototypes and prototype inheritance 248 00:13:26.920 --> 00:13:30.020 just like we discussed in the last video. 249 00:13:30.020 --> 00:13:32.140 All right, great. 250 00:13:32.140 --> 00:13:36.340 So this is the basics of constructor functions. 251 00:13:36.340 --> 00:13:39.020 Just note that function constructors 252 00:13:39.020 --> 00:13:43.070 are not really a feature of the JavaScript language. 253 00:13:43.070 --> 00:13:47.180 Instead, they are simply a pattern that has been developed 254 00:13:47.180 --> 00:13:48.890 by other developers. 255 00:13:48.890 --> 00:13:51.610 And now everyone simply uses this. 256 00:13:51.610 --> 00:13:55.490 And this now includes you as a new developer. 257 00:13:55.490 --> 00:14:00.260 So the real magic really here is this new operator. 258 00:14:00.260 --> 00:14:01.850 And so the most important thing 259 00:14:01.850 --> 00:14:03.650 to understand from this video, 260 00:14:03.650 --> 00:14:05.513 is really these four steps. 261 00:14:06.350 --> 00:14:08.660 So make sure that you understand them, 262 00:14:08.660 --> 00:14:10.150 and then in the next video 263 00:14:10.150 --> 00:14:12.220 we will work with prototypes 264 00:14:12.220 --> 00:14:14.430 and finally see the magic 265 00:14:14.430 --> 00:14:17.163 of prototypal inheritance in action.