1
00:00:00,270 --> 00:00:03,334
In the last talk-through, we learned how 
to make an object type

2
00:00:03,334 --> 00:00:06,184
to represent our two Winston-like objects

3
00:00:06,194 --> 00:00:09,234
and then initialize them 
with the constructors.

4
00:00:09,234 --> 00:00:13,472
Now, an object type doesn't just 
have to be associated with properties.

5
00:00:13,472 --> 00:00:15,866
It can also be associated 
with functionality.

6
00:00:15,866 --> 00:00:20,286
Think about the world and all 
the object types in it, like us humans.

7
00:00:20,287 --> 00:00:22,307
We all have height and age,

8
00:00:22,307 --> 00:00:26,287
but we also have things we can do like 
sleep, and eat, and program.

9
00:00:26,287 --> 00:00:30,679
And we wanna be able to associate 
those functions with those object types.

10
00:00:30,679 --> 00:00:34,279
In this program, which is just where 
we left off from last time,

11
00:00:34,289 --> 00:00:39,439
we've a funciton here, drawWinston,
that we call on both Winston objects.

12
00:00:39,439 --> 00:00:44,916
Wouldn't it be neat if we could just 
attach that to the Winston object type?

13
00:00:45,046 --> 00:00:48,309
Well we can, and it's easy to do.

14
00:00:48,569 --> 00:00:52,475
So underneath our constructor, 
we're gonna write Winston --

15
00:00:52,475 --> 00:00:55,575
capital W -- dot prototype.

16
00:00:55,575 --> 00:00:59,232
And the "prototype", that's a new word 
that you probably haven't seen before.

17
00:00:59,232 --> 00:01:04,531
And the prototype is this property 
of an object that we can attach

18
00:01:04,531 --> 00:01:09,711
functions to and it will mean that every
object that's an instance of that

19
00:01:09,711 --> 00:01:12,531
will then have those functions on them.

20
00:01:12,989 --> 00:01:17,632
So we can say dot prototype and then dot, 
and then the function name.

21
00:01:17,632 --> 00:01:24,306
So we say draw, equals, and then we can
go and take our drawWinston code

22
00:01:24,306 --> 00:01:28,026
and we can just put it, 
move it, inside here.

23
00:01:28,096 --> 00:01:32,811
All right, so now what we've done here 
is we've attached a draw function

24
00:01:32,811 --> 00:01:34,938
to our Winston prototype.

25
00:01:34,938 --> 00:01:40,008
And that means that we should be able
to call draw() on any Winston-type object.

26
00:01:40,008 --> 00:01:45,031
All right, so we should be able to call 
draw() on winstonTeen or winstonAdult.

27
00:01:45,331 --> 00:01:49,549
And when we have a function like this, 
that we can call on an object,

28
00:01:49,549 --> 00:01:54,653
we actually call that a "method." 
So you might hear me say "method" now.

29
00:01:54,653 --> 00:01:58,092
So let's say this is "the draw method." Okay.

30
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()?

31
00:02:03,863 --> 00:02:06,769
winstonTeen.draw()

32
00:02:07,009 --> 00:02:08,287
Okay. We have an error.

33
00:02:08,287 --> 00:02:13,577
We've had this error sticking out here, 
so it says "winstObject is not defined"

34
00:02:13,577 --> 00:02:18,370
Okay. So, before, we were passing 
this argument into drawWinston,

35
00:02:18,370 --> 00:02:22,710
which was the Winston object, 
but now we're not passing it any more.

36
00:02:22,710 --> 00:02:27,402
So, we could change this to pass it,
and then, let's see,

37
00:02:27,402 --> 00:02:30,339
what would we pass here?
We'd have to pass winstonTeen.

38
00:02:30,339 --> 00:02:33,901
Okay, that worked, but that seems 
also really silly.

39
00:02:33,901 --> 00:02:38,081
I'm already calling draw 
on the object itself.

40
00:02:38,081 --> 00:02:41,775
I shouldn't have to pass in
the object as well.

41
00:02:41,775 --> 00:02:43,945
That seems redundant.

42
00:02:43,945 --> 00:02:45,665
And that's true, 
we shouldn't have to do that,

43
00:02:45,665 --> 00:02:48,245
So let's delete this here, 
and now let's think.

44
00:02:48,245 --> 00:02:51,544
If we're inside the object, 
what could we use

45
00:02:51,544 --> 00:02:54,274
to access the properties of the object?

46
00:02:54,274 --> 00:02:57,934
Well, you might look up at our constructor
and remember that special keyword

47
00:02:57,934 --> 00:03:04,124
"this" and think "Ahh, what if we just
change this, to this!" (laughter)

48
00:03:04,124 --> 00:03:07,923
So we change winstObject to "this".

49
00:03:08,383 --> 00:03:12,951
Because we're inside the object right now.
This function is being evaluated

50
00:03:12,951 --> 00:03:16,781
on the object, so the "this" 
will refer to that current object.

51
00:03:16,781 --> 00:03:20,361
And so that way we can just say "this" 
and we'll get access to all

52
00:03:20,361 --> 00:03:23,041
the properties of this current object.

53
00:03:23,041 --> 00:03:26,520
And that totally works, see? 
Isn't that cool?

54
00:03:26,520 --> 00:03:31,547
So now we can then say winstonAdult.draw()

55
00:03:31,907 --> 00:03:35,291
Tada! And it will access 
the properties of winstonAdult

56
00:03:35,291 --> 00:03:38,021
because that's the object 
it's being called on.

57
00:03:38,021 --> 00:03:41,022
So that's what's really cool about 
this "this" keyword,

58
00:03:41,022 --> 00:03:44,292
even though it can be kinda 
confusing to say sometimes.

59
00:03:45,532 --> 00:03:49,258
All right, so, that was a lot of fun. 
So let's add another method.

60
00:03:49,258 --> 00:03:51,908
Okay, so, what else might Winston do?

61
00:03:51,908 --> 00:03:56,238
Maybe he'll talk. So we'll make a 
Winston.prototype.talk

62
00:03:56,238 --> 00:04:00,858
so we can attach as many methods 
as we want to the prototype.

63
00:04:00,858 --> 00:04:05,241
So we'll say, "I'm Winston!"

64
00:04:05,241 --> 00:04:12,751
And then we'll just say this.x+20, 
and this.y+150.

65
00:04:12,751 --> 00:04:15,954
And then, y'know, nothing happened,

66
00:04:15,954 --> 00:04:19,534
but of course that's because I didn't 
actually call that function yet.

67
00:04:19,534 --> 00:04:24,048
So, let's make the teen talk, 
winstonTeen.talk() [inaudible] talk all the time

68
00:04:24,048 --> 00:04:30,299
Okay. I'm Winston, tada! 
And then winstonAdult.talk()

69
00:04:30,299 --> 00:04:31,928
Tada!

70
00:04:31,928 --> 00:04:36,438
All right, so now we have this Winston 
object type that has properties:

71
00:04:36,438 --> 00:04:41,496
nickname, age, x, y; and it has
functionality: behaviors, methods;

72
00:04:41,496 --> 00:04:44,246
that act differently depending on
the properties,

73
00:04:44,246 --> 00:04:48,146
and we can create as many instances 
of Winstons as we want

74
00:04:48,146 --> 00:04:50,649
and call any of these methods on it.

75
00:04:50,649 --> 00:04:52,873
It's pretty cool, huh?