Original subtitles

1 1

So we learned about constructor functions and ESX classes. 2

2

But there is actually a third way 3

3

of implementing prototypal inheritance or delegation, 4

4

as we can also call it. 5

5

And that third way is 6

6

to use a function called Object.create, 7

7

which works in a pretty different way 8

8

than constructor functions and classes work. 9

9

Now, with Object.create, 10

10

there is still the idea of prototypal inheritance. 11

11

However, there are no prototype properties involved. 12

12

And also no constructor functions, and no new operator. 13

13

So instead, we can use Object.create 14

14

to essentially manually set the prototype of an object, 15

15

to any other object that we want. 16

16

Okay, so if we can set the prototype to any object, 17

17

let's actually create an object 18

18

that we want to be the prototype of all the person objects. 19

19

So essentially, let's recreate the person class 20

20

from earlier, so let's say, person, 21

21

and I'm calling it person PersonProto, 22

22

which stands for prototype. 23

23

Because, again, 24

24

this object is gonna be literally the prototype 25

25

of all the person objects. 26

26

And now, this is actually just a simple object literal. 27

27

And so now, what should we actually put in here? 28

28

We're gonna put exactly what we put before 29

29

into the prototype property. 30

30

And so that was the CalcAge method. 31

31

So we did that, actually here first manually. 32

32

So we added CalcAge to the prototype property of person. 33

33

And then here, we also did that, 34

34

but in a more implicit way. 35

35

So JavaScript did that for us behind the scenes. 36

36

But now let's take this function here. 37

37

Or actually, we can take all of this, 38

38

because we can also write methods in this way, 39

39

in object literals. 40

40

And so that's actually it. 41

41

That's all the methods 42

42

that we want the person objects to inherit. 43

43

And so we put them in the prototype. 44

44

And now all we need to do is 45

45

to actually create a person object 46

46

with this object here as the prototype. 47

47

And for that, we can use Object.create. 48

48

So let's create a person called Steven here. 49

49

And so now, Object.create. 50

50

And here we pass in the object that we want 51

51

to be the prototype of the new object. 52

52

So that's PersonProto. 53

53

And so this will now return a brand new object, 54

54

that is linked to the prototype that we passed in here. 55

55

So Steven here is right now an empty object. 56

56

And it will be linked to this PersonProto object, 57

57

which will be its prototype. 58

58

And we can actually already see 59

59

that here in the console. 60

60

So as I said, For now, it is empty. 61

61

But we already have the prototype. 62

62

And in there, we see we have CalcAge. 63

63

But now we don't have any properties on the object yet. 64

64

So let's quickly fix that. 65

65

So Stephen.name. 66

66

So I'm doing it here, 67

67

just like I would do in any other object literal. 68

68

And so this is not ideal, of course. 69

69

But we're gonna fix that in a minute. 70

70

Because of course, we want actually a programmatic way 71

71

of creating new objects, 72

72

instead of having to do it like this. 73

73

But again, for now, 74

74

we are just worried about the prototypes 75

75

and the prototype chain here. 76

76

So we should now be able to say Stephen.CalcAge, 77

77

and, yeah, that worked. 78

78

And so you see that we just like before, 79

79

implemented prototypal inheritance, 80

80

but in a completely different way. 81

81

And now, just to make sure that we're all 82

82

on the same page here, 83

83

let's make sure that we really understand 84

84

this big difference. 85

85

And so let's take a look at a diagram 86

86

of what's really going on here. 87

87

So here at the right side, 88

88

we have the way it works where de constructor functions, 89

89

just as we have been doing it up until this point. 90

90

So when we use the new operator 91

91

in constructor functions or classes, 92

92

it automatically sets the prototype 93

93

of the instances to the constructors, 94

94

prototype property. 95

95

So this happens automatically. 96

96

And so that's nothing new at this point for you. 97

97

Now, on the other hand, with Object.create, 98

98

we can set the prototype of objects manually 99

99

to any object that we want. 100

100

And in this case, 101

101

we manually set the prototype 102

102

of the Steven object to the person proto object. 103

103

And that's it. 104

104

Now the two objects 105

105

are effectively linked through the proto property, 106

106

just like before. 107

107

So now looking at properties, 108

108

or methods in a prototype chain, 109

109

works just like it worked 110

110

in function constructors, or classes. 111

111

And so the prototype chain, in fact, 112

112

looks exactly the same here. 113

113

The big difference is 114

114

that we didn't need any constructor function, 115

115

and also no prototype property at all, 116

116

to achieve the exact same thing. 117

117

So this is actually a bit more straightforward, 118

118

and a bit more natural. 119

119

And I guess, that it might also be easier to understand. 120

120

However, the reason why I'm showing you 121

121

this Object.create technique, 122

122

right at the end, is because in practice, 123

123

in the real world, 124

124

this is actually the least used way 125

125

of implementing prototypal inheritance. 126

126

However, it's still very important 127

127

to know exactly how Object.create works, 128

128

because you will still stumble upon 129

129

this in the real world. 130

130

And even more importantly, 131

131

we will need Object.create 132

132

to link prototypes in the next lecture, 133

133

in order to implement inheritance between classes. 134

134

So with that, we're gonna take object oriented programming 135

135

to a whole new level. 136

136

And the Object.create function is gonna be crucial in that, 137

137

as we will see. 138

138

And of course, we can now verify everything I just said, 139

139

using CALT here. So we can do Steven.__Proto. 140

140

And so that is now exactly the object 141

141

that we specified up here. 142

142

So you see, this is exactly PersonProto. 143

143

And that makes sense, 144

144

Because here, we said explicitly, 145

145

that personal proto should in fact, 146

146

be the prototype of Steven. 147

147

And so therefore, this, of course, 148

148

is gonna be true, and it is. 149

149

So now that we know exactly what's going on here, 150

150

let's quickly create another person. 151

151

So const Sarah = Object.create. 152

152

And once again, here, use PersonProto. 153

153

But now, in order to set properties on this object, 154

154

let's do it in a better way than what we did here. 155

155

So doing this is a little bit weird. 156

156

And it goes against the spirit 157

157

of creating objects programmatically. 158

158

So if we're serious about using Object.create, 159

159

we should implement a function 160

160

that basically does this work for us. 161

161

So let's create a new method here. 162

162

And this can have any name, 163

163

so I will call it init. 164

164

But this is going to be a little bit similar 165

165

to the constructor, that we have in classes. 166

166

So this one will also get a name, 167

167

or let's say first name, 168

168

and a birth year. 169

169

And then just like before, 170

170

we will use this property 171

171

and set first name to first name, 172

172

and then this.birth year, 173

173

set it to birth year, as well. 174

174

And so you see that 175

175

this looks a bit like the constructor function 176

176

that we created earlier. 177

177

However, this has actually nothing 178

178

to do with any constructor function, 179

179

because we are not using the new operator 180

180

to call this we will simply do Sarah.init 181

181

and then we will pass in the arguments. 182

182

So let's say Sarah, and 1979, for example. 183

183

And so let's then use CalcAGe here as well. 184

184

And so then, that just works beautifully as well. 185

185

So here this keyword will of course, 186

186

also points to the Sarah object now, 187

187

but it does so because we explicitly called init on Sarah. 188

188

So again, this has nothing to do 189

189

with constructor functions that we saw earlier. 190

190

And it's also completely different 191

191

from the constructor method that we have in ESX classes. 192

192

This is just a manual way 193

193

of basically initializing the object. 194

194

And this here could be any name. 195

195

And indeed, we could have a method like 196

196

this in any other object literal. 197

197

So essentially, this is how Object.create works. 198

198

So the big takeaway is 199

199

that Object.create creates a new object, 200

200

and the prototype of that object 201

201

will be the object that we passed in. 202

202

So that's what matters from this video. 203

203

And that's very important to understand in the future, 204

204

when we will implement true class inheritance because 205

205

for that, we are gonna need Object.create.