Original subtitles

1 1

Let's now consolidate the knowledge 2

2

that we got over the last two videos 3

3

in a nice diagram that brings everything together 4

4

that we know so far. 5

5

And everything starts 6

6

with the person the constructor function 7

7

that we've been developing. 8

8

Now, this constructor function has a prototype property 9

9

which is an object 10

10

and inside that object, 11

11

we defined the calcAge method 12

12

and person dot prototype itself 13

13

actually also has a reference back to person 14

14

which is the constructor property. 15

15

So, essentially person dot prototype dot constructor 16

16

is gonna point back to person itself. 17

17

Now remember, person dot prototype 18

18

is actually not the prototype of person 19

19

but of all the objects that are created 20

20

through the person function 21

21

and speaking of the created objects 22

22

let's now actually analyze how an object is created 23

23

using the new operator and the constructor function. 24

24

So, when we call a function, 25

25

any function with the new operator 26

26

the first thing that is gonna happen 27

27

is that a new empty object is created instantly. 28

28

Then the this keyboard and the function call 29

29

is set to the newly created object. 30

30

So, inside the function's execution context 31

31

this is now the new empty object 32

32

and that's why in the functions code 33

33

we set the name and birth year properties 34

34

on the this keyword 35

35

because doing so will ultimately set them on the new object. 36

36

So next comes the magical step. 37

37

So now the new object is linked 38

38

to the constructor functions prototype property. 39

39

So in this case, person dot prototype. 40

40

And this happens internally 41

41

by adding the underscore, underscore protal property 42

42

to the new object. 43

43

So, person dot prototype is now the new objects prototype 44

44

which is denoted in the underscore, underscore 45

45

proto property of Jonas. 46

46

So again, underscore proto always points 47

47

to an object prototype 48

48

and that is true for all objects in JavaScript. 49

49

Great. 50

50

And finally the new object is automatically returned 51

51

from the function unless 52

52

we explicitly return something else. 53

53

But in a constructor function like person 54

54

we usually never do that. 55

55

Okay, and with this the result of the new operator 56

56

and the person constructor function 57

57

is a new object that we just created programmatically 58

58

and that is now stored in the Jonas variable 59

59

and this whole process that I just explained 60

60

is how it works with function constructors 61

61

and also with ES6 classes 62

62

but not with the object dot create syntax 63

63

that we're gonna use later. 64

64

So just keep this in mind 65

65

once we read the object dot create lectures. 66

66

But anyway, why does this work this way 67

67

and why is this technique so powerful and useful? 68

68

and to answer that let's move on to the next line of code. 69

69

So, here we are attempting to call the calcAge function 70

70

on the jonas object. 71

71

However, JavaScript can actually not find 72

72

the calcAge function directly in the jonas object, right? 73

73

It is simply not there 74

74

and we already observed this behavior in the last lecture. 75

75

Remember that? 76

76

So, what happens now in this situation? 77

77

Well, if a property or a method cannot be found 78

78

in a certain object JavaScript will look into its prototype 79

79

and there it is. 80

80

So there is the calcAge function that we were looking for 81

81

and so JavaScript will simply use this one. 82

82

That's how the calcAge function can run correctly 83

83

and return a result. 84

84

And the behavior that we just described 85

85

is what we already called prototypal inheritance 86

86

or delegation. 87

87

So the jonas object inherited the calcAge method 88

88

from its prototype 89

89

or in other words it delegated the calcAge functionality 90

90

to its prototype. 91

91

Now, the beauty of this 92

92

is that we can create as many person objects as we like 93

93

and all of them will then inherit this method. 94

94

So we can call this calcAge method on all the person objects 95

95

without the method being directly attached 96

96

to all the objects themselves 97

97

and this is essential for code performance. 98

98

Just imagine that we had a 1,000 objects in the code 99

99

and if all of them would have to carry the calcAge function 100

100

around then that would certainly impact performance. 101

101

So instead, they can all simply use the calcAge function 102

102

from their common prototype, okay? 103

103

So that makes sense, right? 104

104

Now the fact that Jonas is connected to a prototype 105

105

and the ability of looking up methods and properties 106

106

in a prototype is what we call the prototype chain. 107

107

So the jonas object and it's prototype 108

108

basically form a prototype chain 109

109

but actually the prototype chain does not end here. 110

110

So let's understand the prototype chain a bit better 111

111

by zooming out and looking at the whole picture. 112

112

So, here is the diagram that we already had 113

113

with the person the function constructor 114

114

and its prototype property 115

115

and to jonas object linked to its prototype 116

116

via the underscore proto property, 117

117

so nothing new yet. 118

118

But now let's remember that person dot prototype itself 119

119

is also an object 120

120

and all objects in JavaScript have a prototype, right? 121

121

Therefore, person dot prototype itself 122

122

must also have a prototype. 123

123

And the prototype of person dot prototype 124

124

is object dot prototype. 125

125

Why is that? 126

126

Well, person dot prototype is just a simple object 127

127

which means that it has been built 128

128

by the built in object constructor function 129

129

and this is actually the function 130

130

that is called behind the scenes 131

131

whenever we create an object literal. 132

132

So just an object simply with curly braces. 133

133

So essentially the curly braces 134

134

are just like a shortcut to writing new object, okay? 135

135

But anyway, what matters here 136

136

is that person dot prototype itself 137

137

needs to have a prototype 138

138

and since it has been created 139

139

by the object constructor function 140

140

its prototype is gonna be object dot prototype. 141

141

It's the same logic as with the jonas object. 142

142

So, since jonas has been built by a person, 143

143

person dot prototype is the prototype of Jonas, all right? 144

144

Now this entire series of links 145

145

between the objects is what is called the prototype chain 146

146

and object dot prototype is usually the top 147

147

of the prototype chain 148

148

which means that it's prototype is null. 149

149

So it's underscore proto property will simply point to null 150

150

which then marks the end of the prototype chain. 151

151

So in a certain way the prototype chain 152

152

is very similar to the scope chain but with prototypes. 153

153

So, in the scope chain 154

154

whenever JavaScript can find a certain variable 155

155

in a certain scope, 156

156

it looks up into the next scope and a scope chain 157

157

and tries to find the variable there. 158

158

On the other hand in the prototype chain 159

159

whenever JavaScript can find a certain property 160

160

or method in a certain object 161

161

it's gonna look up into the next prototype 162

162

in the prototype chain 163

163

and see if it can find it there, okay? 164

164

So again the prototype chain is pretty similar 165

165

to the scope chain 166

166

but instead of working with scopes, 167

167

it works with properties and methods in objects, all right? 168

168

And now let's actually see another example 169

169

of a method lookup. 170

170

To do that we call the has own property method 171

171

on the jonas object. 172

172

So, just like in the previous slide, 173

173

JavaScript is gonna start 174

174

by trying to find the called method on the object itself. 175

175

But of course 176

176

it can't find the has own property method on Jonas. 177

177

So, according to how the prototype chain works, 178

178

it will then look into its prototype 179

179

which is person dot prototype. 180

180

Now, we didn't define any has own property method 181

181

there either 182

182

and so a JavaScript is not gonna find it there 183

183

and so therefore it will move up even further 184

184

in the prototype chain 185

185

and now look into object dot prototype 186

186

and object dot prototype does actually contain a bunch 187

187

of built in methods and has own property is one of them. 188

188

Great, so JavaScript can then take this one 189

189

and run it on the jonas object 190

190

as if has own property had been defined directly on Jonas. 191

191

And remember the method has not been copied 192

192

to the jonas object. 193

193

Instead, it simply inherited the method 194

194

from object dot prototype through the prototype chain. 195

195

Okay, and that's actually it. 196

196

That's all I have to tell you at this point. 197

197

So this is in a nutshell the magic of prototypes 198

198

and a prototype chain. 199

199

And this will actually become even more interesting 200

200

and useful once we add inheritance 201

201

between two different kinds of objects 202

202

or two different classes so to say. 203

203

For example, having a student class inherit 204

204

from a person class 205

205

just like we learned in one of the four pillars 206

206

of OOP, remember. 207

207

So there is a lot of exciting stuff ahead 208

208

and so let's move on.