Original subtitles

1 1

Let's now immediately apply what you just learnt, 2

2

here in coding challenge number three. 3

3

And in this one, 4

4

I want you to use a constructor function, 5

5

to implement an electric Car class. 6

6

So a class that should be called EV 7

7

and that will be a CHILD class of the Car class 8

8

that we created in the first challenge. 9

9

So in the first challenge you used a constructor function 10

10

to create the Car 11

11

and now here you're gonna use the same technique 12

12

to create the sub-class 13

13

So basically the child class called EV, okay? 14

14

Now the EV, which stands for Electric Vehicle by the way, 15

15

also has a make and a current speed of course, 16

16

but it also has a current battery charge in percentage. 17

17

And so that's here the charge property. 18

18

And so here in order to implement this child class, 19

19

you will have to do exactly what we did in the last video. 20

20

So basically connecting the two prototypes 21

21

of these two constructors. 22

22

Then on the EV class, 23

23

I want you to implement a charge battery method, 24

24

which takes into argument called chargeTo. 25

25

And then that simply set the charge of the battery 26

26

to that received value. 27

27

Then also on this class, 28

28

I want you to implement an accelerate method 29

29

which will increase the Car speed by 20. 30

30

And at the same time, 31

31

it will also decrease the charge by 1%. 32

32

And finally, this method 33

33

should also print to the console message like this. 34

34

So the Tesla is going at 140 kilometers per hour 35

35

with a charge of 22%. 36

36

And that's Tesla here 37

37

because that's the test data that you're going to use here. 38

38

So create an object based on this test data here, 39

39

and then just like before experiment, 40

40

a little bit with the accelerate and to break, 41

41

and also the chargeBattery methods. 42

42

And one important thing that I want you to do, 43

43

is to notice what happens 44

44

when you accelerate. 45

45

All right? 46

46

So review the definition of polymorphism 47

47

that I gave you right in the first video 48

48

of the section to make sense of this. 49

49

So I hope that this is another fun challenge 50

50

and I see you here once you're finished. 51

51

Okay. 52

52

So let me start by getting the code that we wrote 53

53

in the first challenge. 54

54

So of course there is no need to write it again. 55

55

And so here goes my solution, 56

56

which I hope you didn't need, 57

57

but of course it's always good to know, 58

58

how exactly I implemented it. 59

59

So EV is this function, 60

60

which has the same parameters 61

61

as the Car constructor. 62

62

So that's the make and the speed, 63

63

but then the additional property of charge. 64

64

And so now just like we did previously, 65

65

we will not manually define the make and speed properties 66

66

on the disc keyword, 67

67

but instead we will basically call the parent class. 68

68

And so that's Car.call 69

69

but with the disc keywords 70

70

that we are actually using in the EV. 71

71

So we pass, make and speed. 72

72

And so again, 73

73

this is exactly what we learned 74

74

in the previous lecture. 75

75

And then of course, 76

76

we need to still set the speed. 77

77

Now let's actually create the new Car here. 78

78

So the new object, 79

79

so that's a new EV Tesla going at 120 80

80

and a charge should start at 23%. 81

81

Okay, let's take a look here. 82

82

And the charge is not in there. 83

83

Oh yeah. 84

84

That's pretty stupid mistake here. 85

85

So of course that's got to be the charge. 86

86

And so now it's all there. 87

87

Okay, so that was the easy part. 88

88

Now comes the trickiest part, 89

89

which is to again link the prototypes. 90

90

So we want the prototype property of EV 91

91

to inherit from the prototype property of Car. 92

92

And so therefore we say Object.create, 93

93

which will create a new object. 94

94

So it will set EV.prototype to the new object, 95

95

which has as a prototype Car.prototype. 96

96

Great. 97

97

And so now let's actually add some methods 98

98

to the prototype of EV. 99

99

So EV.prototype.chargeBattery. 100

100

And this one is a function which takes in chargeTo. 101

101

And all it does is to set the charge 102

102

to the charge that we receive here. 103

103

All right. 104

104

So let's experiment with this one. 105

105

So tesla.charge battery 106

106

to 90. 107

107

And so now if we take a look at Tesla here, 108

108

it indeed now has the charge set to 90. 109

109

All right. 110

110

Now let's take a quick look actually here 111

111

at a prototype chain. 112

112

So let's see the prototype here. 113

113

And so that of course now includes chargedBattery. 114

114

Okay. 115

115

And that in turn, 116

116

will contain accelerate and brake, 117

117

which is the one 118

118

coming from the Car. 119

119

And so one more time, 120

120

this is exactly what we had 121

121

in a previous lecture. 122

122

So we had to de introduce and a prototype 123

123

of the students and then into prototype of the prototype, 124

124

we had to decal each method. 125

125

And so here that is accelerate and break. 126

126

And so of course we can now use that here. 127

127

So we can say tesla.brake, 128

128

and then through the prototype chain, 129

129

the Tesla object will have access to that. 130

130

And so indeed now it is going at 115 kilometers per hour. 131

131

Okay. 132

132

But now let's take Care of number three here, 133

133

which is to implement an accelerate method. 134

134

So let's do that after the charge battery. 135

135

So EV.prototype.accelerate. 136

136

And this one will set the speed 137

137

to a plus 20. 138

138

So it will increase it by 20 139

139

and it should decrease the charge by 1%, remember. 140

140

So just like this, 141

141

and then we should also log a console. 142

142

So a string to the console, 143

143

similar to this one that we had before. 144

144

So it's going at the speed 145

145

and then with a charge of, 146

146

and then this.charge. 147

147

Okay, So let's call that right after the break.accelerate, 148

148

and let's see what happens now. 149

149

And it worked just fine. 150

150

So we increased by 20 151

151

and a charge decreased indeed by a one. 152

152

So indeed it was this accelerate method here, 153

153

that was used. 154

154

And that's important to notice 155

155

because the Car itself also has an accelerate method, right? 156

156

So we can see that here as well. 157

157

So in the prototype of the Tesla, 158

158

we now have accelerate, 159

159

but in a prototype of that itself. 160

160

And so that's gonna be the prototype of Car. 161

161

We also have accelerate, right? 162

162

But JavaScript of course used to first one. 163

163

So when there are two methods 164

164

or properties with the same name in a prototype chain, 165

165

then the first one that appears in the chain 166

166

is the one that's gonna be used. 167

167

So the same is true also for the scope chain. 168

168

And this is the behavior that makes sense. 169

169

So with is basically a child class 170

170

can overwrite a method 171

171

that inherited from the parent class. 172

172

So if we didn't create 173

173

this accelerate method here, 174

174

then this would still work, right? 175

175

Because then the Tesla would simply inherit 176

176

the accelerate method from the Car. 177

177

Right? 178

178

Of course, now this wouldn't manipulate a charge. 179

179

It would simply increase the speed by 10, 180

180

but it would work 181

181

because it can still find the accelerate method 182

182

in the prototype chain. 183

183

But now as we have this, 184

184

then this accelerate method will override the one 185

185

from the parent class. 186

186

And remember that this is exactly the definition 187

187

of polymorphism that We talked about at the beginning 188

188

of the section. 189

189

And it might seem obvious that it works this way, 190

190

but it's still good to remind ourselves 191

191

that we can actually do this. 192

192

Okay. 193

193

And, by that we finished yet another coding challenge. 194

194

And I hope that now it's really clear, 195

195

how we can have one class inherit 196

196

from another class using constructor functions. 197

197

And also of course the Object.create function, 198

198

because without it, 199

199

this would be completely impossible. 200

200

So great job of doing one more coding challenge. 201

201

Next up, we will see how we can implement 202

202

the exact same thing using ES6 classes.