Original subtitles

1 1

Let's now check out prototypal inheritance 2

2

and the prototype chain on built in objects 3

3

such as arrays. 4

4

But actually let's start this lecture 5

5

by inspecting some of the stuff 6

6

that we just talked about in the last lecture. 7

7

And we will keep using this person example 8

8

that we have been building. 9

9

So let's start by taking a look at Jonas._ _ proto 10

10

And we already know that this is the prototype of Jonas 11

11

which is exactly the prototype property of person. 12

12

And so therefore it is this object 13

13

which contains the Clock H-method that we defined earlier. 14

14

So up here and also this property 15

15

so this species property, but now let's actually move up 16

16

in the prototype chain and essentially take a look 17

17

at the prototype of Jonas's prototype. 18

18

And do you remember 19

19

from the last video, what that's gonna be? 20

20

Well, let's see. 21

21

And it is indeed the prototype property of object. 22

22

So that's why you can see 23

23

that constructor is the object here. 24

24

And then right away, we see this method 25

25

that we actually already studied in the last video. 26

26

So this has own property. 27

27

And so this is the reason why we can do this. 28

28

So why we can call has own property 29

29

on Jonas like we did here in one of the earlier videos. 30

30

So again, we learned in the last lecture that this works 31

31

because of the prototype chain 32

32

and in particular, 33

33

because this method here is in this prototype 34

34

of Jonas's prototype. 35

35

And so, yeah, that's this object 36

36

that we are inspecting right now. 37

37

All right. 38

38

Okay, but let's take this one step further 39

39

and check out the prototype 40

40

of the prototype 41

41

of the prototype. 42

42

And do you remember what this one is? 43

43

That's right. 44

44

It is no. 45

45

And so that's because object.prototype is usually the top 46

46

of the scope chain. 47

47

So this one here right? 48

48

So this one is gonna be object.prototype. 49

49

And so that's the top of 50

50

the prototype chain. 51

51

Okay. 52

52

Now we can also take a look 53

53

at that strange constructor property 54

54

that we also saw earlier. 55

55

So remember person.prototype itself 56

56

has a constructor property 57

57

which as we said, will point back to the person itself. 58

58

So constructor, like this. 59

59

And so here we actually get the function itself. 60

60

Now, if we want to inspect that function here 61

61

we need to use console.dir 62

62

And so here, indeed 63

63

we see that the constructor property points back at person. 64

64

So that's this. 65

65

Now to make things a bit more complicated even, 66

66

let's now take a look at the prototype of a function. 67

67

So any function of course is also an object. 68

68

And so therefore it also has a prototype 69

69

but maybe this is a bit too confusing. 70

70

So let's just leave it here. 71

71

So I will first show you the prototype of arrays 72

72

and maybe then we can move a bit further to functions. 73

73

So actually let's do that now. 74

74

So let's create an array 75

75

just like with any random numbers. 76

76

So the values here don't matter at all. 77

77

All I am interested in 78

78

is now to take a look at the proto property. 79

79

So the prototype of the array. 80

80

So let's see. 81

81

And here it is. 82

82

So this is the prototype of array 83

83

and you see that here 84

84

we have all these methods that we already know. 85

85

So we have fill, we have filter, 86

86

find, find index and all of these methods that we studied 87

87

in one of the earlier sections. 88

88

And so this is the reason why all the arrays get access 89

89

to all of these methods. 90

90

So each array 91

91

does of course not contain all of these methods 92

92

but instead, each array will inherit these methods 93

93

from its prototype. 94

94

Am I right? 95

95

And we can also check out 96

96

that this prototype has got to be 97

97

exactly array which is the constructor function.prototype. 98

98

So one more time, the prototype property 99

99

of the constructor is gonna be the prototype 100

100

of all the objects created by that constructor. 101

101

And so let's see, and it is true indeed. 102

102

And just like an object 103

103

using this shorthand, basically , 104

104

is the same as using new array. 105

105

And so therefore whenever we create an array 106

106

like this, it is indeed created by the array constructor. 107

107

And so that's why all of this works behind the scenes. 108

108

But of course, this is not yet the end 109

109

of the prototype chain as we saw in the last video. 110

110

So let's see. 111

111

And so now we are back to having object dot prototype. 112

112

And you see. 113

113

So this again now has on property 114

114

and then all of these methods 115

115

here that are available for objects. 116

116

And one more time, 117

117

that is simply because the prototype itself here 118

118

is an object. 119

119

And so any object has access to all of these methods. 120

120

All right, now we would be able to 121

121

see the exact same thing also directly in the console. 122

122

So if I check out the array here 123

123

and open it, then here in the bottom 124

124

you will see that we have the prototype property right here. 125

125

So if we click that, then here, one more time 126

126

we get all these array methods that we already know. 127

127

Okay. 128

128

And if we check the documentation on MDN 129

129

for example, for filter, then you see 130

130

that actually the name 131

131

of the method is array.prototype.filter. 132

132

And that is because this filter method, does of course, 133

133

live in the prototype property of the array constructor. 134

134

So one more time you can see 135

135

that the prototypal inheritance is really a mechanism 136

136

for reusing code. 137

137

So all of these built-in methods here 138

138

have to exist only once somewhere in the JavaScript engine 139

139

and then all the arrays in our code 140

140

get access to the functions 141

141

through the prototype chain and prototypal inheritance. 142

142

Great. 143

143

So let's actually take this one step further. 144

144

So we know at this point, 145

145

that any array inherits all their methods 146

146

from it's a prototype. 147

147

And therefore we can use that knowledge 148

148

to extend the functionality of arrays even further. 149

149

So all we would have to do is to say array.prototype. 150

150

And then here we can add any new method 151

151

to this prototype and all the arrays will then inherit it. 152

152

So let's say that we wanted to create a method 153

153

which returns all the unique elements of an array. 154

154

So let's add a method called unique. 155

155

So we set the unique property to a function 156

156

and then to get the unique values of an array 157

157

all we have to do is to create a new set 158

158

and pass the array in there. 159

159

And this keyboard is going to be the array 160

160

on which this method will be called. 161

161

And so now we just need to put this 162

162

into an array 163

163

and spread it like this, 164

164

as we have already done multiple times before. 165

165

And so we can now use that. 166

166

So array.unique, 167

167

and this should now return an array 168

168

with only the unique values. 169

169

While we don't have a lot of duplicates here 170

170

let's add another six here and maybe another nine. 171

171

And so let's see what happens 172

172

and indeed that worked. 173

173

Beautiful. 174

174

So just to recap, we added a new method 175

175

to the prototype property of the array constructor. 176

176

And so therefore now all arrays will inherit this method. 177

177

And so we can then call that method 178

178

on any array that we want. 179

179

However, what we just did here. 180

180

So extending the prototype 181

181

of a built-in object is generally not a good idea. 182

182

I mean if you're working just on a small project on your own 183

183

then I guess you could do this, 184

184

but really don't get into the habit of doing this 185

185

for multiple reasons. 186

186

The first reason is that the next version of JavaScript 187

187

might add a method with the same name 188

188

that we are adding, for example this one here, 189

189

but it might work in a different way. 190

190

And so your code will then use that new method 191

191

which, remember, works differently. 192

192

And then that will probably break your code. 193

193

And the second reason why you shouldn't do this 194

194

is because when you work on a team of developers, 195

195

then this is really gonna be a bad idea 196

196

because if multiple developers implement the same method 197

197

with a different name 198

198

then that's just going to create so many bugs 199

199

that it's just not worth doing this. 200

200

So it's just a nice and fun experiment 201

201

but in practice, you should probably not do it. 202

202

Now for a little bit of fun to finish this video. 203

203

Let's take a look 204

204

at some more built-in objects here in the console. 205

205

So for example, we can select this DOM element here. 206

206

And so let's do that. 207

207

This H1. 208

208

So that's document.querySelector 209

209

H1, 210

210

and we already know that all the DOM elements 211

211

are behind the scenes objects. 212

212

And so let's take a look at this object. 213

213

Well, that doesn't really work. 214

214

So that just gives us the object. 215

215

So let's try a console.dir 216

216

on this H1. 217

217

And so now we get the actual object. 218

218

So here we have all this different stuff 219

219

and all these properties 220

220

and methods that we already worked with. 221

221

But what I'm interested in here is the prototype 222

222

and you see that the prototype is an HTML heading element. 223

223

All right? 224

224

And so that itself will contain a lot of different stuff, 225

225

one more time. 226

226

So let's scroll all the way down. 227

227

And so this is now an HTML element. 228

228

And do you remember these names here from somewhere? 229

229

Well, these are exactly the types of objects 230

230

that we talked about in one of the first lectures 231

231

in the DOM section. 232

232

Remember that? 233

233

So we had this big diagram 234

234

with all these different types of elements. 235

235

And so now here we can actually inspect them. 236

236

And so behind the scenes 237

237

these different elements are really different 238

238

like constructor functions. 239

239

So if we go down here 240

240

we should now see element 241

241

and indeed, here it is. 242

242

And so again, 243

243

you can recall that diagram that we inspected there. 244

244

And then you will remember 245

245

that HTML element was a child element of element 246

246

and element itself was a child of node, right? 247

247

And so therefore the prototype of element 248

248

is gonna be node. 249

249

So if we scroll all the way down here 250

250

then you see indeed node, and now this one is event target. 251

251

And so you'll see, this is a huge, huge prototype chain. 252

252

And only now we are at the end. 253

253

And so the end is an object 254

254

and that's it. 255

255

So this prototype chain has easily six or seven levels. 256

256

And so you see that it can go really, really deep. 257

257

So if you want to go and check this out by yourself 258

258

then that would probably be a really nice exercise. 259

259

And finally, let's just also 260

260

console.dir some random function. 261

261

So the function doesn't matter. 262

262

I just want to be able to look at the function. 263

263

Okay. 264

264

And so, as I mentioned a bit earlier in this video 265

265

the function itself is also an object. 266

266

And so therefore it also has a prototype. 267

267

And in this case to prototype will then contain the methods 268

268

that we have used previously on functions. 269

269

So that's apply, bind and call, remember. 270

270

And so once again 271

271

this is the reason why we can actually 272

272

call methods on functions. 273

273

It's because they are objects and objects have prototypes. 274

274

And in this case, this function prototype. 275

275

So you can spend a lot more time 276

276

if you're really interested in exploring all of this. 277

277

But once you think you have a good understanding 278

278

of all the previous lectures 279

279

then you can move on to the next video 280

280

which is gonna be the first coding challenge 281

281

of this section.