Original subtitles

1 1

[Instructor} So we learned how to implement 2

2

prototypal inheritance with constructor functions 3

3

and then manually setting methods 4

4

on the constructor functions, prototype property. 5

5

But now it's time to turn our attention to ES6 classes. 6

6

Which essentially allow us to do the exact same thing, 7

7

but using a nicer and more modern syntax. 8

8

Now, as I mentioned earlier, 9

9

classes in JavaScript do not work like traditional classes 10

10

in other languages like Java or C Plus Plus. 11

11

So instead classes in JavaScript are just synthetic sugar 12

12

over what we learned in the last few videos. 13

13

So they still implement prototypal inheritance 14

14

behind the scenes, but where they syntax 15

15

that makes more sense to people coming 16

16

from other programming languages. 17

17

And so that was basically the goal of 18

18

adding classes to JavaScript. But anyway, 19

19

let's noW implement person using a class. 20

20

So we can write class and then the name of the class, 21

21

and let's actually call it PersonCL. 22

22

So that stands for class and then curly braces like this. 23

23

And so this is actually a class declaration, 24

24

but just like in functions, we also have class expressions. 25

25

And so that would work like this. 26

26

So class expression, 27

27

and class declaration, 28

28

And so then you can pick whichever you like the most. 29

29

So it would be PersonCL and then class, 30

30

and then just like a function, 31

31

but without the arguments, okay. 32

32

And that is because in fact 33

33

classes are just a special type of functions, okay. 34

34

So although we use the class keyword here 35

35

behind the scenes classes are still functions 36

36

and therefore we have class expressions 37

37

and class declarations. 38

38

Now, for some reason I prefer the class declaration, 39

39

and so I'm gonna use that right here. 40

40

And so this is how we write a simple class 41

41

and then inside the class, 42

42

the first thing that we need to do 43

43

is to add a constructor method. 44

44

So just like this, 45

45

and this constructor actually works in a 46

46

pretty similar way as a constructor function, 47

47

so as we studied previously, 48

48

but this one is actually a method of this class. 49

49

And in fact it needs to be called constructor, 50

50

so that is the rule. 51

51

But just like in constructor functions, 52

52

we pass in arguments basically for the properties 53

53

that we wanted the object to have. 54

54

So that's again first name and then the birth year. 55

55

Now, the act of creating a new object 56

56

actually also works in the exact same way as before. 57

57

So using the new operator, 58

58

and so therefore, whenever we create a new object, 59

59

so like a new instance using the new operator, 60

60

this constructor will automatically be called. 61

61

So, let's actually try that right away. 62

62

And this time let's create Jessica here. 63

63

So new PersonCL, and so as you see 64

64

everything here looks exactly the same as before. 65

65

So it looks just like a regular function call. 66

66

And again, we also use the new keyword here. 67

67

And so therefore just like before, 68

68

the disc keyword here inside of the constructor 69

69

will also be set to the newly created empty object. 70

70

And so just like before, we set the properties 71

71

of the object like this. 72

72

So this dot first name is equal to 73

73

first name that we receive 74

74

and the same for the birth year. 75

75

Alright. So basically when we create a new instance here, 76

76

then it is this constructor that is gonna be called 77

77

and it will return a new object 78

78

and then that will be stored here into Jessica. 79

79

So let's just lock this to the console. 80

80

And so, in fact it looks just like before, alright. 81

81

So here we basically have the properties 82

82

that will be stored in the new object 83

83

that we want to create, 84

84

and so now it's time for the methods. 85

85

And the methods we simply write like this, 86

86

so we can simply add them here. 87

87

And all we have to do is to write their name. 88

88

So just like a regular function in here. 89

89

So this is very nice and very convenient. 90

90

And so let's simply do the same as before. 91

91

So this dot birth year. 92

92

Now, what's important to understand here 93

93

is that all of these methods that we write in the class, 94

94

so outside of the constructor, 95

95

will be on the prototype of the objects 96

96

and not on the objects themselves. 97

97

So this is really just like before prototypal inheritance. 98

98

And in fact, we will be able to confirm that now. 99

99

So as we open up PersonCL here, and in fact, 100

100

we're gonna be able to confirm that here. 101

101

So as we inspect this Jessica object, 102

102

when we look into it's prototype, 103

103

then we will once again see the calcAge function here. 104

104

Alright. And so therefore of course, 105

105

we're going to be able to do this, 106

106

and actually we don't even need to log it 107

107

to the console because the calcAge method 108

108

already does that on its own. 109

109

And so indeed we get an age here. 110

110

And so one more time, let me prove to you 111

111

that Jessica underscore proto underscore underscore 112

112

is equal to PersonCL dot prototype, and is true. 113

113

And so as you see PersonCL here acts 114

114

just like any other function constructor. 115

115

Where the only difference that this looks 116

116

a little bit nicer. So with this syntax, 117

117

we don't have to manually mess with the prototype property. 118

118

All you have to do is to write the methods here. 119

119

So inside the class, but outside of the constructor, 120

120

and then they will automatically be added 121

121

to the prototype property of the class, basically. 122

122

So let me actually write that here. 123

123

So they will be added to the prototype property 124

124

of the person class, which once again, 125

125

is gonna be the prototype 126

126

of the objects created by that class. 127

127

And we can take this demonstration even further 128

128

by also adding a method manually to the prototype. 129

129

So that's going to work just as fine. 130

130

So let's create a greet method here. 131

131

So let's just say, hey, this dot first name, 132

132

and then we can call this on Jessica. 133

133

So of course Jessica dot greet. 134

134

And so as you see it, that works just as well, alright. 135

135

And so this is proof one more time that the class really 136

136

just hides the true nature 137

137

of prototypal inheritance and JavaScript. 138

138

So of course, we could now do the same like this 139

139

and notice how there are no commas between the methods. 140

140

Okay, so we could do this, take out this, 141

141

and it would work the exact same way, you see. 142

142

So, this is great for people who are coming 143

143

from another language and have experience 144

144

with object oriented programming, 145

145

because it's going to be a bit easier for these developers 146

146

to start writing object oriented code in JavaScript. 147

147

Now, if you're one of these developers, 148

148

then please make sure that before just starting 149

149

to use classes, you really truly understand 150

150

function constructors and to prototype 151

151

and to hold prototype chain logic. 152

152

Now, to finish, I just need to say 153

153

a couple of more things about classes 154

154

that are important to keep in mind. 155

155

So first, classes are not hoisted. 156

156

So first, let's scroll a bit here. 157

157

Classes are not hoisted, 158

158

and so even if they are class declarations. 159

159

So function declarations, remember are hoisted, 160

160

which means we can use them 161

161

before they are declared in the code. 162

162

But with classes, that doesn't work. 163

163

Second, just like functions, 164

164

classes are also first class citizens. 165

165

First class citizens, 166

166

and so what that means, is that we can pass them 167

167

into functions and also return them from functions. 168

168

And as I mentioned before, 169

169

that is because classes are really 170

170

just a special kind of function behind the scenes. 171

171

And third, the body of a class 172

172

is always executed in strict mode. 173

173

Classes are executed in strict mode. 174

174

And so even if we didn't activate it for our entire script, 175

175

all the code that is in the class 176

176

will be executed in strict mode. Am I right? 177

177

So keep these points in mind 178

178

if you want to work with classes. 179

179

So, now at the end of this video, 180

180

you might ask if you should use 181

181

constructor functions like we have been doing, 182

182

or if instead it's better to just use classes. 183

183

And to first remark I want to do here is that 184

184

constructor functions are not like old 185

185

or deprecated syntax. 186

186

So it's 100% fine to keep using them. 187

187

So one more time, this is more, 188

188

a question of personal preference. 189

189

Now, if you're asking, if you should use classes 190

190

without understanding prototypal inheritance, 191

191

well then, the reply is definitely no. 192

192

Now, some people actually say that classes are really bad 193

193

in general and that no one should ever be using them 194

194

simply because they hide the true nature of JavaScript. 195

195

But I actually don't agree with that. 196

196

And I think it's absolutely okay 197

197

to use classes in your code, 198

198

as long as you understand everything that I just showed you 199

199

previously about the prototype and prototypal inheritance. 200

200

So you cannot just skip that part because you want to become 201

201

an expert in JavaScript, right? 202

202

And you also want to feel comfortable 203

203

while writing your code and that essentially means 204

204

to understand exactly what your code does. 205

205

So that's super important too. 206

206

And so if you want to be confident, you need to understand. 207

207

And so that's also the whole reason why all over the course, 208

208

I am going into such deep detail 209

209

into how everything works in JavaScript. 210

210

Now, what I personally like about classes 211

211

is that they visually put all the code 212

212

that belongs to a certain class. 213

213

So like all the data here and all the behavior, 214

214

all into one nice code blog like this. 215

215

With function constructors, in my opinion, 216

216

it all looks just like a big mess. 217

217

So like this, I mean, in this case, 218

218

it's just a little bit of code, 219

219

but this can get out of hand pretty quick. 220

220

And in these situations, 221

221

I think that this actually looks at least a lot better, 222

222

but of course, that is just my personal opinion. 223

223

What matters is that you start thinking about this yourself 224

224

and take your own decisions 225

225

based on what I'm explaining in these videos.