Original subtitles

1 1

Now it's time 2

2

to finally start using prototypes. 3

3

And after this, you will feel 4

4

like a real pro developer, 5

5

believe me. 6

6

And we're gonna continue with the example 7

7

from the previous video. 8

8

Okay. 9

9

But now we're gonna talk about prototypes. 10

10

So actually, we talked about prototypes, 11

11

prototypal inheritance and delegation earlier already. 12

12

But how does all of that actually work? 13

13

Well, it can be summarized like this. 14

14

So, first each and every function in JavaScript 15

15

automatically has a property called prototype. 16

16

And that includes, of course, constructor functions. 17

17

Now every object that's created 18

18

by a certain constructor function 19

19

will get access to all the methods and properties 20

20

that we define on the constructors prototype property. 21

21

So just to visualize 22

22

in our case, 23

23

this would be person dot prototype. 24

24

So the prototype property 25

25

of the constructor function. 26

26

So again, as I was just saying, 27

27

all the objects that are created 28

28

through this constructor function here 29

29

will inherit, 30

30

so they will get access 31

31

to all the methods and properties 32

32

that are defined on this prototype property. 33

33

And so let's no actually add a method 34

34

to this prototype property. 35

35

And so, this is actually an object. 36

36

And so we can now say calcAge 37

37

and then we can simply set it 38

38

to this same function here, 39

39

so equal, and that's it. 40

40

Now we get some error here 41

41

and that's because I misspelled prototype. 42

42

So that's type right here. 43

43

And then let's actually take a look 44

44

at his prototype property 45

45

just for curiosity. 46

46

So that's not comma, of course, it's the dot. 47

47

And so here is that prototype property. 48

48

And so you see that right now 49

49

we already have the calcAge method in there. 50

50

So before it was kind of an empty object 51

51

so nevermind these two here. 52

52

So basically it was empty before 53

53

but now there is the calcAge method 54

54

already in here, 55

55

so this one that we just defined down here. 56

56

Alright. 57

57

And once again, remember how I said 58

58

that each object created 59

59

by this constructor function 60

60

will now get access to all the methods 61

61

of this prototype property. 62

62

And so of course, 63

63

also to calcAge. 64

64

And so we should be able to do this. 65

65

So Jonas, which is this object here 66

66

which was of course created 67

67

by this constructor function. 68

68

And so, calcAge. 69

69

And let's see. 70

70

And indeed, we get to the correct age here. 71

71

So it worked. 72

72

Great. 73

73

That's amazing. 74

74

So we can now use this method here 75

75

on the Jonas object 76

76

even though it is not really 77

77

on the object itself, right? 78

78

So if we check our Jonas here, 79

79

then you see that it contains of course 80

80

the birth year and the first name, 81

81

but it does not contain the calcAge method. 82

82

But still, we have access to it 83

83

because of prototypal inheritance. 84

84

Okay. 85

85

And of course the same is gonna work 86

86

for Matilda here, 87

87

and of course, also for the Jack object. 88

88

Beautiful. 89

89

So that effectively solves this problem 90

90

that we had before 91

91

when we added the calcAge method 92

92

directly to each of the objects, remember that? 93

93

So here we would have created a copy 94

94

of this method here 95

95

and attached it to every single object. 96

96

And so that's why we don't do this. 97

97

Instead, what we do is this. 98

98

Because now there exists only one copy 99

99

of this function. 100

100

So only one of them exists, 101

101

but then all of the objects that are created 102

102

using this constructor function 103

103

can basically reuse this function 104

104

on themselves. 105

105

And so, the disc keyword, 106

106

of course, in each of them 107

107

is as always set to the object 108

108

that is calling the method. 109

109

And so here that's Jonas 110

110

and here that's gonna be Matilda. 111

111

So just like we learned previously, 112

112

the disc keyword is set to the object 113

113

that is calling the method. 114

114

Now right. 115

115

So, in a nutshell, this is how we implement 116

116

very basic prototypal inheritance 117

117

in JavaScript and practice. 118

118

So we just observed, that the Jonas 119

119

and the Matilda objects 120

120

are kind of somehow connected to the person, right? 121

121

That's why they can have access to these methods 122

122

or in this case to just this method 123

123

that is located inside the prototype property of person. 124

124

But how and why does this actually work? 125

125

Well, it works because any object always 126

126

has access to the methods and properties 127

127

from its prototype. 128

128

And the prototype of Jonas and Matilda 129

129

is person dot prototype. 130

130

And we can actually confirm that 131

131

because each object has a special property 132

132

called a underscore underscore proto. 133

133

So like this. 134

134

Underscore underscore proto 135

135

and then again, underscore underscore. 136

136

So this looks a bit weird, but, 137

137

and this is just kind of how it works. 138

138

So let's take a look. 139

139

And so this is the prototype of Jonas. 140

140

It's not the prototype property 141

141

but it is simply the prototype, okay? 142

142

And so here again, we see the calcAge function 143

143

and that's why Jonas is able to use this. 144

144

So to prototype of the Jonas object 145

145

is essentially the prototype property 146

146

of the constructor function. 147

147

So let's quickly see that as well. 148

148

So we can check that. 149

149

So person dot prototype. 150

150

And so this should not be true, 151

151

and indeed it is. 152

152

All right? 153

153

But what I just said 154

154

sounded incredibly confusing, didn't it? 155

155

So shouldn't person dot prototype 156

156

be the prototype of person, 157

157

I mean 158

158

should this prototype property here 159

159

not be the prototype of person? 160

160

Well, actually, no. 161

161

So this is the confusing part. 162

162

So person dot prototype here 163

163

is actually not the prototype of person. 164

164

But instead, it is what's gonna be used 165

165

as the prototype of all the objects 166

166

that are created with the person constructor function. 167

167

So that's a subtle but important difference 168

168

that you need to keep in mind. 169

169

And, in fact, what I just said 170

170

that is confirmed by this comparison 171

171

that we just did here. 172

172

So we just saw that Jonas's prototype 173

173

which is this, is the prototype property 174

174

of the person constructor function. 175

175

And there are actually other built in methods 176

176

that we can use to prove this. 177

177

So on any object, 178

178

for example, object dot prototype, 179

179

we can test if this is a prototype of another object. 180

180

So we can call is prototype, 181

181

so is prototype 182

182

like this of and then Jonas. 183

183

And so this should also become true. 184

184

And indeed it is. 185

185

So this confirms one more time 186

186

that person dot prototype 187

187

is indeed the prototype of Jonas. 188

188

And the same for Matilda, of course as well. 189

189

But person dot prototype 190

190

is not the prototype of person. 191

191

So you see, it is false here. 192

192

So, this very common confusion 193

193

comes from bad naming of this property. 194

194

So the fact that it's called prototype 195

195

kind of implies that this is the prototype of person, 196

196

but as we just learned, it is actually not. 197

197

Probably shouldn't be called prototype 198

198

but instead something like prototype of linked objects 199

199

or something like this. 200

200

So if this makes it easier 201

201

you can think of the prototype property 202

202

as prototype of linked objects property. 203

203

Even though of course it's not called like this, 204

204

but this would be a more honest name. 205

205

So take some time to really understand 206

206

what the prototype of what object actually is here. 207

207

Now, anyway, where does this proto, 208

208

property here, on the Jonas object 209

209

actually come from? 210

210

Well, remember the new operator 211

211

that we talked about before, 212

212

well, it contains this step number three 213

213

which links the empty new object 214

214

to the prototype. 215

215

And so basically, it is this step number three 216

216

which will create this proto property. 217

217

So it creates this proto property 218

218

and it sets its value to the prototype property 219

219

of the function that is being called. 220

220

And so that's exactly what is written here, right? 221

221

So again, it sets the proto property 222

222

on the object to the prototype property 223

223

of the constructor function. 224

224

And so this is how JavaScript knows internally 225

225

that the Jonas object is connected 226

226

to person dot prototype. 227

227

And in fact, when we check out 228

228

the Jonas object here 229

229

we can indeed also see that property in here. 230

230

So it's also right here, 231

231

and if we open that up, 232

232

then you see exactly person dot prototype 233

233

which contains this calcAge function, all right? 234

234

So I'm spending a lot of time here 235

235

for you to really understand 236

236

what this proto property here is 237

237

and what the prototype of the constructor is 238

238

and how they are all linked 239

239

because this is one of the most important things, 240

240

and also one of the most difficult things 241

241

to understand in JavaScript. 242

242

But I hope that it's becoming increasingly clear 243

243

and there will also be a couple of diagrams 244

244

in the next video that will basically 245

245

bring all this knowledge together 246

246

in an easier to understand way. 247

247

So, by now you're probably sick 248

248

of hearing the word prototype 249

249

but I just wanted to quickly show you 250

250

that we can also set properties on the prototype. 251

251

And so not just methods. 252

252

So let's say person dot prototype, 253

253

dot species, 254

254

and so this is something 255

255

that all of the objects here 256

256

will have in common, 257

257

and so that's Homo Sapiens. 258

258

Now, right? 259

259

And so, if we now take a look at Jonas 260

260

and at Matilda also, 261

261

then we should see this property, 262

262

so the species on both of them 263

263

and actually not directly here 264

264

but indeed they will be here 265

265

in this prototype. 266

266

And so, we will be able to do Jonas dot species 267

267

and Matilda dot species. 268

268

And both of these objects will then inherit 269

269

so they will get access to this property 270

270

from the prototype. 271

271

So, you see, in both cases, 272

272

we indeed get Homo Sapiens. 273

273

Now however, since when we take a look 274

274

at these objects, 275

275

well, as we just saw this property is not really 276

276

directly in the object, 277

277

so it's not its own property. 278

278

So own properties are only the ones 279

279

that are declared directly on the object itself. 280

280

So, not including the inherited properties. 281

281

And actually in JavaScript, there is a way 282

282

of checking for that. 283

283

So, we can do Jonas 284

284

as own property. 285

285

So that's with a capital P here. 286

286

And so let's first check 287

287

for first name, 288

288

and indeed this object does have its own property 289

289

with this name 290

290

but now if we try species, 291

291

then that is gonna be false. 292

292

And again, that's because this property 293

293

is not really inside of the Jonas object. 294

294

It simply has access to it 295

295

because of its prototype. 296

296

So because it's in the prototype property of person. 297

297

So right here, right? 298

298

And sometimes, this method here 299

299

can be quite helpful in certain situations. 300

300

Now right, and that is probably enough 301

301

for one lecture. 302

302

And as I just mentioned earlier 303

303

in the next video 304

304

I'm gonna show you a nice diagram 305

305

of all of this. 306

306

So, stay tuned for that one.