Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,220 --> 00:00:04,690 Let's now immediately apply what you just learnt, 2 2 00:00:04,690 --> 00:00:06,963 here in coding challenge number three. 3 3 00:00:08,800 --> 00:00:09,910 And in this one, 4 4 00:00:09,910 --> 00:00:12,570 I want you to use a constructor function, 5 5 00:00:12,570 --> 00:00:15,610 to implement an electric Car class. 6 6 00:00:15,610 --> 00:00:18,400 So a class that should be called EV 7 7 00:00:18,400 --> 00:00:22,580 and that will be a CHILD class of the Car class 8 8 00:00:22,580 --> 00:00:25,930 that we created in the first challenge. 9 9 00:00:25,930 --> 00:00:29,590 So in the first challenge you used a constructor function 10 10 00:00:29,590 --> 00:00:31,460 to create the Car 11 11 00:00:31,460 --> 00:00:33,930 and now here you're gonna use the same technique 12 12 00:00:33,930 --> 00:00:36,480 to create the sub-class 13 13 00:00:36,480 --> 00:00:41,390 So basically the child class called EV, okay? 14 14 00:00:41,390 --> 00:00:45,800 Now the EV, which stands for Electric Vehicle by the way, 15 15 00:00:45,800 --> 00:00:49,280 also has a make and a current speed of course, 16 16 00:00:49,280 --> 00:00:53,063 but it also has a current battery charge in percentage. 17 17 00:00:53,940 --> 00:00:56,620 And so that's here the charge property. 18 18 00:00:56,620 --> 00:00:59,850 And so here in order to implement this child class, 19 19 00:00:59,850 --> 00:01:03,580 you will have to do exactly what we did in the last video. 20 20 00:01:03,580 --> 00:01:06,250 So basically connecting the two prototypes 21 21 00:01:06,250 --> 00:01:09,080 of these two constructors. 22 22 00:01:09,080 --> 00:01:10,960 Then on the EV class, 23 23 00:01:10,960 --> 00:01:14,270 I want you to implement a charge battery method, 24 24 00:01:14,270 --> 00:01:17,770 which takes into argument called chargeTo. 25 25 00:01:17,770 --> 00:01:20,770 And then that simply set the charge of the battery 26 26 00:01:20,770 --> 00:01:23,140 to that received value. 27 27 00:01:23,140 --> 00:01:25,050 Then also on this class, 28 28 00:01:25,050 --> 00:01:28,220 I want you to implement an accelerate method 29 29 00:01:28,220 --> 00:01:31,750 which will increase the Car speed by 20. 30 30 00:01:31,750 --> 00:01:33,340 And at the same time, 31 31 00:01:33,340 --> 00:01:37,190 it will also decrease the charge by 1%. 32 32 00:01:37,190 --> 00:01:38,610 And finally, this method 33 33 00:01:38,610 --> 00:01:42,730 should also print to the console message like this. 34 34 00:01:42,730 --> 00:01:46,210 So the Tesla is going at 140 kilometers per hour 35 35 00:01:46,210 --> 00:01:49,290 with a charge of 22%. 36 36 00:01:49,290 --> 00:01:51,280 And that's Tesla here 37 37 00:01:51,280 --> 00:01:54,700 because that's the test data that you're going to use here. 38 38 00:01:54,700 --> 00:01:58,480 So create an object based on this test data here, 39 39 00:01:58,480 --> 00:02:00,980 and then just like before experiment, 40 40 00:02:00,980 --> 00:02:04,797 a little bit with the accelerate and to break, 41 41 00:02:04,797 --> 00:02:07,343 and also the chargeBattery methods. 42 42 00:02:08,240 --> 00:02:10,750 And one important thing that I want you to do, 43 43 00:02:10,750 --> 00:02:12,520 is to notice what happens 44 44 00:02:12,520 --> 00:02:13,853 when you accelerate. 45 45 00:02:15,080 --> 00:02:16,220 All right? 46 46 00:02:16,220 --> 00:02:19,060 So review the definition of polymorphism 47 47 00:02:19,060 --> 00:02:21,650 that I gave you right in the first video 48 48 00:02:21,650 --> 00:02:24,880 of the section to make sense of this. 49 49 00:02:24,880 --> 00:02:28,550 So I hope that this is another fun challenge 50 50 00:02:28,550 --> 00:02:31,333 and I see you here once you're finished. 51 51 00:02:35,430 --> 00:02:36,263 Okay. 52 52 00:02:38,000 --> 00:02:43,000 So let me start by getting the code that we wrote 53 53 00:02:43,310 --> 00:02:44,733 in the first challenge. 54 54 00:02:46,798 --> 00:02:49,823 So of course there is no need to write it again. 55 55 00:02:51,250 --> 00:02:53,320 And so here goes my solution, 56 56 00:02:53,320 --> 00:02:55,530 which I hope you didn't need, 57 57 00:02:55,530 --> 00:02:57,623 but of course it's always good to know, 58 58 00:02:58,870 --> 00:03:00,713 how exactly I implemented it. 59 59 00:03:02,250 --> 00:03:04,583 So EV is this function, 60 60 00:03:05,490 --> 00:03:07,210 which has the same parameters 61 61 00:03:07,210 --> 00:03:09,580 as the Car constructor. 62 62 00:03:09,580 --> 00:03:12,560 So that's the make and the speed, 63 63 00:03:12,560 --> 00:03:15,773 but then the additional property of charge. 64 64 00:03:18,870 --> 00:03:21,460 And so now just like we did previously, 65 65 00:03:21,460 --> 00:03:25,730 we will not manually define the make and speed properties 66 66 00:03:25,730 --> 00:03:27,140 on the disc keyword, 67 67 00:03:27,140 --> 00:03:30,756 but instead we will basically call the parent class. 68 68 00:03:30,756 --> 00:03:34,090 And so that's Car.call 69 69 00:03:34,090 --> 00:03:36,229 but with the disc keywords 70 70 00:03:36,229 --> 00:03:38,893 that we are actually using in the EV. 71 71 00:03:39,770 --> 00:03:42,050 So we pass, make and speed. 72 72 00:03:42,050 --> 00:03:43,350 And so again, 73 73 00:03:43,350 --> 00:03:45,390 this is exactly what we learned 74 74 00:03:45,390 --> 00:03:47,400 in the previous lecture. 75 75 00:03:47,400 --> 00:03:48,233 And then of course, 76 76 00:03:48,233 --> 00:03:51,063 we need to still set the speed. 77 77 00:03:53,900 --> 00:03:58,780 Now let's actually create the new Car here. 78 78 00:03:58,780 --> 00:04:00,650 So the new object, 79 79 00:04:00,650 --> 00:04:05,414 so that's a new EV Tesla going at 120 80 80 00:04:05,414 --> 00:04:10,153 and a charge should start at 23%. 81 81 00:04:11,730 --> 00:04:13,823 Okay, let's take a look here. 82 82 00:04:15,030 --> 00:04:17,830 And the charge is not in there. 83 83 00:04:17,830 --> 00:04:18,870 Oh yeah. 84 84 00:04:18,870 --> 00:04:22,110 That's pretty stupid mistake here. 85 85 00:04:22,110 --> 00:04:24,833 So of course that's got to be the charge. 86 86 00:04:29,310 --> 00:04:31,163 And so now it's all there. 87 87 00:04:32,260 --> 00:04:35,710 Okay, so that was the easy part. 88 88 00:04:35,710 --> 00:04:37,630 Now comes the trickiest part, 89 89 00:04:37,630 --> 00:04:40,973 which is to again link the prototypes. 90 90 00:04:43,060 --> 00:04:47,100 So we want the prototype property of EV 91 91 00:04:47,100 --> 00:04:50,673 to inherit from the prototype property of Car. 92 92 00:04:51,750 --> 00:04:56,440 And so therefore we say Object.create, 93 93 00:04:56,440 --> 00:04:58,660 which will create a new object. 94 94 00:04:58,660 --> 00:05:02,100 So it will set EV.prototype to the new object, 95 95 00:05:02,100 --> 00:05:07,100 which has as a prototype Car.prototype. 96 96 00:05:09,300 --> 00:05:10,750 Great. 97 97 00:05:10,750 --> 00:05:13,750 And so now let's actually add some methods 98 98 00:05:13,750 --> 00:05:16,719 to the prototype of EV. 99 99 00:05:16,719 --> 00:05:20,623 So EV.prototype.chargeBattery. 100 100 00:05:24,860 --> 00:05:28,183 And this one is a function which takes in chargeTo. 101 101 00:05:32,500 --> 00:05:35,780 And all it does is to set the charge 102 102 00:05:35,780 --> 00:05:39,463 to the charge that we receive here. 103 103 00:05:40,690 --> 00:05:41,870 All right. 104 104 00:05:41,870 --> 00:05:43,883 So let's experiment with this one. 105 105 00:05:44,790 --> 00:05:47,750 So tesla.charge battery 106 106 00:05:48,760 --> 00:05:49,593 to 90. 107 107 00:05:50,710 --> 00:05:54,313 And so now if we take a look at Tesla here, 108 108 00:05:56,710 --> 00:05:59,763 it indeed now has the charge set to 90. 109 109 00:06:01,640 --> 00:06:03,090 All right. 110 110 00:06:03,090 --> 00:06:05,130 Now let's take a quick look actually here 111 111 00:06:05,130 --> 00:06:06,483 at a prototype chain. 112 112 00:06:07,440 --> 00:06:09,820 So let's see the prototype here. 113 113 00:06:09,820 --> 00:06:13,950 And so that of course now includes chargedBattery. 114 114 00:06:13,950 --> 00:06:14,840 Okay. 115 115 00:06:14,840 --> 00:06:16,460 And that in turn, 116 116 00:06:16,460 --> 00:06:19,610 will contain accelerate and brake, 117 117 00:06:19,610 --> 00:06:20,540 which is the one 118 118 00:06:20,540 --> 00:06:21,980 coming from the Car. 119 119 00:06:21,980 --> 00:06:23,173 And so one more time, 120 120 00:06:23,173 --> 00:06:24,850 this is exactly what we had 121 121 00:06:24,850 --> 00:06:26,630 in a previous lecture. 122 122 00:06:26,630 --> 00:06:29,460 So we had to de introduce and a prototype 123 123 00:06:29,460 --> 00:06:33,130 of the students and then into prototype of the prototype, 124 124 00:06:33,130 --> 00:06:35,540 we had to decal each method. 125 125 00:06:35,540 --> 00:06:38,293 And so here that is accelerate and break. 126 126 00:06:39,610 --> 00:06:42,253 And so of course we can now use that here. 127 127 00:06:43,550 --> 00:06:47,870 So we can say tesla.brake, 128 128 00:06:47,870 --> 00:06:50,520 and then through the prototype chain, 129 129 00:06:50,520 --> 00:06:53,830 the Tesla object will have access to that. 130 130 00:06:53,830 --> 00:06:58,163 And so indeed now it is going at 115 kilometers per hour. 131 131 00:07:00,830 --> 00:07:01,663 Okay. 132 132 00:07:01,663 --> 00:07:03,800 But now let's take Care of number three here, 133 133 00:07:03,800 --> 00:07:06,593 which is to implement an accelerate method. 134 134 00:07:08,780 --> 00:07:12,880 So let's do that after the charge battery. 135 135 00:07:12,880 --> 00:07:17,483 So EV.prototype.accelerate. 136 136 00:07:22,920 --> 00:07:24,590 And this one will set the speed 137 137 00:07:25,490 --> 00:07:28,400 to a plus 20. 138 138 00:07:28,400 --> 00:07:31,030 So it will increase it by 20 139 139 00:07:31,030 --> 00:07:34,633 and it should decrease the charge by 1%, remember. 140 140 00:07:35,810 --> 00:07:37,750 So just like this, 141 141 00:07:37,750 --> 00:07:40,003 and then we should also log a console. 142 142 00:07:41,720 --> 00:07:43,960 So a string to the console, 143 143 00:07:43,960 --> 00:07:46,810 similar to this one that we had before. 144 144 00:07:46,810 --> 00:07:48,400 So it's going at the speed 145 145 00:07:48,400 --> 00:07:50,093 and then with a charge of, 146 146 00:07:54,330 --> 00:07:56,923 and then this.charge. 147 147 00:07:59,030 --> 00:08:03,170 Okay, So let's call that right after the break.accelerate, 148 148 00:08:05,440 --> 00:08:08,077 and let's see what happens now. 149 149 00:08:08,077 --> 00:08:10,790 And it worked just fine. 150 150 00:08:10,790 --> 00:08:12,670 So we increased by 20 151 151 00:08:12,670 --> 00:08:16,350 and a charge decreased indeed by a one. 152 152 00:08:16,350 --> 00:08:19,800 So indeed it was this accelerate method here, 153 153 00:08:19,800 --> 00:08:21,630 that was used. 154 154 00:08:21,630 --> 00:08:23,480 And that's important to notice 155 155 00:08:23,480 --> 00:08:28,237 because the Car itself also has an accelerate method, right? 156 156 00:08:29,690 --> 00:08:31,673 So we can see that here as well. 157 157 00:08:32,510 --> 00:08:35,080 So in the prototype of the Tesla, 158 158 00:08:35,080 --> 00:08:37,320 we now have accelerate, 159 159 00:08:37,320 --> 00:08:40,036 but in a prototype of that itself. 160 160 00:08:40,036 --> 00:08:43,100 And so that's gonna be the prototype of Car. 161 161 00:08:43,100 --> 00:08:46,420 We also have accelerate, right? 162 162 00:08:46,420 --> 00:08:50,070 But JavaScript of course used to first one. 163 163 00:08:50,070 --> 00:08:51,780 So when there are two methods 164 164 00:08:51,780 --> 00:08:55,470 or properties with the same name in a prototype chain, 165 165 00:08:55,470 --> 00:08:57,750 then the first one that appears in the chain 166 166 00:08:57,750 --> 00:08:59,830 is the one that's gonna be used. 167 167 00:08:59,830 --> 00:09:03,120 So the same is true also for the scope chain. 168 168 00:09:03,120 --> 00:09:05,813 And this is the behavior that makes sense. 169 169 00:09:06,750 --> 00:09:09,720 So with is basically a child class 170 170 00:09:09,720 --> 00:09:11,860 can overwrite a method 171 171 00:09:11,860 --> 00:09:14,820 that inherited from the parent class. 172 172 00:09:14,820 --> 00:09:17,260 So if we didn't create 173 173 00:09:17,260 --> 00:09:19,460 this accelerate method here, 174 174 00:09:19,460 --> 00:09:22,180 then this would still work, right? 175 175 00:09:22,180 --> 00:09:24,820 Because then the Tesla would simply inherit 176 176 00:09:24,820 --> 00:09:27,752 the accelerate method from the Car. 177 177 00:09:27,752 --> 00:09:29,150 Right? 178 178 00:09:29,150 --> 00:09:31,720 Of course, now this wouldn't manipulate a charge. 179 179 00:09:31,720 --> 00:09:34,780 It would simply increase the speed by 10, 180 180 00:09:34,780 --> 00:09:36,000 but it would work 181 181 00:09:36,000 --> 00:09:39,100 because it can still find the accelerate method 182 182 00:09:39,100 --> 00:09:40,463 in the prototype chain. 183 183 00:09:41,410 --> 00:09:43,003 But now as we have this, 184 184 00:09:44,090 --> 00:09:47,820 then this accelerate method will override the one 185 185 00:09:47,820 --> 00:09:49,620 from the parent class. 186 186 00:09:49,620 --> 00:09:52,690 And remember that this is exactly the definition 187 187 00:09:52,690 --> 00:09:56,010 of polymorphism that We talked about at the beginning 188 188 00:09:56,010 --> 00:09:57,450 of the section. 189 189 00:09:57,450 --> 00:10:00,360 And it might seem obvious that it works this way, 190 190 00:10:00,360 --> 00:10:02,870 but it's still good to remind ourselves 191 191 00:10:02,870 --> 00:10:05,070 that we can actually do this. 192 192 00:10:05,070 --> 00:10:06,040 Okay. 193 193 00:10:06,040 --> 00:10:09,182 And, by that we finished yet another coding challenge. 194 194 00:10:09,182 --> 00:10:11,840 And I hope that now it's really clear, 195 195 00:10:11,840 --> 00:10:14,140 how we can have one class inherit 196 196 00:10:14,140 --> 00:10:17,720 from another class using constructor functions. 197 197 00:10:17,720 --> 00:10:21,800 And also of course the Object.create function, 198 198 00:10:21,800 --> 00:10:22,997 because without it, 199 199 00:10:22,997 --> 00:10:25,940 this would be completely impossible. 200 200 00:10:25,940 --> 00:10:29,500 So great job of doing one more coding challenge. 201 201 00:10:29,500 --> 00:10:32,120 Next up, we will see how we can implement 202 202 00:10:32,120 --> 00:10:35,433 the exact same thing using ES6 classes. 16564