WEBVTT 00:00:00.270 --> 00:00:03.334 In the last talk-through, we learned how to make an object type 00:00:03.334 --> 00:00:06.184 to represent our two Winston-like objects 00:00:06.194 --> 00:00:09.234 and then initialize them with the constructors. 00:00:09.234 --> 00:00:13.472 Now, an object type doesn't just have to be associated with properties. 00:00:13.472 --> 00:00:15.866 It can also be associated with functionality. 00:00:15.866 --> 00:00:20.286 Think about the world and all the object types in it, like us humans. 00:00:20.287 --> 00:00:22.307 We all have height and age, 00:00:22.307 --> 00:00:26.287 but we also have things we can do like sleep, and eat, and program. 00:00:26.287 --> 00:00:30.679 And we wanna be able to associate those functions with those object types. 00:00:30.679 --> 00:00:34.279 In this program, which is just where we left off from last time, 00:00:34.289 --> 00:00:39.439 we've a funciton here, drawWinston, that we call on both Winston objects. 00:00:39.439 --> 00:00:44.916 Wouldn't it be neat if we could just attach that to the Winston object type? 00:00:45.046 --> 00:00:48.309 Well we can, and it's easy to do. 00:00:48.569 --> 00:00:52.475 So underneath our constructor, we're gonna write Winston -- 00:00:52.475 --> 00:00:55.575 capital W -- dot prototype. 00:00:55.575 --> 00:00:59.232 And the "prototype", that's a new word that you probably haven't seen before. 00:00:59.232 --> 00:01:04.531 And the prototype is this property of an object that we can attach 00:01:04.531 --> 00:01:09.711 functions to and it will mean that every object that's an instance of that 00:01:09.711 --> 00:01:12.531 will then have those functions on them. 00:01:12.989 --> 00:01:17.632 So we can say dot prototype and then dot, and then the function name. 00:01:17.632 --> 00:01:24.306 So we say draw, equals, and then we can go and take our drawWinston code 00:01:24.306 --> 00:01:28.026 and we can just put it, move it, inside here. 00:01:28.096 --> 00:01:32.811 All right, so now what we've done here is we've attached a draw function 00:01:32.811 --> 00:01:34.938 to our Winston prototype. 00:01:34.938 --> 00:01:40.008 And that means that we should be able to call draw() on any Winston-type object. 00:01:40.008 --> 00:01:45.031 All right, so we should be able to call draw() on winstonTeen or winstonAdult. 00:01:45.331 --> 00:01:49.549 And when we have a function like this, that we can call on an object, 00:01:49.549 --> 00:01:54.653 we actually call that a "method." So you might hear me say "method" now. 00:01:54.653 --> 00:01:58.092 So let's say this is "the draw method." Okay. 00:01:58.092 --> 00:02:03.863 So now we'll delete this, and we'll delete this, and now we're gonna see, can we call draw()? 00:02:03.863 --> 00:02:06.769 winstonTeen.draw() 00:02:07.009 --> 00:02:08.287 Okay. We have an error. 00:02:08.287 --> 00:02:13.577 We've had this error sticking out here, so it says "winstObject is not defined" 00:02:13.577 --> 00:02:18.370 Okay. So, before, we were passing this argument into drawWinston, 00:02:18.370 --> 00:02:22.710 which was the Winston object, but now we're not passing it any more. 00:02:22.710 --> 00:02:27.402 So, we could change this to pass it, and then, let's see, 00:02:27.402 --> 00:02:30.339 what would we pass here? We'd have to pass winstonTeen. 00:02:30.339 --> 00:02:33.901 Okay, that worked, but that seems also really silly. 00:02:33.901 --> 00:02:38.081 I'm already calling draw on the object itself. 00:02:38.081 --> 00:02:41.775 I shouldn't have to pass in the object as well. 00:02:41.775 --> 00:02:43.945 That seems redundant. 00:02:43.945 --> 00:02:45.665 And that's true, we shouldn't have to do that, 00:02:45.665 --> 00:02:48.245 So let's delete this here, and now let's think. 00:02:48.245 --> 00:02:51.544 If we're inside the object, what could we use 00:02:51.544 --> 00:02:54.274 to access the properties of the object? 00:02:54.274 --> 00:02:57.934 Well, you might look up at our constructor and remember that special keyword 00:02:57.934 --> 00:03:04.124 "this" and think "Ahh, what if we just change this, to this!" (laughter) 00:03:04.124 --> 00:03:07.923 So we change winstObject to "this". 00:03:08.383 --> 00:03:12.951 Because we're inside the object right now. This function is being evaluated 00:03:12.951 --> 00:03:16.781 on the object, so the "this" will refer to that current object. 00:03:16.781 --> 00:03:20.361 And so that way we can just say "this" and we'll get access to all 00:03:20.361 --> 00:03:23.041 the properties of this current object. 00:03:23.041 --> 00:03:26.520 And that totally works, see? Isn't that cool? 00:03:26.520 --> 00:03:31.547 So now we can then say winstonAdult.draw() 00:03:31.907 --> 00:03:35.291 Tada! And it will access the properties of winstonAdult 00:03:35.291 --> 00:03:38.021 because that's the object it's being called on. 00:03:38.021 --> 00:03:41.022 So that's what's really cool about this "this" keyword, 00:03:41.022 --> 00:03:44.292 even though it can be kinda confusing to say sometimes. 00:03:45.532 --> 00:03:49.258 All right, so, that was a lot of fun. So let's add another method. 00:03:49.258 --> 00:03:51.908 Okay, so, what else might Winston do? 00:03:51.908 --> 00:03:56.238 Maybe he'll talk. So we'll make a Winston.prototype.talk 00:03:56.238 --> 00:04:00.858 so we can attach as many methods as we want to the prototype. 00:04:00.858 --> 00:04:05.241 So we'll say, "I'm Winston!" 00:04:05.241 --> 00:04:12.751 And then we'll just say this.x+20, and this.y+150. 00:04:12.751 --> 00:04:15.954 And then, y'know, nothing happened, 00:04:15.954 --> 00:04:19.534 but of course that's because I didn't actually call that function yet. 00:04:19.534 --> 00:04:24.048 So, let's make the teen talk, winstonTeen.talk() [inaudible] talk all the time 00:04:24.048 --> 00:04:30.299 Okay. I'm Winston, tada! And then winstonAdult.talk() 00:04:30.299 --> 00:04:31.928 Tada! 00:04:31.928 --> 00:04:36.438 All right, so now we have this Winston object type that has properties: 00:04:36.438 --> 00:04:41.496 nickname, age, x, y; and it has functionality: behaviors, methods; 00:04:41.496 --> 00:04:44.246 that act differently depending on the properties, 00:04:44.246 --> 00:04:48.146 and we can create as many instances of Winstons as we want 00:04:48.146 --> 00:04:50.649 and call any of these methods on it. 00:04:50.649 --> 00:04:52.873 It's pretty cool, huh?