Original subtitles

1 1

Welcome back to the second part 2

2

of the introduction to Object-Oriented Programming. 3

3

And in this lecture, we will learn about OOP 4

4

specifically in JavaScript. 5

5

So, how it's different from the more traditional OOP 6

6

and also different ways 7

7

of implementing this paradigm in JavaScript. 8

8

And don't worry, this will be a lot shorter 9

9

than the last lecture. 10

10

So, just to review. 11

11

In the last lecture, we talked about 12

12

the classical Object-Oriented Programming model 13

13

with classes and instances created from these classes. 14

14

And remember, a class is like a blueprint 15

15

which is a theoretical plan 16

16

and that we use to build many houses in the real world. 17

17

And in the same way, 18

18

the theoretical class can be used to create actual objects 19

19

which are called instances 20

20

and which we can then use in our cout. 21

21

And this process of creating an instance 22

22

is called instantiation. 23

23

Now earlier, I said that in JavaScript 24

24

things work a bit differently. 25

25

So why did I first tell you about classes and instances? 26

26

Well, it's because we do have similar concepts in JavaScript 27

27

and so it's very useful 28

28

to first understand the class instance model. 29

29

Plus, many people also just use this terminology 30

30

in the context of JavaScript. 31

31

And finally, JavaScript syntax itself 32

32

uses also some of these terms for example, instances. 33

33

And so, you really need to know 34

34

what a class is and what an instance is. 35

35

Now, anyway, how does OOP actually work in JavaScript? 36

36

Well, in JavaScript we have something called prototypes 37

37

and all objects in JavaScript 38

38

are linked to a certain prototype object. 39

39

So we say that each object has a prototype. 40

40

And now here comes the magic. 41

41

So, the prototype object contains methods and properties 42

42

that all the objects that are linked to that prototype 43

43

can access and use. 44

44

And this behavior is usually called prototypal inheritance. 45

45

So, again, prototypal inheritance means that all objects 46

46

that are linked to a certain prototype object 47

47

can use the methods and properties 48

48

that are defined on that prototype. 49

49

So basically, objects inherit methods and properties 50

50

from the prototype which is the reason why this mechanism 51

51

is called prototypal inheritance. 52

52

Just note that this inheritance is actually different 53

53

from the inheritance that we talked about 54

54

in the last lecture. 55

55

So that was one class inheriting from another class. 56

56

But in this case, 57

57

it's basically an instance inheriting from a class. 58

58

So that's very different 59

59

and so keep that in mind 60

60

or maybe in your notes. 61

61

Alright? 62

62

Now we can also say that objects delegate behavior 63

63

to the linked prototype object. 64

64

And behavior is just another term for methods here. 65

65

So besides prototypal inheritance, 66

66

we also call this mechanism, delegation. 67

67

And that's also the reason why 68

68

this arrow is pointing upwards 69

69

because technically, objects delegate their behavior 70

70

to the prototype. 71

71

On the other hand, in classical OOP with classes, 72

72

the behavior, so the methods, are actually copied 73

73

from the class to the object 74

74

and so that is completely different. 75

75

Now, I don't want you to stress out 76

76

about the exact terminology here, okay? 77

77

So I know that this is a lot of new stuff to take in, 78

78

so a lot of new words and new concepts. 79

79

But this is just to paint a very clear picture 80

80

and to give you the complete overview. 81

81

What matters to me 82

82

is that you understand how does prototypal inheritance 83

83

actually works. 84

84

Because, when we actually start using this in practice 85

85

in the next lecture, 86

86

it won't really matter 87

87

if it's called inheritance or delegation 88

88

as long as it just works as intended, right? 89

89

But since you came to this course 90

90

to learn how things actually work in JavaScript, 91

91

I'm giving you all that information here. 92

92

Even though for now it looks a little bit too much, 93

93

but am sure you will find it useful eventually. 94

94

So actually, we will come back to this diagram 95

95

and fill it with some more detail 96

96

after we have actually implemented prototypes in JavaScript. 97

97

So after you have actually see how they work in practice. 98

98

And by then, am sure that all this 99

99

will make 100% sense to you. 100

100

But anyway, we have actually already seen this mechanism 101

101

in action many times before 102

102

but without knowing that it was happening. 103

103

For example, each time that we used an array method 104

104

like map, we are able to use that method 105

105

because of prototypal inheritance. 106

106

So, when you go to MDN to check the documentation 107

107

for any array method, 108

108

what you will see there is that it's actually called 109

109

array.prototype.map. 110

110

But why is that relevant? 111

111

So, what does this mean? 112

112

Well, array.prototype is the prototype object 113

113

of all the arrays that we create in JavaScript. 114

114

So, just like this example array called num here. 115

115

Now this prototype object contains all the 116

116

array methods, including map. 117

117

So, this is where they are actually defined. 118

118

So, since array.prototype is the prototype of the 119

119

num array, it means that num is linked to that prototype. 120

120

And therefore, it has access to all the methods 121

121

that are defined on the array.prototype object, 122

122

just like the map method. 123

123

So, in a sense, our array inherits the map method. 124

124

Or again, we can also say that the array delegated 125

125

the behavior of mapping to its prototype. 126

126

So, you can choose whatever makes more sense in your mind. 127

127

But what matters, is that the map method 128

128

is actually not defined on the num array itself 129

129

but on its prototype. 130

130

And of course, we're gonna check out this behavior 131

131

also in our cout and practice, 132

132

okay? 133

133

Right now, you might have a ton of questions 134

134

in your head. 135

135

Like, how do we actually create prototypes? 136

136

And, how do we link objects to prototypes? 137

137

And how can we create new objects without having classes 138

138

from which we can instantiate objects? 139

139

So, in summary, the question is 140

140

how do we implement Object-Oriented Programming 141

141

in JavaScript in practice? 142

142

Well, in JavaScript there are actually three different ways 143

143

of doing all this: the constructor function technique, 144

144

ES6 classes and also the Object.create(). 145

145

So first, constructor functions are a way 146

146

of creating objects programmatically, 147

147

using a function which will also set 148

148

the new object's prototype. 149

149

And this is actually how built-in objects like arrays 150

150

or maps or sets are implemented. 151

151

Also, this is how OOP has been done in JavaScript 152

152

basically since the beginning. 153

153

Next, the ES6 release introduced classes into JavaScript. 154

154

And so now, ES6 classes are actually the more modern way 155

155

of doing OOP in JavaScript. 156

156

However, keep in mind that these are actually 157

157

not the kind of classes that we talked about 158

158

in the last lecture and in the last slide. 159

159

They are instead just so called 'synthetic sugar' 160

160

over constructor functions. 161

161

So this means that ES6 classes are basically just 162

162

a layer of obstruction over constructor functions. 163

163

So, it's really just a nicer syntax 164

164

that makes it easier for newcomers to do OOP in JavaScript. 165

165

But behind the scenes, ES6 classes are actually implemented 166

166

with constructor functions. 167

167

And so they also use prototypal inheritance 168

168

just like we learnt in the last slide. 169

169

Finally, there's also the object.create() 170

170

which is basically the easiest and most straightforward way 171

171

of linking an object to a prototype object. 172

172

However, it's not as used as the other two methods 173

173

as we will see over the next couple of lectures. 174

174

Now, to finish, one important thing to keep in mind 175

175

is that the four principles of Object-Oriented Programming 176

176

that we learnt in the last lecture, 177

177

so that's obstruction, encapsulation, inheritance 178

178

and polymorphism are still valid and important 179

179

with prototypal inheritance. 180

180

And throughout this section, 181

181

we will of course learn how to use 182

182

and implement these principles. 183

183

Alright. 184

184

And with all that being said, 185

185

let's now finally put OOP into practice 186

186

and get a bit more technical.