WEBVTT
00:00:01.184 --> 00:00:03.425
Now that you understand
the basics of Javascript,
00:00:03.425 --> 00:00:06.180
I want to teach you
about a cool way of using Javascript,
00:00:06.180 --> 00:00:09.555
something we call
"object-oriented programming."
00:00:09.555 --> 00:00:12.156
But first we need
to understand why it's actually useful.
00:00:12.298 --> 00:00:15.858
So I put together a program
that will be better once we make it
00:00:15.858 --> 00:00:17.218
more object-oriented.
00:00:17.247 --> 00:00:19.967
Now, it's a pretty cool program
to start with.
00:00:19.967 --> 00:00:24.007
At the top, I have two variables
that store simple object literals inside.
00:00:24.363 --> 00:00:28.244
Now, the object literal is a kind
of object we learned about before,
00:00:28.535 --> 00:00:30.634
that we create with two curly braces
00:00:30.634 --> 00:00:33.455
and then we put all these property names
and values inside.
00:00:33.762 --> 00:00:37.292
So we have two of those object
literal variables, and then down here
00:00:37.292 --> 00:00:40.776
we have this function drawWinston
which expects a single argument,
00:00:40.776 --> 00:00:45.115
and then it draws the argument,
it draws an image based on the x
00:00:45.115 --> 00:00:47.847
and y properties of the object
00:00:47.847 --> 00:00:52.900
and then a caption based on the nickname
and age properties of that object.
00:00:52.900 --> 00:00:55.538
And now finally at the bottom,
we call drawWinston
00:00:55.538 --> 00:00:57.289
on the teen and on the adult,
00:00:57.331 --> 00:01:00.010
and that's what makes it show up.
00:01:00.862 --> 00:01:05.502
Pretty cool. Now, if we go up here,
and we look at these object literals,
00:01:05.617 --> 00:01:10.606
notice something about them is
that they're really similar-looking.
00:01:11.188 --> 00:01:15.608
Both of them have the same sets
of properties and both of them can be used
00:01:15.608 --> 00:01:17.493
by this same drawWinston function.
00:01:17.891 --> 00:01:21.630
In fact, you know, if you think
about this, they're really both describing
00:01:21.630 --> 00:01:23.910
a type of Winston, right?
00:01:24.240 --> 00:01:28.840
And we can think like maybe there's
this abstract type of Winston in the world
00:01:28.840 --> 00:01:32.771
and every Winston has the same set
of properties like a nickname
00:01:32.771 --> 00:01:36.991
and an age and an x and a y and here,
00:01:36.991 --> 00:01:42.090
what we've done is we've just created
two instances of a Winston
00:01:42.090 --> 00:01:44.821
to describe a particular Winston.
00:01:45.001 --> 00:01:48.350
So this is a teenage Winston
and this is an adult Winston.
00:01:48.350 --> 00:01:52.892
But they're really, they're really
both quite similar and there's a lot
00:01:52.892 --> 00:01:55.002
of things that are similar about them.
00:01:55.002 --> 00:01:57.712
And if you think about it, that's a lot
the way the world works too,
00:01:57.712 --> 00:02:01.341
is that we have these abstract data types
like humans and people
00:02:01.341 --> 00:02:03.714
and then we're all just specific
instances of those
00:02:03.714 --> 00:02:05.712
with our own little properties.
00:02:06.041 --> 00:02:10.362
Now, we can actually use
object-oriented techniques in Javascript
00:02:10.362 --> 00:02:17.463
so that these Winston variables
are formal instances of a Winston object,
00:02:17.921 --> 00:02:21.963
so that they know that they share
these things in common.
00:02:21.963 --> 00:02:25.091
So, to do that, the first thing we need
to do is actually describe
00:02:25.091 --> 00:02:30.372
this abstract datatype Winston,
and so we'll do that by making a variable.
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
00:02:35.220 --> 00:02:38.630
because we always start
our object types with a capital,
00:02:38.630 --> 00:02:41.810
and we'll set it equal to a function.
00:02:41.810 --> 00:02:46.950
And this function is a special function
that we call a "constructor function"
00:02:46.950 --> 00:02:49.471
because this is what's going to get called
every time we want
00:02:49.471 --> 00:02:52.110
to create a new Winston instance.
00:02:52.110 --> 00:02:55.369
So when we want to create a teenage
Winston, we'll call this function
00:02:55.369 --> 00:02:57.989
or an adultWinston,
we'll call this function.
00:02:57.997 --> 00:03:03.037
So that means that this function
should take whatever arguments it needs
00:03:03.037 --> 00:03:06.267
to know about in order
to make a full Winston.
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.
00:03:10.718 --> 00:03:15.249
Now, once we've received those arguments
we need to do something with them,
00:03:15.249 --> 00:03:20.919
so we need to actually attach
that information to the Winston object.
00:03:21.389 --> 00:03:26.660
So we'll use a new special keyword,
called "this". And "this" will refer
00:03:26.660 --> 00:03:29.018
to the current object instance.
00:03:29.018 --> 00:03:31.800
So we'll say this.nickname,
so it'll say all right,
00:03:31.800 --> 00:03:34.169
the nickname property
of this object is equal to
00:03:34.169 --> 00:03:38.030
whatever gets passed
into the constructor function, okay?
00:03:38.451 --> 00:03:42.381
And this.age is equal to the age
that gets passed in, this.x is equal
00:03:42.449 --> 00:03:44.138
to the x that gets passed in,
00:03:44.138 --> 00:03:47.328
and this.y equals the y
that gets passed in.
00:03:47.466 --> 00:03:52.537
All right, so now we have
this abstract datatype called Winston,
00:03:52.838 --> 00:03:56.488
and it has a constructor function
that we can use to create a new Winston.
00:03:56.488 --> 00:03:58.778
So let's try to use it!
00:03:59.476 --> 00:04:03.236
We're going to create winstonTeen again,
but this time we're going
00:04:03.236 --> 00:04:05.314
to say winstonTeen equals,
00:04:05.314 --> 00:04:10.365
and instead of curly braces,
we're gonna say "equals new Winston".
00:04:10.607 --> 00:04:14.107
So we're saying "we're trying
to create a new Winston instance,"
00:04:14.107 --> 00:04:16.346
and then we're going to pass
in the information that it needs
00:04:16.346 --> 00:04:21.478
so "Winsteen", 15, 20, 50, okay?
00:04:22.246 --> 00:04:26.306
And then we can delete this old one
because we don't need it anymore.
00:04:26.306 --> 00:04:30.097
All right? And now that's
created a new Winsteen.
00:04:31.207 --> 00:04:35.806
And now we can say
winstonAdult = new Winston()
00:04:35.960 --> 00:04:39.502
and of course his name is
"Mr. Winst-a-lot", sweet name,
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
00:04:45.342 --> 00:04:49.923
this object literal,
and, tada! Our code still works.
00:04:50.712 --> 00:04:53.651
So what we've done here
is that we've said okay there's this,
00:04:53.651 --> 00:04:57.161
this kind of abstract type
of data which is this Winston
00:04:57.852 --> 00:05:03.073
and we can create new Winston instances
that have these properties
00:05:03.073 --> 00:05:05.161
that are unique to them,
00:05:05.161 --> 00:05:08.661
and we'll just remember
those properties inside them.
00:05:08.661 --> 00:05:12.284
And remembering is really important.
So you know inside here,
00:05:12.284 --> 00:05:14.154
we have this.nickname, this.age.
00:05:14.325 --> 00:05:19.642
If we accidentally didn't have this age,
notice that now it says "undefined."
00:05:20.249 --> 00:05:22.958
That's because down here,
this drawWinston function,
00:05:22.958 --> 00:05:28.321
it expects whatever object gets passed in
it expects it to have an age property.
00:05:28.321 --> 00:05:30.803
And if we didn't say this.age,
00:05:30.803 --> 00:05:34.372
then it doesn't have an age property.
We passed it to the construction function
00:05:34.372 --> 00:05:37.231
but then we didn't do anything with it,
we have to actually attach it
00:05:37.231 --> 00:05:39.452
to the object using "this" keyword.
00:05:39.621 --> 00:05:41.542
So we'll add this back.
00:05:41.542 --> 00:05:45.111
Now you might be thinking
like sure, you got your code working
00:05:45.111 --> 00:05:50.321
but, you know, we're... all we've done is
accomplished what we had before.
00:05:50.457 --> 00:05:53.936
But here's the cool thing.
Now, all of our Winstons go
00:05:53.936 --> 00:05:56.086
through the same constructor function.
00:05:56.086 --> 00:05:59.656
So if we want to, we can actually
change things, change some things
00:05:59.656 --> 00:06:01.167
about the Winston...
00:06:01.167 --> 00:06:04.217
all the Winstons, just inside here.
So maybe age, we actually want
00:06:04.217 --> 00:06:06.107
to say "years old."
00:06:06.107 --> 00:06:09.838
We can just put that here,
and now all of our Winstons say
00:06:09.838 --> 00:06:12.879
"15 years old," "30 years old," right?
00:06:12.879 --> 00:06:14.977
So they're taking the part
that's unique about them,
00:06:14.977 --> 00:06:17.417
but then they also have things
that are shared about them.
00:06:17.417 --> 00:06:20.107
And that's a really cool thing
about object-oriented programming
00:06:20.107 --> 00:06:22.107
is this idea that there's
these kinds of objects
00:06:22.107 --> 00:06:26.108
in the world, and you can actually
create instances of these objects,
00:06:26.108 --> 00:06:28.428
and there's some things
that are similar about them
00:06:28.428 --> 00:06:30.408
like they all have the same properties.
00:06:30.408 --> 00:06:32.409
Then there are things that are different
like oh, this property is actually
00:06:32.409 --> 00:06:35.508
a different value
than this other property, right?
00:06:35.508 --> 00:06:38.748
But then, you know, we can do
the same behavior with them
00:06:38.748 --> 00:06:40.508
like call the same functions
00:06:40.508 --> 00:06:43.069
and use them in similar ways.
00:06:43.069 --> 00:06:45.979
So that's some of the cool stuff
about object-oriented programming
00:06:45.979 --> 00:06:48.548
but as you're going to see,
there's tons more too.
00:06:48.548 --> 00:06:50.148
So, stay tuned!