1
00:00:01,184 --> 00:00:03,425
Now that you understand 
the basics of Javascript,

2
00:00:03,425 --> 00:00:06,180
I want to teach you 
about a cool way of using Javascript,

3
00:00:06,180 --> 00:00:09,555
something we call 
"object-oriented programming."

4
00:00:09,555 --> 00:00:12,156
But first we need 
to understand why it's actually useful.

5
00:00:12,298 --> 00:00:15,858
So I put together a program 
that will be better once we make it

6
00:00:15,858 --> 00:00:17,218
more object-oriented.

7
00:00:17,247 --> 00:00:19,967
Now, it's a pretty cool program 
to start with.

8
00:00:19,967 --> 00:00:24,007
At the top, I have two variables 
that store simple object literals inside.

9
00:00:24,363 --> 00:00:28,244
Now, the object literal is a kind 
of object we learned about before,

10
00:00:28,535 --> 00:00:30,634
that we create with two curly braces

11
00:00:30,634 --> 00:00:33,455
and then we put all these property names 
and values inside.

12
00:00:33,762 --> 00:00:37,292
So we have two of those object 
literal variables, and then down here

13
00:00:37,292 --> 00:00:40,776
we have this function drawWinston
which expects a single argument,

14
00:00:40,776 --> 00:00:45,115
and then it draws the argument, 
it draws an image based on the x

15
00:00:45,115 --> 00:00:47,847
and y properties of the object

16
00:00:47,847 --> 00:00:52,900
and then a caption based on the nickname 
and age properties of that object.

17
00:00:52,900 --> 00:00:55,538
And now finally at the bottom, 
we call drawWinston

18
00:00:55,538 --> 00:00:57,289
on the teen and on the adult,

19
00:00:57,331 --> 00:01:00,010
and that's what makes it show up.

20
00:01:00,862 --> 00:01:05,502
Pretty cool. Now, if we go up here, 
and we look at these object literals,

21
00:01:05,617 --> 00:01:10,606
notice something about them is 
that they're really similar-looking.

22
00:01:11,188 --> 00:01:15,608
Both of them have the same sets 
of properties and both of them can be used

23
00:01:15,608 --> 00:01:17,493
by this same drawWinston function.

24
00:01:17,891 --> 00:01:21,630
In fact, you know, if you think 
about this, they're really both describing

25
00:01:21,630 --> 00:01:23,910
a type of Winston, right?

26
00:01:24,240 --> 00:01:28,840
And we can think like maybe there's 
this abstract type of Winston in the world

27
00:01:28,840 --> 00:01:32,771
and every Winston has the same set 
of properties like a nickname

28
00:01:32,771 --> 00:01:36,991
and an age and an x and a y and here,

29
00:01:36,991 --> 00:01:42,090
what we've done is we've just created 
two instances of a Winston

30
00:01:42,090 --> 00:01:44,821
to describe a particular Winston.

31
00:01:45,001 --> 00:01:48,350
So this is a teenage Winston 
and this is an adult Winston.

32
00:01:48,350 --> 00:01:52,892
But they're really, they're really 
both quite similar and there's a lot

33
00:01:52,892 --> 00:01:55,002
of things that are similar about them.

34
00:01:55,002 --> 00:01:57,712
And if you think about it, that's a lot 
the way the world works too,

35
00:01:57,712 --> 00:02:01,341
is that we have these abstract data types 
like humans and people

36
00:02:01,341 --> 00:02:03,714
and then we're all just specific 
instances of those

37
00:02:03,714 --> 00:02:05,712
with our own little properties.

38
00:02:06,041 --> 00:02:10,362
Now, we can actually use 
object-oriented techniques in Javascript

39
00:02:10,362 --> 00:02:17,463
so that these Winston variables
are formal instances of a Winston object,

40
00:02:17,921 --> 00:02:21,963
so that they know that they share 
these things in common.

41
00:02:21,963 --> 00:02:25,091
So, to do that, the first thing we need 
to do is actually describe

42
00:02:25,091 --> 00:02:30,372
this abstract datatype Winston,
and so we'll do that by making a variable.

43
00:02:30,372 --> 00:02:35,111
You will store the datatype in a variable
so var Winston, and we'll do capital W

44
00:02:35,220 --> 00:02:38,630
because we always start 
our object types with a capital,

45
00:02:38,630 --> 00:02:41,810
and we'll set it equal to a function.

46
00:02:41,810 --> 00:02:46,950
And this function is a special function 
that we call a "constructor function"

47
00:02:46,950 --> 00:02:49,471
because this is what's going to get called 
every time we want

48
00:02:49,471 --> 00:02:52,110
to create a new Winston instance.

49
00:02:52,110 --> 00:02:55,369
So when we want to create a teenage
Winston, we'll call this function

50
00:02:55,369 --> 00:02:57,989
or an adultWinston, 
we'll call this function.

51
00:02:57,997 --> 00:03:03,037
So that means that this function 
should take whatever arguments it needs

52
00:03:03,037 --> 00:03:06,267
to know about in order 
to make a full Winston.

53
00:03:06,457 --> 00:03:10,433
So in this case it needs to know 
a nickname, an age, an x and a y.

54
00:03:10,718 --> 00:03:15,249
Now, once we've received those arguments 
we need to do something with them,

55
00:03:15,249 --> 00:03:20,919
so we need to actually attach 
that information to the Winston object.

56
00:03:21,389 --> 00:03:26,660
So we'll use a new special keyword, 
called "this". And "this" will refer

57
00:03:26,660 --> 00:03:29,018
to the current object instance.

58
00:03:29,018 --> 00:03:31,800
So we'll say <i>this.nickname</i>, 
so it'll say all right,

59
00:03:31,800 --> 00:03:34,169
the nickname property 
of this object is equal to

60
00:03:34,169 --> 00:03:38,030
whatever gets passed 
into the constructor function, okay?

61
00:03:38,451 --> 00:03:42,381
And <i>this.age</i> is equal to the age 
that gets passed in, <i>this.x</i> is equal

62
00:03:42,449 --> 00:03:44,138
to the x that gets passed in,

63
00:03:44,138 --> 00:03:47,328
and <i>this.y</i> equals the y 
that gets passed in.

64
00:03:47,466 --> 00:03:52,537
All right, so now we have 
this abstract datatype called Winston,

65
00:03:52,838 --> 00:03:56,488
and it has a constructor function 
that we can use to create a new Winston.

66
00:03:56,488 --> 00:03:58,778
So let's try to use it!

67
00:03:59,476 --> 00:04:03,236
We're going to create winstonTeen again, 
but this time we're going

68
00:04:03,236 --> 00:04:05,314
to say winstonTeen equals,

69
00:04:05,314 --> 00:04:10,365
and instead of curly braces, 
we're gonna say "equals new Winston".

70
00:04:10,607 --> 00:04:14,107
So we're saying "we're trying 
to create a new Winston instance,"

71
00:04:14,107 --> 00:04:16,346
and then we're going to pass 
in the information that it needs

72
00:04:16,346 --> 00:04:21,478
so "Winsteen", 15, 20, 50, okay?

73
00:04:22,246 --> 00:04:26,306
And then we can delete this old one 
because we don't need it anymore.

74
00:04:26,306 --> 00:04:30,097
All right? And now that's 
created a new Winsteen.

75
00:04:31,207 --> 00:04:35,806
And now we can say 
<i>winstonAdult = new Winston()</i>

76
00:04:35,960 --> 00:04:39,502
and of course his name is 
"Mr. Winst-a-lot", sweet name,

77
00:04:39,502 --> 00:04:45,342
and he's 30, and he's at 229 and 50. 
All right? And then we can delete

78
00:04:45,342 --> 00:04:49,923
this object literal,
and, tada! Our code still works.

79
00:04:50,712 --> 00:04:53,651
So what we've done here 
is that we've said okay there's this,

80
00:04:53,651 --> 00:04:57,161
this kind of abstract type 
of data which is this Winston

81
00:04:57,852 --> 00:05:03,073
and we can create new Winston instances 
that have these properties

82
00:05:03,073 --> 00:05:05,161
that are unique to them,

83
00:05:05,161 --> 00:05:08,661
and we'll just remember 
those properties inside them.

84
00:05:08,661 --> 00:05:12,284
And remembering is really important. 
So you know inside here,

85
00:05:12,284 --> 00:05:14,154
we have <i>this.nickname, this.age</i>.

86
00:05:14,325 --> 00:05:19,642
If we accidentally didn't have this age, 
notice that now it says "undefined."

87
00:05:20,249 --> 00:05:22,958
That's because down here, 
this drawWinston function,

88
00:05:22,958 --> 00:05:28,321
it expects whatever object gets passed in
it expects it to have an age property.

89
00:05:28,321 --> 00:05:30,803
And if we didn't say <i>this.age</i>,

90
00:05:30,803 --> 00:05:34,372
then it doesn't have an age property.
We passed it to the construction function

91
00:05:34,372 --> 00:05:37,231
but then we didn't do anything with it, 
we have to actually attach it

92
00:05:37,231 --> 00:05:39,452
to the object using "this" keyword.

93
00:05:39,621 --> 00:05:41,542
So we'll add this back.

94
00:05:41,542 --> 00:05:45,111
Now you might be thinking 
like sure, you got your code working

95
00:05:45,111 --> 00:05:50,321
but, you know, we're... all we've done is 
accomplished what we had before.

96
00:05:50,457 --> 00:05:53,936
But here's the cool thing. 
Now, all of our Winstons go

97
00:05:53,936 --> 00:05:56,086
through the same constructor function.

98
00:05:56,086 --> 00:05:59,656
So if we want to, we can actually 
change things, change some things

99
00:05:59,656 --> 00:06:01,167
about the Winston...

100
00:06:01,167 --> 00:06:04,217
all the Winstons, just inside here. 
So maybe age, we actually want

101
00:06:04,217 --> 00:06:06,107
to say "years old."

102
00:06:06,107 --> 00:06:09,838
We can just put that here, 
and now all of our Winstons say

103
00:06:09,838 --> 00:06:12,879
"15 years old," "30 years old," right?

104
00:06:12,879 --> 00:06:14,977
So they're taking the part 
that's unique about them,

105
00:06:14,977 --> 00:06:17,417
but then they also have things 
that are shared about them.

106
00:06:17,417 --> 00:06:20,107
And that's a really cool thing 
about object-oriented programming

107
00:06:20,107 --> 00:06:22,107
is this idea that there's 
these kinds of objects

108
00:06:22,107 --> 00:06:26,108
in the world, and you can actually 
create instances of these objects,

109
00:06:26,108 --> 00:06:28,428
and there's some things 
that are similar about them

110
00:06:28,428 --> 00:06:30,408
like they all have the same properties.

111
00:06:30,408 --> 00:06:32,409
Then there are things that are different 
like oh, this property is actually

112
00:06:32,409 --> 00:06:35,508
a different value 
than this other property, right?

113
00:06:35,508 --> 00:06:38,748
But then, you know, we can do 
the same behavior with them

114
00:06:38,748 --> 00:06:40,508
like call the same functions

115
00:06:40,508 --> 00:06:43,069
and use them in similar ways.

116
00:06:43,069 --> 00:06:45,979
So that's some of the cool stuff 
about object-oriented programming

117
00:06:45,979 --> 00:06:48,548
but as you're going to see, 
there's tons more too.

118
00:06:48,548 --> 00:06:50,148
So, stay tuned!