0:00:01.184,0:00:03.425
Now that you understand [br]the basics of Javascript,

0:00:03.425,0:00:06.180
I want to teach you [br]about a cool way of using Javascript,

0:00:06.180,0:00:09.555
something we call [br]"object-oriented programming."

0:00:09.555,0:00:12.156
But first we need [br]to understand why it's actually useful.

0:00:12.298,0:00:15.858
So I put together a program [br]that will be better once we make it

0:00:15.858,0:00:17.218
more object-oriented.

0:00:17.247,0:00:19.967
Now, it's a pretty cool program [br]to start with.

0:00:19.967,0:00:24.007
At the top, I have two variables [br]that store simple object literals inside.

0:00:24.363,0:00:28.244
Now, the object literal is a kind [br]of object we learned about before,

0:00:28.535,0:00:30.634
that we create with two curly braces

0:00:30.634,0:00:33.455
and then we put all these property names [br]and values inside.

0:00:33.762,0:00:37.292
So we have two of those object [br]literal variables, and then down here

0:00:37.292,0:00:40.776
we have this function drawWinston[br]which expects a single argument,

0:00:40.776,0:00:45.115
and then it draws the argument, [br]it draws an image based on the x

0:00:45.115,0:00:47.847
and y properties of the object

0:00:47.847,0:00:52.900
and then a caption based on the nickname [br]and age properties of that object.

0:00:52.900,0:00:55.538
And now finally at the bottom, [br]we call drawWinston

0:00:55.538,0:00:57.289
on the teen and on the adult,

0:00:57.331,0:01:00.010
and that's what makes it show up.

0:01:00.862,0:01:05.502
Pretty cool. Now, if we go up here, [br]and we look at these object literals,

0:01:05.617,0:01:10.606
notice something about them is [br]that they're really similar-looking.

0:01:11.188,0:01:15.608
Both of them have the same sets [br]of properties and both of them can be used

0:01:15.608,0:01:17.493
by this same drawWinston function.

0:01:17.891,0:01:21.630
In fact, you know, if you think [br]about this, they're really both describing

0:01:21.630,0:01:23.910
a type of Winston, right?

0:01:24.240,0:01:28.840
And we can think like maybe there's [br]this abstract type of Winston in the world

0:01:28.840,0:01:32.771
and every Winston has the same set [br]of properties like a nickname

0:01:32.771,0:01:36.991
and an age and an x and a y and here,

0:01:36.991,0:01:42.090
what we've done is we've just created [br]two instances of a Winston

0:01:42.090,0:01:44.821
to describe a particular Winston.

0:01:45.001,0:01:48.350
So this is a teenage Winston [br]and this is an adult Winston.

0:01:48.350,0:01:52.892
But they're really, they're really [br]both quite similar and there's a lot

0:01:52.892,0:01:55.002
of things that are similar about them.

0:01:55.002,0:01:57.712
And if you think about it, that's a lot [br]the way the world works too,

0:01:57.712,0:02:01.341
is that we have these abstract data types [br]like humans and people

0:02:01.341,0:02:03.714
and then we're all just specific [br]instances of those

0:02:03.714,0:02:05.712
with our own little properties.

0:02:06.041,0:02:10.362
Now, we can actually use [br]object-oriented techniques in Javascript

0:02:10.362,0:02:17.463
so that these Winston variables[br]are formal instances of a Winston object,

0:02:17.921,0:02:21.963
so that they know that they share [br]these things in common.

0:02:21.963,0:02:25.091
So, to do that, the first thing we need [br]to do is actually describe

0:02:25.091,0:02:30.372
this abstract datatype Winston,[br]and so we'll do that by making a variable.

0:02:30.372,0:02:35.111
You will store the datatype in a variable[br]so var Winston, and we'll do capital W

0:02:35.220,0:02:38.630
because we always start [br]our object types with a capital,

0:02:38.630,0:02:41.810
and we'll set it equal to a function.

0:02:41.810,0:02:46.950
And this function is a special function [br]that we call a "constructor function"

0:02:46.950,0:02:49.471
because this is what's going to get called [br]every time we want

0:02:49.471,0:02:52.110
to create a new Winston instance.

0:02:52.110,0:02:55.369
So when we want to create a teenage[br]Winston, we'll call this function

0:02:55.369,0:02:57.989
or an adultWinston, [br]we'll call this function.

0:02:57.997,0:03:03.037
So that means that this function [br]should take whatever arguments it needs

0:03:03.037,0:03:06.267
to know about in order [br]to make a full Winston.

0:03:06.457,0:03:10.433
So in this case it needs to know [br]a nickname, an age, an x and a y.

0:03:10.718,0:03:15.249
Now, once we've received those arguments [br]we need to do something with them,

0:03:15.249,0:03:20.919
so we need to actually attach [br]that information to the Winston object.

0:03:21.389,0:03:26.660
So we'll use a new special keyword, [br]called "this". And "this" will refer

0:03:26.660,0:03:29.018
to the current object instance.

0:03:29.018,0:03:31.800
So we'll say <i>this.nickname</i>, [br]so it'll say all right,

0:03:31.800,0:03:34.169
the nickname property [br]of this object is equal to

0:03:34.169,0:03:38.030
whatever gets passed [br]into the constructor function, okay?

0:03:38.451,0:03:42.381
And <i>this.age</i> is equal to the age [br]that gets passed in, <i>this.x</i> is equal

0:03:42.449,0:03:44.138
to the x that gets passed in,

0:03:44.138,0:03:47.328
and <i>this.y</i> equals the y [br]that gets passed in.

0:03:47.466,0:03:52.537
All right, so now we have [br]this abstract datatype called Winston,

0:03:52.838,0:03:56.488
and it has a constructor function [br]that we can use to create a new Winston.

0:03:56.488,0:03:58.778
So let's try to use it!

0:03:59.476,0:04:03.236
We're going to create winstonTeen again, [br]but this time we're going

0:04:03.236,0:04:05.314
to say winstonTeen equals,

0:04:05.314,0:04:10.365
and instead of curly braces, [br]we're gonna say "equals new Winston".

0:04:10.607,0:04:14.107
So we're saying "we're trying [br]to create a new Winston instance,"

0:04:14.107,0:04:16.346
and then we're going to pass [br]in the information that it needs

0:04:16.346,0:04:21.478
so "Winsteen", 15, 20, 50, okay?

0:04:22.246,0:04:26.306
And then we can delete this old one [br]because we don't need it anymore.

0:04:26.306,0:04:30.097
All right? And now that's [br]created a new Winsteen.

0:04:31.207,0:04:35.806
And now we can say [br]<i>winstonAdult = new Winston()</i>

0:04:35.960,0:04:39.502
and of course his name is [br]"Mr. Winst-a-lot", sweet name,

0:04:39.502,0:04:45.342
and he's 30, and he's at 229 and 50. [br]All right? And then we can delete

0:04:45.342,0:04:49.923
this object literal,[br]and, tada! Our code still works.

0:04:50.712,0:04:53.651
So what we've done here [br]is that we've said okay there's this,

0:04:53.651,0:04:57.161
this kind of abstract type [br]of data which is this Winston

0:04:57.852,0:05:03.073
and we can create new Winston instances [br]that have these properties

0:05:03.073,0:05:05.161
that are unique to them,

0:05:05.161,0:05:08.661
and we'll just remember [br]those properties inside them.

0:05:08.661,0:05:12.284
And remembering is really important. [br]So you know inside here,

0:05:12.284,0:05:14.154
we have <i>this.nickname, this.age</i>.

0:05:14.325,0:05:19.642
If we accidentally didn't have this age, [br]notice that now it says "undefined."

0:05:20.249,0:05:22.958
That's because down here, [br]this drawWinston function,

0:05:22.958,0:05:28.321
it expects whatever object gets passed in[br]it expects it to have an age property.

0:05:28.321,0:05:30.803
And if we didn't say <i>this.age</i>,

0:05:30.803,0:05:34.372
then it doesn't have an age property.[br]We passed it to the construction function

0:05:34.372,0:05:37.231
but then we didn't do anything with it, [br]we have to actually attach it

0:05:37.231,0:05:39.452
to the object using "this" keyword.

0:05:39.621,0:05:41.542
So we'll add this back.

0:05:41.542,0:05:45.111
Now you might be thinking [br]like sure, you got your code working

0:05:45.111,0:05:50.321
but, you know, we're... all we've done is [br]accomplished what we had before.

0:05:50.457,0:05:53.936
But here's the cool thing. [br]Now, all of our Winstons go

0:05:53.936,0:05:56.086
through the same constructor function.

0:05:56.086,0:05:59.656
So if we want to, we can actually [br]change things, change some things

0:05:59.656,0:06:01.167
about the Winston...

0:06:01.167,0:06:04.217
all the Winstons, just inside here. [br]So maybe age, we actually want

0:06:04.217,0:06:06.107
to say "years old."

0:06:06.107,0:06:09.838
We can just put that here, [br]and now all of our Winstons say

0:06:09.838,0:06:12.879
"15 years old," "30 years old," right?

0:06:12.879,0:06:14.977
So they're taking the part [br]that's unique about them,

0:06:14.977,0:06:17.417
but then they also have things [br]that are shared about them.

0:06:17.417,0:06:20.107
And that's a really cool thing [br]about object-oriented programming

0:06:20.107,0:06:22.107
is this idea that there's [br]these kinds of objects

0:06:22.107,0:06:26.108
in the world, and you can actually [br]create instances of these objects,

0:06:26.108,0:06:28.428
and there's some things [br]that are similar about them

0:06:28.428,0:06:30.408
like they all have the same properties.

0:06:30.408,0:06:32.409
Then there are things that are different [br]like oh, this property is actually

0:06:32.409,0:06:35.508
a different value [br]than this other property, right?

0:06:35.508,0:06:38.748
But then, you know, we can do [br]the same behavior with them

0:06:38.748,0:06:40.508
like call the same functions

0:06:40.508,0:06:43.069
and use them in similar ways.

0:06:43.069,0:06:45.979
So that's some of the cool stuff [br]about object-oriented programming

0:06:45.979,0:06:48.548
but as you're going to see, [br]there's tons more too.

0:06:48.548,0:06:50.148
So, stay tuned!