1 00:00:01,430 --> 00:00:03,800 Welcome back to the second part 2 00:00:03,800 --> 00:00:07,860 of the introduction to Object-Oriented Programming. 3 00:00:07,860 --> 00:00:10,870 And in this lecture, we will learn about OOP 4 00:00:10,870 --> 00:00:13,780 specifically in JavaScript. 5 00:00:13,780 --> 00:00:16,933 So, how it's different from the more traditional OOP 6 00:00:17,798 --> 00:00:19,350 and also different ways 7 00:00:19,350 --> 00:00:23,410 of implementing this paradigm in JavaScript. 8 00:00:23,410 --> 00:00:26,350 And don't worry, this will be a lot shorter 9 00:00:26,350 --> 00:00:27,583 than the last lecture. 10 00:00:29,490 --> 00:00:31,210 So, just to review. 11 00:00:31,210 --> 00:00:33,140 In the last lecture, we talked about 12 00:00:33,140 --> 00:00:36,280 the classical Object-Oriented Programming model 13 00:00:36,280 --> 00:00:41,280 with classes and instances created from these classes. 14 00:00:41,390 --> 00:00:44,870 And remember, a class is like a blueprint 15 00:00:44,870 --> 00:00:47,026 which is a theoretical plan 16 00:00:47,026 --> 00:00:52,020 and that we use to build many houses in the real world. 17 00:00:52,020 --> 00:00:53,350 And in the same way, 18 00:00:53,350 --> 00:00:57,940 the theoretical class can be used to create actual objects 19 00:00:57,940 --> 00:01:00,080 which are called instances 20 00:01:00,080 --> 00:01:02,503 and which we can then use in our cout. 21 00:01:03,350 --> 00:01:06,040 And this process of creating an instance 22 00:01:06,040 --> 00:01:07,883 is called instantiation. 23 00:01:08,960 --> 00:01:12,040 Now earlier, I said that in JavaScript 24 00:01:12,040 --> 00:01:14,640 things work a bit differently. 25 00:01:14,640 --> 00:01:19,540 So why did I first tell you about classes and instances? 26 00:01:19,540 --> 00:01:24,120 Well, it's because we do have similar concepts in JavaScript 27 00:01:24,120 --> 00:01:25,520 and so it's very useful 28 00:01:25,520 --> 00:01:29,570 to first understand the class instance model. 29 00:01:29,570 --> 00:01:33,710 Plus, many people also just use this terminology 30 00:01:33,710 --> 00:01:36,110 in the context of JavaScript. 31 00:01:36,110 --> 00:01:39,660 And finally, JavaScript syntax itself 32 00:01:39,660 --> 00:01:44,460 uses also some of these terms for example, instances. 33 00:01:44,460 --> 00:01:45,960 And so, you really need to know 34 00:01:45,960 --> 00:01:48,733 what a class is and what an instance is. 35 00:01:49,920 --> 00:01:54,920 Now, anyway, how does OOP actually work in JavaScript? 36 00:01:55,680 --> 00:02:00,150 Well, in JavaScript we have something called prototypes 37 00:02:00,150 --> 00:02:02,230 and all objects in JavaScript 38 00:02:02,230 --> 00:02:06,150 are linked to a certain prototype object. 39 00:02:06,150 --> 00:02:10,260 So we say that each object has a prototype. 40 00:02:10,260 --> 00:02:12,920 And now here comes the magic. 41 00:02:12,920 --> 00:02:17,400 So, the prototype object contains methods and properties 42 00:02:17,400 --> 00:02:21,530 that all the objects that are linked to that prototype 43 00:02:21,530 --> 00:02:24,270 can access and use. 44 00:02:24,270 --> 00:02:28,623 And this behavior is usually called prototypal inheritance. 45 00:02:29,480 --> 00:02:34,280 So, again, prototypal inheritance means that all objects 46 00:02:34,280 --> 00:02:37,550 that are linked to a certain prototype object 47 00:02:37,550 --> 00:02:40,040 can use the methods and properties 48 00:02:40,040 --> 00:02:43,360 that are defined on that prototype. 49 00:02:43,360 --> 00:02:47,470 So basically, objects inherit methods and properties 50 00:02:47,470 --> 00:02:51,220 from the prototype which is the reason why this mechanism 51 00:02:51,220 --> 00:02:54,310 is called prototypal inheritance. 52 00:02:54,310 --> 00:02:58,060 Just note that this inheritance is actually different 53 00:02:58,060 --> 00:03:00,520 from the inheritance that we talked about 54 00:03:00,520 --> 00:03:02,260 in the last lecture. 55 00:03:02,260 --> 00:03:06,150 So that was one class inheriting from another class. 56 00:03:06,150 --> 00:03:07,300 But in this case, 57 00:03:07,300 --> 00:03:11,610 it's basically an instance inheriting from a class. 58 00:03:11,610 --> 00:03:13,230 So that's very different 59 00:03:13,230 --> 00:03:15,150 and so keep that in mind 60 00:03:15,150 --> 00:03:17,150 or maybe in your notes. 61 00:03:17,150 --> 00:03:18,780 Alright? 62 00:03:18,780 --> 00:03:22,760 Now we can also say that objects delegate behavior 63 00:03:22,760 --> 00:03:25,440 to the linked prototype object. 64 00:03:25,440 --> 00:03:29,313 And behavior is just another term for methods here. 65 00:03:30,290 --> 00:03:32,960 So besides prototypal inheritance, 66 00:03:32,960 --> 00:03:36,090 we also call this mechanism, delegation. 67 00:03:36,090 --> 00:03:37,920 And that's also the reason why 68 00:03:37,920 --> 00:03:40,510 this arrow is pointing upwards 69 00:03:40,510 --> 00:03:44,290 because technically, objects delegate their behavior 70 00:03:44,290 --> 00:03:46,390 to the prototype. 71 00:03:46,390 --> 00:03:50,520 On the other hand, in classical OOP with classes, 72 00:03:50,520 --> 00:03:54,550 the behavior, so the methods, are actually copied 73 00:03:54,550 --> 00:03:57,130 from the class to the object 74 00:03:57,130 --> 00:03:59,790 and so that is completely different. 75 00:03:59,790 --> 00:04:02,080 Now, I don't want you to stress out 76 00:04:02,080 --> 00:04:05,770 about the exact terminology here, okay? 77 00:04:05,770 --> 00:04:09,730 So I know that this is a lot of new stuff to take in, 78 00:04:09,730 --> 00:04:13,180 so a lot of new words and new concepts. 79 00:04:13,180 --> 00:04:16,420 But this is just to paint a very clear picture 80 00:04:16,420 --> 00:04:19,130 and to give you the complete overview. 81 00:04:19,130 --> 00:04:20,480 What matters to me 82 00:04:20,480 --> 00:04:23,580 is that you understand how does prototypal inheritance 83 00:04:23,580 --> 00:04:25,200 actually works. 84 00:04:25,200 --> 00:04:28,380 Because, when we actually start using this in practice 85 00:04:28,380 --> 00:04:29,820 in the next lecture, 86 00:04:29,820 --> 00:04:31,180 it won't really matter 87 00:04:31,180 --> 00:04:34,270 if it's called inheritance or delegation 88 00:04:34,270 --> 00:04:38,550 as long as it just works as intended, right? 89 00:04:38,550 --> 00:04:40,840 But since you came to this course 90 00:04:40,840 --> 00:04:44,140 to learn how things actually work in JavaScript, 91 00:04:44,140 --> 00:04:47,050 I'm giving you all that information here. 92 00:04:47,050 --> 00:04:50,360 Even though for now it looks a little bit too much, 93 00:04:50,360 --> 00:04:52,983 but am sure you will find it useful eventually. 94 00:04:53,820 --> 00:04:57,060 So actually, we will come back to this diagram 95 00:04:57,060 --> 00:04:59,530 and fill it with some more detail 96 00:04:59,530 --> 00:05:04,100 after we have actually implemented prototypes in JavaScript. 97 00:05:04,100 --> 00:05:08,460 So after you have actually see how they work in practice. 98 00:05:08,460 --> 00:05:10,600 And by then, am sure that all this 99 00:05:10,600 --> 00:05:13,103 will make 100% sense to you. 100 00:05:14,090 --> 00:05:17,890 But anyway, we have actually already seen this mechanism 101 00:05:17,890 --> 00:05:20,380 in action many times before 102 00:05:20,380 --> 00:05:23,400 but without knowing that it was happening. 103 00:05:23,400 --> 00:05:26,860 For example, each time that we used an array method 104 00:05:26,860 --> 00:05:29,960 like map, we are able to use that method 105 00:05:29,960 --> 00:05:33,290 because of prototypal inheritance. 106 00:05:33,290 --> 00:05:36,920 So, when you go to MDN to check the documentation 107 00:05:36,920 --> 00:05:38,700 for any array method, 108 00:05:38,700 --> 00:05:41,410 what you will see there is that it's actually called 109 00:05:41,410 --> 00:05:45,330 array.prototype.map. 110 00:05:45,330 --> 00:05:47,580 But why is that relevant? 111 00:05:47,580 --> 00:05:50,000 So, what does this mean? 112 00:05:50,000 --> 00:05:53,940 Well, array.prototype is the prototype object 113 00:05:53,940 --> 00:05:57,700 of all the arrays that we create in JavaScript. 114 00:05:57,700 --> 00:06:01,860 So, just like this example array called num here. 115 00:06:01,860 --> 00:06:04,610 Now this prototype object contains all the 116 00:06:04,610 --> 00:06:07,510 array methods, including map. 117 00:06:07,510 --> 00:06:10,083 So, this is where they are actually defined. 118 00:06:10,970 --> 00:06:15,040 So, since array.prototype is the prototype of the 119 00:06:15,040 --> 00:06:20,040 num array, it means that num is linked to that prototype. 120 00:06:20,320 --> 00:06:23,610 And therefore, it has access to all the methods 121 00:06:23,610 --> 00:06:27,420 that are defined on the array.prototype object, 122 00:06:27,420 --> 00:06:30,040 just like the map method. 123 00:06:30,040 --> 00:06:34,860 So, in a sense, our array inherits the map method. 124 00:06:34,860 --> 00:06:39,280 Or again, we can also say that the array delegated 125 00:06:39,280 --> 00:06:42,900 the behavior of mapping to its prototype. 126 00:06:42,900 --> 00:06:47,150 So, you can choose whatever makes more sense in your mind. 127 00:06:47,150 --> 00:06:49,640 But what matters, is that the map method 128 00:06:49,640 --> 00:06:53,690 is actually not defined on the num array itself 129 00:06:53,690 --> 00:06:55,820 but on its prototype. 130 00:06:55,820 --> 00:06:58,640 And of course, we're gonna check out this behavior 131 00:06:58,640 --> 00:07:01,559 also in our cout and practice, 132 00:07:01,559 --> 00:07:02,392 okay? 133 00:07:04,255 --> 00:07:08,060 Right now, you might have a ton of questions 134 00:07:08,060 --> 00:07:09,510 in your head. 135 00:07:09,510 --> 00:07:13,260 Like, how do we actually create prototypes? 136 00:07:13,260 --> 00:07:16,680 And, how do we link objects to prototypes? 137 00:07:16,680 --> 00:07:20,590 And how can we create new objects without having classes 138 00:07:20,590 --> 00:07:24,010 from which we can instantiate objects? 139 00:07:24,010 --> 00:07:26,630 So, in summary, the question is 140 00:07:26,630 --> 00:07:29,550 how do we implement Object-Oriented Programming 141 00:07:29,550 --> 00:07:31,973 in JavaScript in practice? 142 00:07:32,820 --> 00:07:36,520 Well, in JavaScript there are actually three different ways 143 00:07:36,520 --> 00:07:40,420 of doing all this: the constructor function technique, 144 00:07:40,420 --> 00:07:44,607 ES6 classes and also the Object.create(). 145 00:07:45,660 --> 00:07:49,100 So first, constructor functions are a way 146 00:07:49,100 --> 00:07:51,790 of creating objects programmatically, 147 00:07:51,790 --> 00:07:54,650 using a function which will also set 148 00:07:54,650 --> 00:07:57,140 the new object's prototype. 149 00:07:57,140 --> 00:08:00,770 And this is actually how built-in objects like arrays 150 00:08:00,770 --> 00:08:04,760 or maps or sets are implemented. 151 00:08:04,760 --> 00:08:08,870 Also, this is how OOP has been done in JavaScript 152 00:08:08,870 --> 00:08:10,573 basically since the beginning. 153 00:08:11,530 --> 00:08:16,530 Next, the ES6 release introduced classes into JavaScript. 154 00:08:16,600 --> 00:08:21,210 And so now, ES6 classes are actually the more modern way 155 00:08:21,210 --> 00:08:24,370 of doing OOP in JavaScript. 156 00:08:24,370 --> 00:08:27,270 However, keep in mind that these are actually 157 00:08:27,270 --> 00:08:30,210 not the kind of classes that we talked about 158 00:08:30,210 --> 00:08:33,810 in the last lecture and in the last slide. 159 00:08:33,810 --> 00:08:37,302 They are instead just so called 'synthetic sugar' 160 00:08:37,302 --> 00:08:40,020 over constructor functions. 161 00:08:40,020 --> 00:08:43,940 So this means that ES6 classes are basically just 162 00:08:43,940 --> 00:08:48,270 a layer of obstruction over constructor functions. 163 00:08:48,270 --> 00:08:51,200 So, it's really just a nicer syntax 164 00:08:51,200 --> 00:08:56,200 that makes it easier for newcomers to do OOP in JavaScript. 165 00:08:56,370 --> 00:09:00,810 But behind the scenes, ES6 classes are actually implemented 166 00:09:00,810 --> 00:09:02,930 with constructor functions. 167 00:09:02,930 --> 00:09:06,050 And so they also use prototypal inheritance 168 00:09:06,050 --> 00:09:08,183 just like we learnt in the last slide. 169 00:09:09,380 --> 00:09:12,610 Finally, there's also the object.create() 170 00:09:13,480 --> 00:09:18,120 which is basically the easiest and most straightforward way 171 00:09:18,120 --> 00:09:22,250 of linking an object to a prototype object. 172 00:09:22,250 --> 00:09:25,990 However, it's not as used as the other two methods 173 00:09:25,990 --> 00:09:28,653 as we will see over the next couple of lectures. 174 00:09:29,590 --> 00:09:33,260 Now, to finish, one important thing to keep in mind 175 00:09:33,260 --> 00:09:37,240 is that the four principles of Object-Oriented Programming 176 00:09:37,240 --> 00:09:39,440 that we learnt in the last lecture, 177 00:09:39,440 --> 00:09:43,180 so that's obstruction, encapsulation, inheritance 178 00:09:43,180 --> 00:09:47,000 and polymorphism are still valid and important 179 00:09:47,000 --> 00:09:49,700 with prototypal inheritance. 180 00:09:49,700 --> 00:09:51,580 And throughout this section, 181 00:09:51,580 --> 00:09:53,540 we will of course learn how to use 182 00:09:53,540 --> 00:09:56,616 and implement these principles. 183 00:09:56,616 --> 00:09:57,449 Alright. 184 00:09:57,449 --> 00:09:59,670 And with all that being said, 185 00:09:59,670 --> 00:10:03,300 let's now finally put OOP into practice 186 00:10:03,300 --> 00:10:05,393 and get a bit more technical.