WEBVTT 1 00:00:01.220 --> 00:00:04.690 Let's now immediately apply what you just learnt, 2 00:00:04.690 --> 00:00:06.963 here in coding challenge number three. 3 00:00:08.800 --> 00:00:09.910 And in this one, 4 00:00:09.910 --> 00:00:12.570 I want you to use a constructor function, 5 00:00:12.570 --> 00:00:15.610 to implement an electric Car class. 6 00:00:15.610 --> 00:00:18.400 So a class that should be called EV 7 00:00:18.400 --> 00:00:22.580 and that will be a CHILD class of the Car class 8 00:00:22.580 --> 00:00:25.930 that we created in the first challenge. 9 00:00:25.930 --> 00:00:29.590 So in the first challenge you used a constructor function 10 00:00:29.590 --> 00:00:31.460 to create the Car 11 00:00:31.460 --> 00:00:33.930 and now here you're gonna use the same technique 12 00:00:33.930 --> 00:00:36.480 to create the sub-class 13 00:00:36.480 --> 00:00:41.390 So basically the child class called EV, okay? 14 00:00:41.390 --> 00:00:45.800 Now the EV, which stands for Electric Vehicle by the way, 15 00:00:45.800 --> 00:00:49.280 also has a make and a current speed of course, 16 00:00:49.280 --> 00:00:53.063 but it also has a current battery charge in percentage. 17 00:00:53.940 --> 00:00:56.620 And so that's here the charge property. 18 00:00:56.620 --> 00:00:59.850 And so here in order to implement this child class, 19 00:00:59.850 --> 00:01:03.580 you will have to do exactly what we did in the last video. 20 00:01:03.580 --> 00:01:06.250 So basically connecting the two prototypes 21 00:01:06.250 --> 00:01:09.080 of these two constructors. 22 00:01:09.080 --> 00:01:10.960 Then on the EV class, 23 00:01:10.960 --> 00:01:14.270 I want you to implement a charge battery method, 24 00:01:14.270 --> 00:01:17.770 which takes into argument called chargeTo. 25 00:01:17.770 --> 00:01:20.770 And then that simply set the charge of the battery 26 00:01:20.770 --> 00:01:23.140 to that received value. 27 00:01:23.140 --> 00:01:25.050 Then also on this class, 28 00:01:25.050 --> 00:01:28.220 I want you to implement an accelerate method 29 00:01:28.220 --> 00:01:31.750 which will increase the Car speed by 20. 30 00:01:31.750 --> 00:01:33.340 And at the same time, 31 00:01:33.340 --> 00:01:37.190 it will also decrease the charge by 1%. 32 00:01:37.190 --> 00:01:38.610 And finally, this method 33 00:01:38.610 --> 00:01:42.730 should also print to the console message like this. 34 00:01:42.730 --> 00:01:46.210 So the Tesla is going at 140 kilometers per hour 35 00:01:46.210 --> 00:01:49.290 with a charge of 22%. 36 00:01:49.290 --> 00:01:51.280 And that's Tesla here 37 00:01:51.280 --> 00:01:54.700 because that's the test data that you're going to use here. 38 00:01:54.700 --> 00:01:58.480 So create an object based on this test data here, 39 00:01:58.480 --> 00:02:00.980 and then just like before experiment, 40 00:02:00.980 --> 00:02:04.797 a little bit with the accelerate and to break, 41 00:02:04.797 --> 00:02:07.343 and also the chargeBattery methods. 42 00:02:08.240 --> 00:02:10.750 And one important thing that I want you to do, 43 00:02:10.750 --> 00:02:12.520 is to notice what happens 44 00:02:12.520 --> 00:02:13.853 when you accelerate. 45 00:02:15.080 --> 00:02:16.220 All right? 46 00:02:16.220 --> 00:02:19.060 So review the definition of polymorphism 47 00:02:19.060 --> 00:02:21.650 that I gave you right in the first video 48 00:02:21.650 --> 00:02:24.880 of the section to make sense of this. 49 00:02:24.880 --> 00:02:28.550 So I hope that this is another fun challenge 50 00:02:28.550 --> 00:02:31.333 and I see you here once you're finished. 51 00:02:35.430 --> 00:02:36.263 Okay. 52 00:02:38.000 --> 00:02:43.000 So let me start by getting the code that we wrote 53 00:02:43.310 --> 00:02:44.733 in the first challenge. 54 00:02:46.798 --> 00:02:49.823 So of course there is no need to write it again. 55 00:02:51.250 --> 00:02:53.320 And so here goes my solution, 56 00:02:53.320 --> 00:02:55.530 which I hope you didn't need, 57 00:02:55.530 --> 00:02:57.623 but of course it's always good to know, 58 00:02:58.870 --> 00:03:00.713 how exactly I implemented it. 59 00:03:02.250 --> 00:03:04.583 So EV is this function, 60 00:03:05.490 --> 00:03:07.210 which has the same parameters 61 00:03:07.210 --> 00:03:09.580 as the Car constructor. 62 00:03:09.580 --> 00:03:12.560 So that's the make and the speed, 63 00:03:12.560 --> 00:03:15.773 but then the additional property of charge. 64 00:03:18.870 --> 00:03:21.460 And so now just like we did previously, 65 00:03:21.460 --> 00:03:25.730 we will not manually define the make and speed properties 66 00:03:25.730 --> 00:03:27.140 on the disc keyword, 67 00:03:27.140 --> 00:03:30.756 but instead we will basically call the parent class. 68 00:03:30.756 --> 00:03:34.090 And so that's Car.call 69 00:03:34.090 --> 00:03:36.229 but with the disc keywords 70 00:03:36.229 --> 00:03:38.893 that we are actually using in the EV. 71 00:03:39.770 --> 00:03:42.050 So we pass, make and speed. 72 00:03:42.050 --> 00:03:43.350 And so again, 73 00:03:43.350 --> 00:03:45.390 this is exactly what we learned 74 00:03:45.390 --> 00:03:47.400 in the previous lecture. 75 00:03:47.400 --> 00:03:48.233 And then of course, 76 00:03:48.233 --> 00:03:51.063 we need to still set the speed. 77 00:03:53.900 --> 00:03:58.780 Now let's actually create the new Car here. 78 00:03:58.780 --> 00:04:00.650 So the new object, 79 00:04:00.650 --> 00:04:05.414 so that's a new EV Tesla going at 120 80 00:04:05.414 --> 00:04:10.153 and a charge should start at 23%. 81 00:04:11.730 --> 00:04:13.823 Okay, let's take a look here. 82 00:04:15.030 --> 00:04:17.830 And the charge is not in there. 83 00:04:17.830 --> 00:04:18.870 Oh yeah. 84 00:04:18.870 --> 00:04:22.110 That's pretty stupid mistake here. 85 00:04:22.110 --> 00:04:24.833 So of course that's got to be the charge. 86 00:04:29.310 --> 00:04:31.163 And so now it's all there. 87 00:04:32.260 --> 00:04:35.710 Okay, so that was the easy part. 88 00:04:35.710 --> 00:04:37.630 Now comes the trickiest part, 89 00:04:37.630 --> 00:04:40.973 which is to again link the prototypes. 90 00:04:43.060 --> 00:04:47.100 So we want the prototype property of EV 91 00:04:47.100 --> 00:04:50.673 to inherit from the prototype property of Car. 92 00:04:51.750 --> 00:04:56.440 And so therefore we say Object.create, 93 00:04:56.440 --> 00:04:58.660 which will create a new object. 94 00:04:58.660 --> 00:05:02.100 So it will set EV.prototype to the new object, 95 00:05:02.100 --> 00:05:07.100 which has as a prototype Car.prototype. 96 00:05:09.300 --> 00:05:10.750 Great. 97 00:05:10.750 --> 00:05:13.750 And so now let's actually add some methods 98 00:05:13.750 --> 00:05:16.719 to the prototype of EV. 99 00:05:16.719 --> 00:05:20.623 So EV.prototype.chargeBattery. 100 00:05:24.860 --> 00:05:28.183 And this one is a function which takes in chargeTo. 101 00:05:32.500 --> 00:05:35.780 And all it does is to set the charge 102 00:05:35.780 --> 00:05:39.463 to the charge that we receive here. 103 00:05:40.690 --> 00:05:41.870 All right. 104 00:05:41.870 --> 00:05:43.883 So let's experiment with this one. 105 00:05:44.790 --> 00:05:47.750 So tesla.charge battery 106 00:05:48.760 --> 00:05:49.593 to 90. 107 00:05:50.710 --> 00:05:54.313 And so now if we take a look at Tesla here, 108 00:05:56.710 --> 00:05:59.763 it indeed now has the charge set to 90. 109 00:06:01.640 --> 00:06:03.090 All right. 110 00:06:03.090 --> 00:06:05.130 Now let's take a quick look actually here 111 00:06:05.130 --> 00:06:06.483 at a prototype chain. 112 00:06:07.440 --> 00:06:09.820 So let's see the prototype here. 113 00:06:09.820 --> 00:06:13.950 And so that of course now includes chargedBattery. 114 00:06:13.950 --> 00:06:14.840 Okay. 115 00:06:14.840 --> 00:06:16.460 And that in turn, 116 00:06:16.460 --> 00:06:19.610 will contain accelerate and brake, 117 00:06:19.610 --> 00:06:20.540 which is the one 118 00:06:20.540 --> 00:06:21.980 coming from the Car. 119 00:06:21.980 --> 00:06:23.173 And so one more time, 120 00:06:23.173 --> 00:06:24.850 this is exactly what we had 121 00:06:24.850 --> 00:06:26.630 in a previous lecture. 122 00:06:26.630 --> 00:06:29.460 So we had to de introduce and a prototype 123 00:06:29.460 --> 00:06:33.130 of the students and then into prototype of the prototype, 124 00:06:33.130 --> 00:06:35.540 we had to decal each method. 125 00:06:35.540 --> 00:06:38.293 And so here that is accelerate and break. 126 00:06:39.610 --> 00:06:42.253 And so of course we can now use that here. 127 00:06:43.550 --> 00:06:47.870 So we can say tesla.brake, 128 00:06:47.870 --> 00:06:50.520 and then through the prototype chain, 129 00:06:50.520 --> 00:06:53.830 the Tesla object will have access to that. 130 00:06:53.830 --> 00:06:58.163 And so indeed now it is going at 115 kilometers per hour. 131 00:07:00.830 --> 00:07:01.663 Okay. 132 00:07:01.663 --> 00:07:03.800 But now let's take Care of number three here, 133 00:07:03.800 --> 00:07:06.593 which is to implement an accelerate method. 134 00:07:08.780 --> 00:07:12.880 So let's do that after the charge battery. 135 00:07:12.880 --> 00:07:17.483 So EV.prototype.accelerate. 136 00:07:22.920 --> 00:07:24.590 And this one will set the speed 137 00:07:25.490 --> 00:07:28.400 to a plus 20. 138 00:07:28.400 --> 00:07:31.030 So it will increase it by 20 139 00:07:31.030 --> 00:07:34.633 and it should decrease the charge by 1%, remember. 140 00:07:35.810 --> 00:07:37.750 So just like this, 141 00:07:37.750 --> 00:07:40.003 and then we should also log a console. 142 00:07:41.720 --> 00:07:43.960 So a string to the console, 143 00:07:43.960 --> 00:07:46.810 similar to this one that we had before. 144 00:07:46.810 --> 00:07:48.400 So it's going at the speed 145 00:07:48.400 --> 00:07:50.093 and then with a charge of, 146 00:07:54.330 --> 00:07:56.923 and then this.charge. 147 00:07:59.030 --> 00:08:03.170 Okay, So let's call that right after the break.accelerate, 148 00:08:05.440 --> 00:08:08.077 and let's see what happens now. 149 00:08:08.077 --> 00:08:10.790 And it worked just fine. 150 00:08:10.790 --> 00:08:12.670 So we increased by 20 151 00:08:12.670 --> 00:08:16.350 and a charge decreased indeed by a one. 152 00:08:16.350 --> 00:08:19.800 So indeed it was this accelerate method here, 153 00:08:19.800 --> 00:08:21.630 that was used. 154 00:08:21.630 --> 00:08:23.480 And that's important to notice 155 00:08:23.480 --> 00:08:28.237 because the Car itself also has an accelerate method, right? 156 00:08:29.690 --> 00:08:31.673 So we can see that here as well. 157 00:08:32.510 --> 00:08:35.080 So in the prototype of the Tesla, 158 00:08:35.080 --> 00:08:37.320 we now have accelerate, 159 00:08:37.320 --> 00:08:40.036 but in a prototype of that itself. 160 00:08:40.036 --> 00:08:43.100 And so that's gonna be the prototype of Car. 161 00:08:43.100 --> 00:08:46.420 We also have accelerate, right? 162 00:08:46.420 --> 00:08:50.070 But JavaScript of course used to first one. 163 00:08:50.070 --> 00:08:51.780 So when there are two methods 164 00:08:51.780 --> 00:08:55.470 or properties with the same name in a prototype chain, 165 00:08:55.470 --> 00:08:57.750 then the first one that appears in the chain 166 00:08:57.750 --> 00:08:59.830 is the one that's gonna be used. 167 00:08:59.830 --> 00:09:03.120 So the same is true also for the scope chain. 168 00:09:03.120 --> 00:09:05.813 And this is the behavior that makes sense. 169 00:09:06.750 --> 00:09:09.720 So with is basically a child class 170 00:09:09.720 --> 00:09:11.860 can overwrite a method 171 00:09:11.860 --> 00:09:14.820 that inherited from the parent class. 172 00:09:14.820 --> 00:09:17.260 So if we didn't create 173 00:09:17.260 --> 00:09:19.460 this accelerate method here, 174 00:09:19.460 --> 00:09:22.180 then this would still work, right? 175 00:09:22.180 --> 00:09:24.820 Because then the Tesla would simply inherit 176 00:09:24.820 --> 00:09:27.752 the accelerate method from the Car. 177 00:09:27.752 --> 00:09:29.150 Right? 178 00:09:29.150 --> 00:09:31.720 Of course, now this wouldn't manipulate a charge. 179 00:09:31.720 --> 00:09:34.780 It would simply increase the speed by 10, 180 00:09:34.780 --> 00:09:36.000 but it would work 181 00:09:36.000 --> 00:09:39.100 because it can still find the accelerate method 182 00:09:39.100 --> 00:09:40.463 in the prototype chain. 183 00:09:41.410 --> 00:09:43.003 But now as we have this, 184 00:09:44.090 --> 00:09:47.820 then this accelerate method will override the one 185 00:09:47.820 --> 00:09:49.620 from the parent class. 186 00:09:49.620 --> 00:09:52.690 And remember that this is exactly the definition 187 00:09:52.690 --> 00:09:56.010 of polymorphism that We talked about at the beginning 188 00:09:56.010 --> 00:09:57.450 of the section. 189 00:09:57.450 --> 00:10:00.360 And it might seem obvious that it works this way, 190 00:10:00.360 --> 00:10:02.870 but it's still good to remind ourselves 191 00:10:02.870 --> 00:10:05.070 that we can actually do this. 192 00:10:05.070 --> 00:10:06.040 Okay. 193 00:10:06.040 --> 00:10:09.182 And, by that we finished yet another coding challenge. 194 00:10:09.182 --> 00:10:11.840 And I hope that now it's really clear, 195 00:10:11.840 --> 00:10:14.140 how we can have one class inherit 196 00:10:14.140 --> 00:10:17.720 from another class using constructor functions. 197 00:10:17.720 --> 00:10:21.800 And also of course the Object.create function, 198 00:10:21.800 --> 00:10:22.997 because without it, 199 00:10:22.997 --> 00:10:25.940 this would be completely impossible. 200 00:10:25.940 --> 00:10:29.500 So great job of doing one more coding challenge. 201 00:10:29.500 --> 00:10:32.120 Next up, we will see how we can implement 202 00:10:32.120 --> 00:10:35.433 the exact same thing using ES6 classes.