Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,623 --> 00:00:03,470 [Instructor} So we learned how to implement 2 2 00:00:03,470 --> 00:00:07,210 prototypal inheritance with constructor functions 3 3 00:00:07,210 --> 00:00:09,550 and then manually setting methods 4 4 00:00:09,550 --> 00:00:13,200 on the constructor functions, prototype property. 5 5 00:00:13,200 --> 00:00:18,040 But now it's time to turn our attention to ES6 classes. 6 6 00:00:18,040 --> 00:00:22,080 Which essentially allow us to do the exact same thing, 7 7 00:00:22,080 --> 00:00:25,673 but using a nicer and more modern syntax. 8 8 00:00:27,530 --> 00:00:29,480 Now, as I mentioned earlier, 9 9 00:00:29,480 --> 00:00:33,790 classes in JavaScript do not work like traditional classes 10 10 00:00:33,790 --> 00:00:38,120 in other languages like Java or C Plus Plus. 11 11 00:00:38,120 --> 00:00:43,120 So instead classes in JavaScript are just synthetic sugar 12 12 00:00:43,180 --> 00:00:46,630 over what we learned in the last few videos. 13 13 00:00:46,630 --> 00:00:49,270 So they still implement prototypal inheritance 14 14 00:00:49,270 --> 00:00:52,010 behind the scenes, but where they syntax 15 15 00:00:52,010 --> 00:00:54,450 that makes more sense to people coming 16 16 00:00:54,450 --> 00:00:56,740 from other programming languages. 17 17 00:00:56,740 --> 00:00:59,090 And so that was basically the goal of 18 18 00:00:59,090 --> 00:01:02,760 adding classes to JavaScript. But anyway, 19 19 00:01:02,760 --> 00:01:05,963 let's noW implement person using a class. 20 20 00:01:06,870 --> 00:01:11,870 So we can write class and then the name of the class, 21 21 00:01:11,920 --> 00:01:15,440 and let's actually call it PersonCL. 22 22 00:01:15,440 --> 00:01:20,440 So that stands for class and then curly braces like this. 23 23 00:01:20,980 --> 00:01:24,210 And so this is actually a class declaration, 24 24 00:01:24,210 --> 00:01:28,440 but just like in functions, we also have class expressions. 25 25 00:01:28,440 --> 00:01:30,823 And so that would work like this. 26 26 00:01:31,980 --> 00:01:34,543 So class expression, 27 27 00:01:36,450 --> 00:01:40,090 and class declaration, 28 28 00:01:40,090 --> 00:01:43,223 And so then you can pick whichever you like the most. 29 29 00:01:45,010 --> 00:01:49,393 So it would be PersonCL and then class, 30 30 00:01:51,420 --> 00:01:53,180 and then just like a function, 31 31 00:01:53,180 --> 00:01:56,680 but without the arguments, okay. 32 32 00:01:56,680 --> 00:01:59,040 And that is because in fact 33 33 00:01:59,040 --> 00:02:03,120 classes are just a special type of functions, okay. 34 34 00:02:03,120 --> 00:02:05,850 So although we use the class keyword here 35 35 00:02:05,850 --> 00:02:09,260 behind the scenes classes are still functions 36 36 00:02:09,260 --> 00:02:12,010 and therefore we have class expressions 37 37 00:02:12,010 --> 00:02:14,000 and class declarations. 38 38 00:02:14,000 --> 00:02:17,540 Now, for some reason I prefer the class declaration, 39 39 00:02:17,540 --> 00:02:19,903 and so I'm gonna use that right here. 40 40 00:02:21,030 --> 00:02:23,880 And so this is how we write a simple class 41 41 00:02:23,880 --> 00:02:25,400 and then inside the class, 42 42 00:02:25,400 --> 00:02:28,010 the first thing that we need to do 43 43 00:02:28,010 --> 00:02:30,293 is to add a constructor method. 44 44 00:02:31,520 --> 00:02:33,400 So just like this, 45 45 00:02:33,400 --> 00:02:36,010 and this constructor actually works in a 46 46 00:02:36,010 --> 00:02:39,530 pretty similar way as a constructor function, 47 47 00:02:39,530 --> 00:02:42,010 so as we studied previously, 48 48 00:02:42,010 --> 00:02:46,490 but this one is actually a method of this class. 49 49 00:02:46,490 --> 00:02:49,780 And in fact it needs to be called constructor, 50 50 00:02:49,780 --> 00:02:51,640 so that is the rule. 51 51 00:02:51,640 --> 00:02:54,240 But just like in constructor functions, 52 52 00:02:54,240 --> 00:02:57,750 we pass in arguments basically for the properties 53 53 00:02:57,750 --> 00:02:59,513 that we wanted the object to have. 54 54 00:03:00,870 --> 00:03:05,850 So that's again first name and then the birth year. 55 55 00:03:07,940 --> 00:03:10,910 Now, the act of creating a new object 56 56 00:03:10,910 --> 00:03:14,710 actually also works in the exact same way as before. 57 57 00:03:14,710 --> 00:03:16,830 So using the new operator, 58 58 00:03:16,830 --> 00:03:20,240 and so therefore, whenever we create a new object, 59 59 00:03:20,240 --> 00:03:23,860 so like a new instance using the new operator, 60 60 00:03:23,860 --> 00:03:27,290 this constructor will automatically be called. 61 61 00:03:27,290 --> 00:03:30,113 So, let's actually try that right away. 62 62 00:03:32,150 --> 00:03:34,533 And this time let's create Jessica here. 63 63 00:03:36,760 --> 00:03:41,410 So new PersonCL, and so as you see 64 64 00:03:41,410 --> 00:03:44,640 everything here looks exactly the same as before. 65 65 00:03:44,640 --> 00:03:47,303 So it looks just like a regular function call. 66 66 00:03:49,240 --> 00:03:53,350 And again, we also use the new keyword here. 67 67 00:03:53,350 --> 00:03:55,570 And so therefore just like before, 68 68 00:03:55,570 --> 00:03:58,690 the disc keyword here inside of the constructor 69 69 00:03:58,690 --> 00:04:02,810 will also be set to the newly created empty object. 70 70 00:04:02,810 --> 00:04:06,480 And so just like before, we set the properties 71 71 00:04:06,480 --> 00:04:08,383 of the object like this. 72 72 00:04:09,370 --> 00:04:12,310 So this dot first name is equal to 73 73 00:04:12,310 --> 00:04:14,640 first name that we receive 74 74 00:04:14,640 --> 00:04:17,093 and the same for the birth year. 75 75 00:04:20,750 --> 00:04:25,170 Alright. So basically when we create a new instance here, 76 76 00:04:25,170 --> 00:04:28,410 then it is this constructor that is gonna be called 77 77 00:04:28,410 --> 00:04:30,880 and it will return a new object 78 78 00:04:30,880 --> 00:04:33,973 and then that will be stored here into Jessica. 79 79 00:04:36,000 --> 00:04:38,973 So let's just lock this to the console. 80 80 00:04:39,840 --> 00:04:44,840 And so, in fact it looks just like before, alright. 81 81 00:04:45,210 --> 00:04:48,100 So here we basically have the properties 82 82 00:04:48,100 --> 00:04:50,310 that will be stored in the new object 83 83 00:04:50,310 --> 00:04:52,000 that we want to create, 84 84 00:04:52,000 --> 00:04:55,060 and so now it's time for the methods. 85 85 00:04:55,060 --> 00:04:58,560 And the methods we simply write like this, 86 86 00:04:58,560 --> 00:05:01,030 so we can simply add them here. 87 87 00:05:01,030 --> 00:05:03,280 And all we have to do is to write their name. 88 88 00:05:05,210 --> 00:05:08,030 So just like a regular function in here. 89 89 00:05:08,030 --> 00:05:10,363 So this is very nice and very convenient. 90 90 00:05:11,530 --> 00:05:14,663 And so let's simply do the same as before. 91 91 00:05:16,660 --> 00:05:20,093 So this dot birth year. 92 92 00:05:20,970 --> 00:05:23,260 Now, what's important to understand here 93 93 00:05:23,260 --> 00:05:26,530 is that all of these methods that we write in the class, 94 94 00:05:26,530 --> 00:05:28,630 so outside of the constructor, 95 95 00:05:28,630 --> 00:05:31,780 will be on the prototype of the objects 96 96 00:05:31,780 --> 00:05:34,420 and not on the objects themselves. 97 97 00:05:34,420 --> 00:05:39,240 So this is really just like before prototypal inheritance. 98 98 00:05:39,240 --> 00:05:42,720 And in fact, we will be able to confirm that now. 99 99 00:05:42,720 --> 00:05:47,720 So as we open up PersonCL here, and in fact, 100 100 00:05:48,070 --> 00:05:50,120 we're gonna be able to confirm that here. 101 101 00:05:51,020 --> 00:05:54,220 So as we inspect this Jessica object, 102 102 00:05:54,220 --> 00:05:56,620 when we look into it's prototype, 103 103 00:05:56,620 --> 00:06:00,550 then we will once again see the calcAge function here. 104 104 00:06:00,550 --> 00:06:03,600 Alright. And so therefore of course, 105 105 00:06:03,600 --> 00:06:06,003 we're going to be able to do this, 106 106 00:06:07,850 --> 00:06:09,860 and actually we don't even need to log it 107 107 00:06:09,860 --> 00:06:13,020 to the console because the calcAge method 108 108 00:06:13,020 --> 00:06:15,543 already does that on its own. 109 109 00:06:16,590 --> 00:06:19,153 And so indeed we get an age here. 110 110 00:06:20,250 --> 00:06:22,650 And so one more time, let me prove to you 111 111 00:06:24,690 --> 00:06:29,690 that Jessica underscore proto underscore underscore 112 112 00:06:30,840 --> 00:06:35,840 is equal to PersonCL dot prototype, and is true. 113 113 00:06:40,140 --> 00:06:43,400 And so as you see PersonCL here acts 114 114 00:06:43,400 --> 00:06:45,950 just like any other function constructor. 115 115 00:06:45,950 --> 00:06:48,230 Where the only difference that this looks 116 116 00:06:48,230 --> 00:06:50,660 a little bit nicer. So with this syntax, 117 117 00:06:50,660 --> 00:06:54,520 we don't have to manually mess with the prototype property. 118 118 00:06:54,520 --> 00:06:57,880 All you have to do is to write the methods here. 119 119 00:06:57,880 --> 00:07:01,350 So inside the class, but outside of the constructor, 120 120 00:07:01,350 --> 00:07:03,440 and then they will automatically be added 121 121 00:07:03,440 --> 00:07:06,933 to the prototype property of the class, basically. 122 122 00:07:07,880 --> 00:07:09,623 So let me actually write that here. 123 123 00:07:17,956 --> 00:07:20,780 So they will be added to the prototype property 124 124 00:07:20,780 --> 00:07:23,730 of the person class, which once again, 125 125 00:07:23,730 --> 00:07:25,610 is gonna be the prototype 126 126 00:07:25,610 --> 00:07:29,260 of the objects created by that class. 127 127 00:07:29,260 --> 00:07:32,470 And we can take this demonstration even further 128 128 00:07:32,470 --> 00:07:37,240 by also adding a method manually to the prototype. 129 129 00:07:37,240 --> 00:07:39,483 So that's going to work just as fine. 130 130 00:07:42,520 --> 00:07:44,320 So let's create a greet method here. 131 131 00:07:51,460 --> 00:07:56,460 So let's just say, hey, this dot first name, 132 132 00:07:58,100 --> 00:08:01,910 and then we can call this on Jessica. 133 133 00:08:01,910 --> 00:08:04,663 So of course Jessica dot greet. 134 134 00:08:07,880 --> 00:08:12,760 And so as you see it, that works just as well, alright. 135 135 00:08:12,760 --> 00:08:16,290 And so this is proof one more time that the class really 136 136 00:08:16,290 --> 00:08:18,439 just hides the true nature 137 137 00:08:18,439 --> 00:08:21,283 of prototypal inheritance and JavaScript. 138 138 00:08:22,530 --> 00:08:27,030 So of course, we could now do the same like this 139 139 00:08:28,590 --> 00:08:32,313 and notice how there are no commas between the methods. 140 140 00:08:34,010 --> 00:08:38,160 Okay, so we could do this, take out this, 141 141 00:08:38,160 --> 00:08:42,023 and it would work the exact same way, you see. 142 142 00:08:43,700 --> 00:08:46,880 So, this is great for people who are coming 143 143 00:08:46,880 --> 00:08:49,640 from another language and have experience 144 144 00:08:49,640 --> 00:08:51,620 with object oriented programming, 145 145 00:08:51,620 --> 00:08:54,780 because it's going to be a bit easier for these developers 146 146 00:08:54,780 --> 00:08:58,870 to start writing object oriented code in JavaScript. 147 147 00:08:58,870 --> 00:09:00,850 Now, if you're one of these developers, 148 148 00:09:00,850 --> 00:09:03,920 then please make sure that before just starting 149 149 00:09:03,920 --> 00:09:06,670 to use classes, you really truly understand 150 150 00:09:06,670 --> 00:09:09,480 function constructors and to prototype 151 151 00:09:09,480 --> 00:09:12,530 and to hold prototype chain logic. 152 152 00:09:12,530 --> 00:09:14,870 Now, to finish, I just need to say 153 153 00:09:14,870 --> 00:09:17,300 a couple of more things about classes 154 154 00:09:17,300 --> 00:09:20,210 that are important to keep in mind. 155 155 00:09:20,210 --> 00:09:22,723 So first, classes are not hoisted. 156 156 00:09:24,300 --> 00:09:27,550 So first, let's scroll a bit here. 157 157 00:09:27,550 --> 00:09:30,850 Classes are not hoisted, 158 158 00:09:30,850 --> 00:09:34,310 and so even if they are class declarations. 159 159 00:09:34,310 --> 00:09:37,490 So function declarations, remember are hoisted, 160 160 00:09:37,490 --> 00:09:39,000 which means we can use them 161 161 00:09:39,000 --> 00:09:41,750 before they are declared in the code. 162 162 00:09:41,750 --> 00:09:43,893 But with classes, that doesn't work. 163 163 00:09:44,760 --> 00:09:47,720 Second, just like functions, 164 164 00:09:47,720 --> 00:09:50,873 classes are also first class citizens. 165 165 00:09:52,940 --> 00:09:56,360 First class citizens, 166 166 00:09:56,360 --> 00:09:59,040 and so what that means, is that we can pass them 167 167 00:09:59,040 --> 00:10:03,170 into functions and also return them from functions. 168 168 00:10:03,170 --> 00:10:05,000 And as I mentioned before, 169 169 00:10:05,000 --> 00:10:06,930 that is because classes are really 170 170 00:10:06,930 --> 00:10:10,113 just a special kind of function behind the scenes. 171 171 00:10:11,770 --> 00:10:14,470 And third, the body of a class 172 172 00:10:14,470 --> 00:10:17,740 is always executed in strict mode. 173 173 00:10:17,740 --> 00:10:22,740 Classes are executed in strict mode. 174 174 00:10:23,110 --> 00:10:26,950 And so even if we didn't activate it for our entire script, 175 175 00:10:26,950 --> 00:10:29,310 all the code that is in the class 176 176 00:10:29,310 --> 00:10:32,393 will be executed in strict mode. Am I right? 177 177 00:10:33,720 --> 00:10:35,370 So keep these points in mind 178 178 00:10:35,370 --> 00:10:37,393 if you want to work with classes. 179 179 00:10:38,330 --> 00:10:40,510 So, now at the end of this video, 180 180 00:10:40,510 --> 00:10:42,480 you might ask if you should use 181 181 00:10:42,480 --> 00:10:45,310 constructor functions like we have been doing, 182 182 00:10:45,310 --> 00:10:49,380 or if instead it's better to just use classes. 183 183 00:10:49,380 --> 00:10:52,420 And to first remark I want to do here is that 184 184 00:10:52,420 --> 00:10:55,850 constructor functions are not like old 185 185 00:10:55,850 --> 00:10:57,710 or deprecated syntax. 186 186 00:10:57,710 --> 00:11:01,590 So it's 100% fine to keep using them. 187 187 00:11:01,590 --> 00:11:03,430 So one more time, this is more, 188 188 00:11:03,430 --> 00:11:06,050 a question of personal preference. 189 189 00:11:06,050 --> 00:11:08,850 Now, if you're asking, if you should use classes 190 190 00:11:08,850 --> 00:11:12,290 without understanding prototypal inheritance, 191 191 00:11:12,290 --> 00:11:15,793 well then, the reply is definitely no. 192 192 00:11:16,690 --> 00:11:20,700 Now, some people actually say that classes are really bad 193 193 00:11:20,700 --> 00:11:24,760 in general and that no one should ever be using them 194 194 00:11:24,760 --> 00:11:28,550 simply because they hide the true nature of JavaScript. 195 195 00:11:28,550 --> 00:11:30,830 But I actually don't agree with that. 196 196 00:11:30,830 --> 00:11:32,720 And I think it's absolutely okay 197 197 00:11:32,720 --> 00:11:35,080 to use classes in your code, 198 198 00:11:35,080 --> 00:11:38,680 as long as you understand everything that I just showed you 199 199 00:11:38,680 --> 00:11:43,570 previously about the prototype and prototypal inheritance. 200 200 00:11:43,570 --> 00:11:47,380 So you cannot just skip that part because you want to become 201 201 00:11:47,380 --> 00:11:50,500 an expert in JavaScript, right? 202 202 00:11:50,500 --> 00:11:52,470 And you also want to feel comfortable 203 203 00:11:52,470 --> 00:11:55,750 while writing your code and that essentially means 204 204 00:11:55,750 --> 00:11:59,340 to understand exactly what your code does. 205 205 00:11:59,340 --> 00:12:01,500 So that's super important too. 206 206 00:12:01,500 --> 00:12:05,100 And so if you want to be confident, you need to understand. 207 207 00:12:05,100 --> 00:12:08,990 And so that's also the whole reason why all over the course, 208 208 00:12:08,990 --> 00:12:11,460 I am going into such deep detail 209 209 00:12:11,460 --> 00:12:15,050 into how everything works in JavaScript. 210 210 00:12:15,050 --> 00:12:17,810 Now, what I personally like about classes 211 211 00:12:17,810 --> 00:12:20,370 is that they visually put all the code 212 212 00:12:20,370 --> 00:12:22,193 that belongs to a certain class. 213 213 00:12:23,210 --> 00:12:27,530 So like all the data here and all the behavior, 214 214 00:12:27,530 --> 00:12:30,723 all into one nice code blog like this. 215 215 00:12:31,570 --> 00:12:34,660 With function constructors, in my opinion, 216 216 00:12:34,660 --> 00:12:38,060 it all looks just like a big mess. 217 217 00:12:38,060 --> 00:12:41,030 So like this, I mean, in this case, 218 218 00:12:41,030 --> 00:12:43,070 it's just a little bit of code, 219 219 00:12:43,070 --> 00:12:46,060 but this can get out of hand pretty quick. 220 220 00:12:46,060 --> 00:12:47,570 And in these situations, 221 221 00:12:47,570 --> 00:12:52,360 I think that this actually looks at least a lot better, 222 222 00:12:52,360 --> 00:12:55,650 but of course, that is just my personal opinion. 223 223 00:12:55,650 --> 00:12:59,230 What matters is that you start thinking about this yourself 224 224 00:12:59,230 --> 00:13:01,060 and take your own decisions 225 225 00:13:01,060 --> 00:13:03,853 based on what I'm explaining in these videos. 19939