Original subtitles

1 1

Let's finally implement 2

2

object oriented programming now. 3

3

And starting with constructor functions. 4

4

And as always, I already have to start our files open here 5

5

in my VS code editor. 6

6

So please go ahead and do the same now. 7

7

And we can actually already also open up a new terminal 8

8

and start our live server. 9

9

So we can close that, open up the console here, 10

10

and increase it a little bit, 11

11

and now we're all set up and ready to go. 12

12

So, we actually kind of used 13

13

object oriented programming before 14

14

but in a very limited way. 15

15

Because we had no way of programmatically creating objects. 16

16

And so all we did was to use some simple object literals 17

17

for example, in the bankist app, right? 18

18

But now that all changes with constructor functions. 19

19

So, we can use constructor functions, 20

20

to build an object using a function. 21

21

Now, a constructor function is actually 22

22

a completely normal function. 23

23

The only difference between a regular function, 24

24

and a function that we call constructor function, 25

25

is that we call a constructor function 26

26

with the new operator. 27

27

But enough talk, 28

28

let's now actually create a constructor function 29

29

for a person. 30

30

So that person and in OOP there is this convention 31

31

that constructor functions always start 32

32

with a capital letter. 33

33

And so we should always follow that convention too. 34

34

And in fact, other a built in constructors 35

35

like array or map, follow that convention as well. 36

36

Now here I'm using a function expression 37

37

but of course a function declaration will also work. 38

38

Now an arrow function will actually not work 39

39

as a function constructor. 40

40

And that's because it doesn't have its own this keyword 41

41

and we need that, okay. 42

42

So only function declarations and function expressions. 43

43

Now remember that this function 44

44

is basically gonna produce an object 45

45

and in this case for a person. 46

46

So we want a person to have a name 47

47

or let's say a first name and a birth here. 48

48

And so we specified these two parameters 49

49

for that here in our constructor function 50

50

so that we can then pass in the name and the birth year. 51

51

And now let's actually call this function. 52

52

And so, as I said, previously, 53

53

the only difference between a regular function, 54

54

and a constructor function is that we call the constructor 55

55

using the new keyword. 56

56

So we write new, then person and then let's pass in Jonas 57

57

and 1991, let's say. 58

58

So this new operator here, 59

59

is actually a very special operator 60

60

because what it does is to call this function here. 61

61

So this person function, 62

62

but it does a whole lot more than just that. 63

63

So let's see what exactly happens when we call a function 64

64

with the new operator like this. 65

65

So behind the scenes, there have been four steps. 66

66

And let me actually write them here 67

67

because this is very important. 68

68

So first, a new empty object is created. 69

69

So an empty object is created, 70

70

then afterwards the function is called 71

71

and in this function call the this keyword will be set 72

72

to this newly created object. 73

73

All right? So let's write that here. 74

74

So the this keyword is this new empty object. 75

75

So, basically in the execution context 76

76

of the person function, 77

77

the this keyword will point to this new object here 78

78

that was created in step number one. 79

79

And remember all of this happens 80

80

only because we are calling the function 81

81

using the new operator here. 82

82

So step number three is that this newly created object 83

83

is linked to a prototype. 84

84

So linked to prototype but more about this 85

85

in the next video. 86

86

For now, we just care about creating the object itself. 87

87

Finally, the last step, 88

88

is that the object that was created in the beginning 89

89

is then automatically returned 90

90

from the constructor function. 91

91

So the function automatically returns 92

92

that empty object from the beginning. 93

93

But actually at this point, 94

94

the object no longer needs to be empty. 95

95

And this is actually the trick 96

96

of making the constructor function work. 97

97

So let's go here now 98

98

and the lock to the console, the this keyword. 99

99

And so we already know that it should be 100

100

this empty object that was just created here 101

101

in step number one, right? 102

102

Because the this keyword 103

103

inside this function will be exactly that empty object. 104

104

And again, that's because we are calling it 105

105

with the new keyword. 106

106

So let's see. 107

107

And indeed we get to this empty object. 108

108

And the browser console is actually already telling us 109

109

that it's basically here of the type of person, all right? 110

110

And so this is just the name of the constructor function. 111

111

All right. 112

112

And now let's use this knowledge to our advantage. 113

113

Because we already know that in the end of this function, 114

114

the this keyword will basically be returned. 115

115

And so whatever we add to that empty object, 116

116

will then be returned from the function. 117

117

And that returned object, is gonna be the object, 118

118

that we are trying to build here, actually. 119

119

So, all we need to do is to now take 120

120

that first name parameter, 121

121

so the value that we receive, 122

122

and then create a property on the this keyword 123

123

with the same name and then set it to that value. 124

124

And then the same with the birth year, equal to birth year. 125

125

And so now let's store the result here 126

126

in some variable and that's actually it. 127

127

So let's see what Jonas is gonna look like, 128

128

now and we have to log it to the console here. 129

129

If we want to take a look at it. 130

130

And indeed here it is, here is the person object 131

131

with the first name Jonas and the birth year, 132

132

that we passed here into the constructor function. 133

133

So, let's quickly recap what just happened here. 134

134

So again, we're calling this constructor function 135

135

with the new keyword or the new operator. 136

136

And so therefore a new empty object is created right away. 137

137

Then the function is called 138

138

and then here the this keyword, is that empty object. 139

139

And then in the function, we start to set properties 140

140

to that object. 141

141

And we give them the exact same name 142

142

as the parameters that we're passing in here. 143

143

And of course they could have any other name, 144

144

so it doesn't have to be the same name as our arguments. 145

145

So it doesn't have to be the same name as our parameters, 146

146

but this is kind of a convention. 147

147

So if we pass in first name 148

148

then we should also create a property called first name. 149

149

So then here by the end of the function 150

150

or this keyword now has these two new properties. 151

151

And then here in step number four, 152

152

that object that was created in the beginning, 153

153

is then automatically returned from the function. 154

154

And so at this point, 155

155

that is the object with these two properties. 156

156

And so that's gonna be the result of this function call, 157

157

and so it will then be stored in Jonas 158

158

and then that's what we get here. 159

159

Great. 160

160

So I hope that made sense. 161

161

And so now of course we can use this constructor function 162

162

to create as many different objects as we want. 163

163

So let's say we want to create Matilda new person, 164

164

Matilda and then let's say 2017, 165

165

and let's just do another one, why not? 166

166

Let's call it Jack new person, 167

167

just so you see that we can create 168

168

as many objects now based on this constructor function. 169

169

And so this is a bit like the analogy from before, 170

170

where this constructor function, 171

171

is now the blueprint for a house, 172

172

and then each of these objects that we create 173

173

through that function. 174

174

So through that blueprint will be the actual house 175

175

in the real world. 176

176

So in this case, the actual objects 177

177

with actual data in them. 178

178

So Matilda and Jack, and so of course, 179

179

now each of them is its own new object 180

180

that we created programmatically, 181

181

using a function constructor. 182

182

Now remember from one of the previous lectures, 183

183

that in classical object oriented programming, 184

184

an object created from a class is called an instance, 185

185

right? Now we didn't technically create a class here 186

186

because as we discussed before, 187

187

JavaScript doesn't really have classes 188

188

in the sense of traditional OOP. 189

189

However, we did create an object 190

190

from a constructor function. 191

191

And actually three objects, right? 192

192

And constructor functions have been used 193

193

since the beginning of JavaScript 194

194

to kind of simulate classes. 195

195

And so therefore we can still say 196

196

that Jonas here is an instance of person 197

197

and the same goes for Matilda and for Jack here. 198

198

And in fact there is even an operator 199

199

that we can use to test for that. 200

200

So that works like this. 201

201

So Jonas is an instance of, and then person. 202

202

And so this will then return either true or false. 203

203

Now, if we created something else here, 204

204

let's say J, just like this, then if we do this, 205

205

this would of course be false, right? 206

206

Because of course we didn't create this variable here, 207

207

so this object using any constructor function, all right? 208

208

And since we're talking about instances here, 209

209

we can also say that these properties here 210

210

will be the instance properties. 211

211

Let's write that here. 212

212

And that's because the properties' first name 213

213

and birth year will be available 214

214

on all the instances that are created 215

215

through this constructor function. 216

216

So that's for properties, but now what about methods, 217

217

So what if we wanted to add a method to our objects? 218

218

Well, just like we added properties, 219

219

we can of course also add methods. 220

220

So let's again, use our old friend calcage here. 221

221

And so here we are going to create a function 222

222

and assign it to this property. 223

223

And so this will then basically become a method, right? 224

224

And this year showed simply log to the console 2037, 225

225

which is the year we've always been using, 226

226

and then minus this.birth here. 227

227

And so this method is exactly the same 228

228

that we've been using all the time, right? 229

229

So, this would work just fine here 230

230

but this is actually a really bad practice. 231

231

So you should never do this. 232

232

You should never create a method 233

233

inside of a constructor function. 234

234

That's because imagine we were gonna create a hundred 235

235

or thousands or even tens of thousands 236

236

of person objects using this constructor function. 237

237

Then what would happen, 238

238

is that each of these objects 239

239

would carry around this function here. 240

240

So if we had a thousand objects, 241

241

we would essentially create a thousand copies 242

242

of this function. 243

243

And so that would be terrible 244

244

for the performance of our code. 245

245

Again, don't do this. 246

246

But instead to solve this problem, 247

247

we are gonna use prototypes and prototype inheritance 248

248

just like we discussed in the last video. 249

249

All right, great. 250

250

So this is the basics of constructor functions. 251

251

Just note that function constructors 252

252

are not really a feature of the JavaScript language. 253

253

Instead, they are simply a pattern that has been developed 254

254

by other developers. 255

255

And now everyone simply uses this. 256

256

And this now includes you as a new developer. 257

257

So the real magic really here is this new operator. 258

258

And so the most important thing 259

259

to understand from this video, 260

260

is really these four steps. 261

261

So make sure that you understand them, 262

262

and then in the next video 263

263

we will work with prototypes 264

264

and finally see the magic 265

265

of prototypal inheritance in action.