Original subtitles

1 1

And now finally lets look at how we can use Object.create 2

2

in order to implement a complex prototype chain. 3

3

So similar to what we implemented before 4

4

with classes and constructor functions. 5

5

And so here I already copied this object here 6

6

which will serve as the prototype 7

7

to create a new person object using Object.create. 8

8

Alright. 9

9

And so of course, this will basically be our parent class, 10

10

and we already know that Object.create it's a bit easier 11

11

to use and to understand. 12

12

And so it shouldn't be too hard to implement 13

13

a similar hierarchy between a person and student. 14

14

So here, 15

15

PersonProto. 16

16

So this object up here used to be the prototype of all 17

17

the new person objects. 18

18

But now we basically want to add another prototype 19

19

in the middle of the chain. 20

20

So between PersonProto and the object. 21

21

And so what we're going to do is 22

22

to make student inherit directly from person. 23

23

So we're going to create now an object 24

24

that will be the prototype of students. 25

25

So StudentProto, and this will be, 26

26

for now an empty object. 27

27

So Object.create and to prototype will be, 28

28

PersonProto. 29

29

And that's it. 30

30

And so now we can use this StudentProto 31

31

to create new students. 32

32

So let's create jay, 33

33

and Object.create, create, 34

34

and it will inherit from StudentProto. 35

35

And so now the StudentProto object 36

36

that we just created earlier, 37

37

is now the prototype off the jay object. 38

38

So again, the StudentProto object 39

39

is now the prototype of jay, 40

40

and the PersonProto object is in turn 41

41

the prototype of StudentProto. 42

42

And so therefore, PersonProto is a parent prototype of jay, 43

43

which means that it's in its prototype chain. 44

44

Whoa, but that once again sounded a bit confusing. 45

45

And so let's make sure that we really understand 46

46

this by looking at a nice diagram again. 47

47

So it all starts with the PersonProto object, 48

48

which used to be the prototype of all person objects, 49

49

but now using Object.create, 50

50

we make it so that PersonProto will actually 51

51

become the prototype of StudentProto. 52

52

And what this does is that now 53

53

basically student inherits from person. 54

54

And so it is, we already established 55

55

the parent child relationship that we were looking for. 56

56

Now to finish, all we need to do 57

57

is to use Object.create again, 58

58

but this time to create a new actual student object. 59

59

And of course we make the student. 60

60

So jay in this course inherit from StudentProto, 61

61

which is now jay's prototype. 62

62

And like this, we created a nice and simple prototype chain. 63

63

So jay inherits from StudentProto, 64

64

which in turn inherits from PersonProto, 65

65

and therefore the jay object will be able 66

66

to use all the methods that are contained 67

67

in StudentProto and PersonProto. 68

68

Now with the scope chain correctly established, 69

69

let's also add an init method to StudentProto. 70

70

So just like we did here with PersonProto, 71

71

so that we don't have to manually specify 72

72

the properties on any new student object. 73

73

So let's add that here to StudentProto.init. 74

74

So this is gonna be receiving the first name, then, 75

75

the birth year, and again, 76

76

the course. 77

77

And so now we can actually use the same trick 78

78

that we used before, 79

79

where we use constructor functions. 80

80

So what I mean is to take advantage 81

81

basically of this init method 82

82

so that we don't have to write the same code again. 83

83

So basically the child prototype can reuse 84

84

this init method here from the person prototype, 85

85

which is the parent prototype, right? 86

86

So that is PersonProto.init.call, 87

87

because once again, we want to set 88

88

the this keywords to the this keyword in this method here. 89

89

So this and then first name and the birth year. 90

90

And then of course we set the course property here, 91

91

which is unique to the student. 92

92

So let's now use that method jay.init. 93

93

So Jay born in, let's say 2010, and again, computer science. 94

94

Alright. 95

95

So let's take a look, 96

96

and yeah, that works. 97

97

That's nice. 98

98

And let's now add again, the introduced method here. 99

99

Just so that it is similar to the other two techniques 100

100

that we used earlier. 101

101

So introduce, 102

102

is gonna be a function. 103

103

And let me just again, grab that from here. 104

104

Alright. 105

105

And now let's call jay.introduce, 106

106

and indeed that works. 107

107

And now, as you would expect, 108

108

we should also be able to call jay.calcAge, 109

109

because that method is up here in the prototype chain. 110

110

And so that has got to work as well. 111

111

And yeah. 112

112

So 27 and one more time, 113

113

just to take a look here at the prototype chain, 114

114

we see that indeed, it has a prototype, which contains 115

115

the init and the introduce methods. 116

116

So these two that we just created, 117

117

and this prototype in turn has its own prototype, 118

118

which is then the one, 119

119

which contains calcAge method, 120

120

and so that is indeed PersonProto. 121

121

So this is exactly the prototype chain 122

122

that we just saw earlier in the diagram. 123

123

Now, okay. 124

124

And that's actually it. 125

125

So in this version, we don't even worry 126

126

about constructors anymore, 127

127

and also not about prototype properties, 128

128

and not about the new operator. 129

129

So it's really just objects linked to other objects. 130

130

And it's all really simple and beautiful, 131

131

if you ask me. 132

132

And in fact, some people think that this pattern 133

133

is a lot better than basically trying 134

134

to fake classes in JavaScript, 135

135

because faking classes in the way 136

136

that they exist in other languages like Java or C plus plus 137

137

is exactly what we do by using constructor functions, 138

138

and even ES6 classes. 139

139

But here, in this technique 140

140

that I just showed you with Object.create, 141

141

we are, in fact, not faking classes. 142

142

All we are doing is simply linking objects together, 143

143

where some objects then serve 144

144

as the prototype of other objects. 145

145

And personally, I wouldn't mind if this 146

146

was the only way of doing OOP in JavaScript, 147

147

but as I mentioned earlier, 148

148

ES6 classes and constructor functions 149

149

are actually way more used in the real world. 150

150

But in any case, it's still super important and valuable 151

151

that you learned all of these three techniques now, 152

152

because you will see them all in the real world still. 153

153

And this also allows you to think about this on your own 154

154

and choose the style that you like the best, 155

155

but again, in the real world, 156

156

and especially in modern JavaScript, 157

157

you will mostly see ES6 classes being used now. 158

158

And so, since I want to prepare you for the real world, 159

159

I will start using classes from this point on.