Original subtitles

1 1

Let's now go ahead and implement the exact same thing 2

2

that we did in the last video, 3

3

but this time using ESXi classes instead 4

4

of constructor functions. 5

5

So here again, 6

6

I copied the initial person class 7

7

that we built a bit earlier so that now we can 8

8

inherit from this class. 9

9

All right. 10

10

And so down here, let's now create the student class. 11

11

So class Student like this. 12

12

Now, as we know already, 13

13

the class Syntax hides a lot of the details that 14

14

are actually happening behind the scenes, 15

15

because classes are really just a layer 16

16

of obstruction over constructor functions. 17

17

But that's no problem because we already learned how 18

18

inheritance between classes actually works 19

19

behind the scenes. 20

20

So that's what we did in the last lecture 21

21

and to coding challenge. 22

22

And so now that we know how it works, 23

23

we are ready to implement the same thing using classes, 24

24

even though that hides, 25

25

how it actually works behind the scenes. 26

26

So to implement inheritance between ESXi classes, 27

27

we only need two ingredients. 28

28

We need the extent keywords and we need the super function. 29

29

So to make this student class inherit from the person class, 30

30

all we need to do is to say extends 31

31

and then the person class so CL, 32

32

and this one, I'm also going to call cl here 33

33

just to follow the same name and that's actually it. 34

34

So this keyword alone here will then link 35

35

to prototypes behind the scenes 36

36

without us even having to think about that. 37

37

Then of course, we still need a constructor. 38

38

And this one will just like before receive 39

39

the same arguments as the parent class, 40

40

but then some additional ones. 41

41

So birth year, and also the course. Remember? 42

42

now here, we actually don't even need 43

43

to manually call like personcl not call like we did before 44

44

in the constructor function. Remember? 45

45

so here we don't need to do that. 46

46

What we do instead is to call the super function. 47

47

And so super is basically the constructor function 48

48

of the parent class. 49

49

So the idea is still similar to what we did 50

50

in the constructor function, 51

51

but here it all happens automatically. 52

52

We don't need to specify the name of the parent class again, 53

53

because that already happened up here. 54

54

So here now all we do is to pass in 55

55

the arguments for the constructor of the parent class. 56

56

And so that's these two, because that's exactly 57

57

the parameters that are also specified here 58

58

in the parent's constructor. 59

59

Now here in this constructor. So off the child class, 60

60

this always needs to happens first. 61

61

So let me even write that here. 62

62

needs to happen first. 63

63

And that's because this call to the super function 64

64

is responsible for creating 65

65

the disc keyword in this subclass. 66

66

And so therefore, without doing this, 67

67

we wouldn't be able to access the disc keyword to do this. 68

68

So always first the call to the super 69

69

so to the parents class constructor. 70

70

And from there, we will then be able 71

71

to access the disc keyword. 72

72

Now, of course we could actually 73

73

have no other properties here at all. 74

74

So this is not necessary. I mean, it's not mandatory. 75

75

And so the same goes for this additional parameter. 76

76

So in this case, 77

77

this new student class would simply have new methods 78

78

and share all the properties with the parent class. 79

79

So what we're doing here is really just an example, 80

80

but the possibilities are endless, right? 81

81

And actually, if we didn't want to do this, 82

82

then we wouldn't need any constructor function at all. 83

83

So in this case, 84

84

the super function would automatically be called 85

85

with all the arguments 86

86

that are passed into this constructor. 87

87

So let me just create a new student here. 88

88

So that's Martha. So a new studentCL 89

89

let's say Martha Jones born in 2012 90

90

and also studying computer science now. Right? 91

91

But let me duplicate this year very quick, 92

92

take this one out and only call this with these two. 93

93

And then as I was saying, 94

94

we could have no constructor at all, 95

95

and this would still work just the same. 96

96

So you see that now we would end up 97

97

with a student with the full name and the birth year, 98

98

just as specified. 99

99

Now, remember that this underscore here still comes from 100

100

this center function here. 101

101

So that's what we specified earlier. 102

102

And so of course now the student will inherit all of that 103

103

because in the end, these are really just methods too. 104

104

And so all the students will now inherit 105

105

all of these methods from the parent class. 106

106

But anyway, this was just to demonstrate to you 107

107

that if you do not need any new properties, 108

108

then you don't even need 109

109

to bother writing a constructor method in the child class. 110

110

But now let's take this back, 111

111

this as well, and of course also this, 112

112

and now let's see if this worked 113

113

and yeah, so now we have all the three properties here. 114

114

Okay? 115

115

Now let's just quickly add the introduce method. 116

116

So let me copy that from earlier. 117

117

There's no need to write the same code. 118

118

So that's the simple console.log 119

119

that we're going to execute here. 120

120

So introduce, 121

121

and so now we can call that on Martha.introduce 122

122

and we get, my name is undefined here, 123

123

but that's because here we actually have the full name 124

124

and not the first name. 125

125

And so now that actually works 126

126

and the same should work for the calcAge method 127

127

that is in the parent class. 128

128

So Martha.calcAge and indeed, that works as well. 129

129

And so let's now take a quick look here 130

130

at a prototype chain one more time, 131

131

just so you can see that a prototype chain 132

132

is actually just the same as before 133

133

when we created it manually. 134

134

So you see that indeed in a prototype of Martha, 135

135

we now have to introduce method. 136

136

So that's this one right here that we wrote in the class. 137

137

All right? 138

138

But now in the prototype after prototype, 139

139

we have indeed the calcAge method 140

140

and also the greet method and the age 141

141

and full name setters and getters. 142

142

And so this proves us that the prototype chain was 143

143

indeed set up automatically by basically by 144

144

this extends keyword here. 145

145

Now. Finally, just like we did in a previous challenge, 146

146

let's override one of the methods of the parent class. 147

147

So let's override the calcAge method here. 148

148

And so all we have to do is to add a new CalcAge right here, 149

149

and then let's simply log to the console I'm. 150

150

And then the age. 151

151

So 2037 - this.birth year, years old. 152

152

But as a student, I feel more like, 153

153

and then let's basically add 10 to this date because 154

154

when you're in university and you study a lot 155

155

then you will feel actually a lot older 156

156

than you actually are now, right? 157

157

And so now indeed, 158

158

this new method overrode the one that was already there 159

159

in the prototype chain. 160

160

And again, that's because 161

161

this new calcAge method here 162

162

appears first in the prototype chain. 163

163

And so therefore it is essentially overriding 164

164

the method coming from the parent class. 165

165

And we can also say that 166

166

this calcAge method here is shadowing 167

167

the one that is in the parent class. 168

168

And so that's actually, it, 169

169

that's all I have to show you 170

170

about implementing inheritance between classes, 171

171

using actual ESXi classes. 172

172

And just to make sure that you got this 100%, 173

173

I invite you one more time to check out the slides 174

174

from the previous lecture. 175

175

So the lecture where we did the same thing 176

176

using constructor functions. 177

177

So these slides, so these theory parts of the video, 178

178

I believe are really, 179

179

really helpful to understanding this. 180

180

Now, to finish this part of inheritance between classes. 181

181

Let me just say that this mechanism of inheritance 182

182

that we explored here can actually be very problematic 183

183

and dangerous in the real world 184

184

when we are designing software. 185

185

However, that's going to be a 186

186

topic for another day. 187

187

And we're going to talk a little bit about this when we talk 188

188

about functional programming, which as I've mentioned, 189

189

a couple of times is kind of the alternative 190

190

to object oriented programming. 191

191

Anyway, next up, 192

192

let's do the same thing with object.create. 193

193

So that's the third way of implementing object 194

194

oriented programming in JavaScript.