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 this.nickname,
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 this.age is equal to the age
that gets passed in, this.x 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 this.y 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
winstonAdult = new Winston()
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 this.nickname, this.age.
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 this.age,
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!