Original subtitles

1 1

So over the last couple of lectures, 2

2

we explored how prototypal inheritance works in JavaScript. 3

3

And we did that using a couple of different techniques. 4

4

So we used constructor functions, ES6 classes, 5

5

and object dot create. 6

6

Now all of these techniques basically allow objects 7

7

to inherit methods from its prototype. 8

8

So to delegate their behavior to their prototype, 9

9

right? 10

10

But now it's time to turn our attention 11

11

to more real inheritance. 12

12

So in the way that we learned in the very first lecture 13

13

of the section. 14

14

So what I'm talking about is real inheritance 15

15

between classes 16

16

and not just prototypal inheritance between instances 17

17

and a prototype property like we've been doing so far. 18

18

And I'm using class terminology here 19

19

because this simply makes it easier to understand 20

20

what we're gonna do. 21

21

But of course, you already know that real classes 22

22

do not exist in JavaScript. 23

23

But anyway here is what we're gonna do. 24

24

So we will create a new student class 25

25

and make it inherit from the person class 26

26

that we have been using so far. 27

27

So person will be the parent class 28

28

and student will be the child class. 29

29

that's because student is basically a subtype of a person. 30

30

So a student is also a person, right? 31

31

But it is a more specific person. 32

32

And so this is an ideal child class. 33

33

Now this is really useful 34

34

because with this inheritance set up, 35

35

we can have specific methods for the student, 36

36

but then the student can also use generic person methods, 37

37

like the calcAge method that we have been using. 38

38

And that's basically the idea of inheritance that 39

39

we're gonna implement in this lecture. 40

40

Now, just like before we will start by implementing 41

41

this using constructor functions. 42

42

So in this lecture, 43

43

we will inherit between classes using constructor functions, 44

44

and this is gonna be a bit of work, 45

45

but it will allow you to understand exactly 46

46

how we set up the prototype chain in order 47

47

to allow inheritance between the prototype properties 48

48

of two different constructor functions. 49

49

Then in the next lecture, 50

50

we're gonna do the same thing using ES6 classes, 51

51

which as you would expect is a lot easier. 52

52

And finally, of course, 53

53

we will go back to using object dot create as well. 54

54

All right, but enough talk, 55

55

let's put this into practice now. 56

56

So here I already have the person function constructor 57

57

that we have been working with in the beginning 58

58

of the section and also the calcAge method 59

59

that we set up on the prototype property of person. 60

60

So this is just a copy of what we already did. 61

61

And so now let's continue by building a constructor function 62

62

for the student. 63

63

So const student. 64

64

Now usually we want a child class 65

65

to have the same functionality as the parent class, 66

66

but with some additional functionality. 67

67

And so usually we pass in the same arguments, 68

68

but then also some additional ones. 69

69

So that's gonna be again, first name and birth year, 70

70

and then we will also pass in the course. 71

71

And now everything works the same here. 72

72

So first name is gonna be first name this dot birth year 73

73

is birth year and finally this dot course 74

74

is gonna be the course, that gets into the function. 75

75

So you see that in fact, 76

76

this student class here has kind of the same data 77

77

as the person. 78

78

So it also has the first name and the birth year, 79

79

but then it has an additional property, 80

80

which is the course. 81

81

So now let's actually create a new student. 82

82

So I'm calling him Mike here. 83

83

Born in 2020 and studying Computer Science. 84

84

And just to make sure let's log in to the console, 85

85

and here indeed it is. 86

86

Let's now quickly add a method as well. 87

87

So we take the prototype property one more time 88

88

and then let's create a method called introduce. 89

89

And so here, 90

90

we're simply gonna log like an introduction phrase 91

91

to the console. 92

92

So for the student to introduce himself, 93

93

so my name is this dot first name and I study, 94

94

and then the name of the course. 95

95

So let's call that here, 96

96

mike dot introduce and all right. 97

97

So that works just fine. 98

98

Great. 99

99

So far so good. 100

100

However, there is one thing that we can 101

101

and should improve here in our student constructor function. 102

102

So right now this part of the code here 103

103

is basically a simple copy 104

104

of the person function constructor. 105

105

So of this one that we want 106

106

to be the parent class, right? 107

107

And as you know, having duplicate code is never a good idea. 108

108

First because it violates 109

109

the "don't repeat yourself" principle, 110

110

but second and even worse in this case 111

111

is that imagine that the implementation of person here 112

112

changes in the future, 113

113

then that change will not be reflected in the student. 114

114

So instead of having this duplicate code here, 115

115

let's simply call the person function. 116

116

So person, and then we pass in first name 117

117

and the birth year as well. 118

118

Now, do you think that this is gonna work? 119

119

Well let's see. 120

120

And then I'm gonna to explain to you why this doesn't work. 121

121

So the problem here is that we are now actually calling 122

122

this person constructor function as a regular function call. 123

123

So we are not using this new operator 124

124

to call this person function constructor. 125

125

And so therefore this function call here 126

126

is simply a regular function call. 127

127

And remember that in a regular function call, 128

128

the this keyword is set to undefined. 129

129

And so therefore that's why we get this error here, 130

130

that it cannot set first name on undefined. 131

131

So instead of simply calling the person function here, 132

132

we need to manually set the this keyword as well. 133

133

So do you remember how we can call a function? 134

134

And at the same time set the this keywords 135

135

inside that function? 136

136

Well, we can simply use the call method. 137

137

So the call method will indeed call this function, 138

138

but we will be able to specify the this keywords 139

139

here as the first argument in this function. 140

140

And so in this case, we want the this Keyword 141

141

in this function to simply be the this keyword 142

142

inside this function here, right? 143

143

Because as you know the this Keyword is gonna be 144

144

in the beginning, 145

145

this empty object that is being created by the new operator. 146

146

And so it is on that new object 147

147

where we want to set the first name 148

148

and the birth year property. 149

149

Right? 150

150

So if we check this now, then it is back to working. 151

151

And so this is a much better and more robust solution. 152

152

Okay. 153

153

So far, this is what we have built. 154

154

So it's simply the student constructor function 155

155

and its prototype property. 156

156

And then the mike object linked to its prototype. 157

157

And that prototype is of course 158

158

the constructor functions prototype property. 159

159

Now this link between instance and prototype 160

160

has been made automatically by creating the mike object 161

161

with the new operator. 162

162

So all of this is what we had already learned. 163

163

So this is nothing new at this point 164

164

Right? 165

165

Now a student is also a person. 166

166

And so we want student and person to be connected like this. 167

167

So we really want the student class 168

168

to be the child class and inherit from the person class, 169

169

which will then function as the parent class. 170

170

So this way, all instances of student 171

171

could also get access to methods 172

172

from the person's prototype property, 173

173

like the calcAge method through the prototype chain. 174

174

And that's the whole idea of inheritance. 175

175

Its the child classes can share behavior 176

176

from their parent classes. 177

177

So looking at this diagram, basically what we want to do 178

178

is to make person dot prototype, 179

179

the prototype of student dot prototype. 180

180

Or in other words, 181

181

we want to set the underscore protal property 182

182

of student dot prototype to person dot prototype. 183

183

And if this sounds confusing, 184

184

then please just pause the video here for a minute 185

185

and keep looking at this diagram for some more time. 186

186

So that's why I created it. 187

187

Okay? 188

188

Now, anyway, 189

189

we are gonna have to create this connection manually. 190

190

And to do this, 191

191

so to link these two prototype objects, 192

192

we are gonna use object dot create 193

193

because defining prototypes manually 194

194

is exactly what object dot create does. 195

195

Great. 196

196

So let's go do that. 197

197

So let's do what I just showed you on the slide 198

198

here in our code. 199

199

And it's important that you do this at exactly 200

200

this point of the code. 201

201

Okay? 202

202

And I will tell you later why that is. 203

203

So anyway, student dot prototype, 204

204

should be object dot create, 205

205

person dot prototype. 206

206

And with this, 207

207

the student dot prototype object is now an object that 208

208

inherits from person dot prototype. 209

209

Now we have to create this connection here 210

210

before we add any more methods 211

211

to the prototype object of student. 212

212

And that's because object dot create, 213

213

will return an empty object. 214

214

And so at this point, student dot prototype is empty. 215

215

And so then onto that empty object, 216

216

we can add methods like this one. 217

217

But if we did it the other way around 218

218

so if this was after we created this method here, 219

219

then object dot create 220

220

would basically overwrite these methods 221

221

that we had already added 222

222

to the prototype object of student. 223

223

Now you might be wondering why we even needed 224

224

to use object dot create. 225

225

So why didn't we just do this? 226

226

So student dot prototype equals the person dot prototype, 227

227

right? 228

228

This many would have seen a little bit more logical to do, 229

229

but in fact, this doesn't work at all. 230

230

And let me actually show you why that is. 231

231

So if we do student dot prototype 232

232

equal to person dot prototype, 233

233

then we will not end up with a prototype chain that we need. 234

234

Instead, we would end up with this, 235

235

which is a completely wrong prototype chain. 236

236

And that's because here we're actually saying 237

237

that the student's prototype property 238

238

and a person's prototype property 239

239

should be the exact same object. 240

240

But in fact that's just not what we want. 241

241

What we do want is the person's prototype object 242

242

to be the prototype of student dot prototype. 243

243

So we want to inherit from it, 244

244

but it should not be the exact same object. 245

245

And that's why we actually needed object dot create. 246

246

Alright, 247

247

so let's get rid of this bad code and here let's just say 248

248

linking prototypes. 249

249

And so now with all of this in place, 250

250

we should be able 251

251

to do mike dot calcAge, 252

252

and indeed we get the age of 17. 253

253

Beautiful. 254

254

So this worked just fine. 255

255

And so let's actually now go analyze 256

256

what exactly happened here. 257

257

And we already know that this worked 258

258

because of the prototype chain, 259

259

but let's see exactly how. 260

260

So when we do mike dot calcAge, 261

261

we are effectively doing a property or a method lookup. 262

262

So that is JavaScript 263

263

trying to find the requested property or method. 264

264

Now, in this case, as we know, 265

265

the calcAge method is of course 266

266

not directly on the mike object. 267

267

It's also not in mike's prototype. 268

268

That's where we defined the introduced method, 269

269

but not calcAge. 270

270

Right? 271

271

So just like before, 272

272

whenever we try to access a method, 273

273

that's not on the object's prototype, 274

274

then JavaScript, will look up even further 275

275

in the prototype chain and see if it can find a method 276

276

so in the parent prototype. 277

277

And that's exactly what happens here. 278

278

So JavaScript will finally find the calcAge 279

279

in person dot prototype, 280

280

which is exactly where we defined it. 281

281

And that's the whole reason 282

282

why we set up the prototype chain like this 283

283

so that the mike object can inherit whatever methods 284

284

are in its parent class, basically. 285

285

So in summary, 286

286

we are now able to call a method 287

287

that is on a person's prototype property, 288

288

on a student object, and it still works. 289

289

So that's the power of inheritance. 290

290

Great. 291

291

And since we're already here, 292

292

let's also quickly complete the prototype chain. 293

293

So just like before object dot prototype will sit on 294

294

top of the prototype chain. 295

295

So of course we could still call a method 296

296

like the s on property method on mike too. 297

297

It doesn't matter how far away 298

298

in the prototype chain a method is. 299

299

And with this, 300

300

we now have the full picture of how inheritance 301

301

between classes works with function constructors. 302

302

And of course, with ES6 classes, 303

303

it works exactly the same internally. 304

304

All that changes is the syntax. 305

305

So when we do the same thing in the next video 306

306

using ES6 classes, then keep in mind 307

307

that it's gonna work just like I described here. 308

308

And so now just to finish this video, 309

309

let's quickly inspect all of this also in the console, 310

310

let's say mike dot underscore underscore proto. 311

311

And so this is of course gonna to be, this object here, 312

312

which contains the introduce method, 313

313

all right? 314

314

So this is nothing new, 315

315

but you see here right in the console 316

316

that this itself has a prototype too. 317

317

So let's try this here, 318

318

and so see the next prototype. 319

319

And so now this is indeed the prototype, 320

320

which contains the calcAge function. 321

321

And so in fact that is exactly this object here. 322

322

Right? 323

323

And maybe it's even easier to visualize 324

324

in the console like this. 325

325

So taking a look at mike itself, 326

326

and then mike's prototype is a person here, 327

327

which is actually not correct 328

328

and we will fix that in a second. 329

329

So, I mean, In the prototype chain, 330

330

everything is correct, but here it should say student, 331

331

so you see that right now, it says person, 332

332

but Mike is actually of the type student. 333

333

Okay. 334

334

But anyway, here you see the introduced method 335

335

that we defined earlier. 336

336

And then if we go even further into this, 337

337

so not this one, 338

338

but this one then you see, of course the calcAge function, 339

339

which is in the prototype of the prototype basically. 340

340

Right? 341

341

So what I said that we need to fix is this. 342

342

So when we take a look at 343

343

student dot prototype dot constructor, 344

344

then remember that ideally this should point back 345

345

to the student, right? 346

346

But here it points back, apparently to person. 347

347

So actually we should use console dot dir 348

348

And so you see that JavaScript now, thinks 349

349

that the constructor of student or prototype 350

350

is person here. 351

351

And the reason for that is 352

352

that we set the prototype property of the student 353

353

using object dot create. 354

354

And so this makes it so 355

355

that the constructor of student dot prototype 356

356

is still person. 357

357

So we need to fix this because sometimes it's important 358

358

to rely on this constructor property. 359

359

And so if we want to rely on that, 360

360

it should indeed be correct. 361

361

But that's easy to fix. 362

362

We can just say student dot prototype dot constructor 363

363

and set it to student. 364

364

but let me just try out some more things here. 365

365

So just to make sure everything works 366

366

so we can again use the instance of, operator here. 367

367

And so this of course is gonna be true 368

368

because student is of course 369

369

the constructor function of mike. 370

370

But if we try to same now with person 371

371

then that indeed should be also true. 372

372

And so, in fact it is. 373

373

And so again, 374

374

it's because we linked the prototypes together. 375

375

So if we didn't have this, 376

376

then this should be false. 377

377

So of course, 378

378

mike dot calcAge is not a function in this case 379

379

because the prototype chain is now not correctly set up 380

380

to find this method, 381

381

but let's quickly take this out. 382

382

And so now indeed mike is no longer an instance of person. 383

383

And of course, 384

384

mike is also an instance of object because this also 385

385

in its prototype chain. 386

386

Now, right. 387

387

So here, we just proved that a prototype chain 388

388

is in fact set up the way that we intended it to be 389

389

all right. 390

390

And that's the end of a very long, 391

391

and I admit complex lecture. 392

392

But I hope that I could still consolidate your knowledge 393

393

about prototypes and the prototype chain even further 394

394

because you know how to even manipulate 395

395

the prototype chain yourself manually. 396

396

And actually let's now go test, 397

397

if you did actually understand 398

398

right in the next coding challenge.