Now that you understand
the basics of Javascript,
I want to teach you
about a cool way of using Javascript,
something we call
"object-oriented programming."
But first we need
to understand why it's actually useful.
So I put together a program
that will be better once we make it
more object-oriented.
Now, it's a pretty cool program
to start with.
At the top, I have two variables
that store simple object literals inside.
Now, the object literal is a kind
of object we learned about before,
that we create with two curly braces
and then we put all these property names
and values inside.
So we have two of those object
literal variables, and then down here
we have this function drawWinston
which expects a single argument,
and then it draws the argument,
it draws an image based on the x
and y properties of the object
and then a caption based on the nickname
and age properties of that object.
And now finally at the bottom,
we call drawWinston
on the teen and on the adult,
and that's what makes it show up.
Pretty cool. Now, if we go up here,
and we look at these object literals,
notice something about them is
that they're really similar-looking.
Both of them have the same sets
of properties and both of them can be used
by this same drawWinston function.
In fact, you know, if you think
about this, they're really both describing
a type of Winston, right?
And we can think like maybe there's
this abstract type of Winston in the world
and every Winston has the same set
of properties like a nickname
and an age and an x and a y and here,
what we've done is we've just created
two instances of a Winston
to describe a particular Winston.
So this is a teenage Winston
and this is an adult Winston.
But they're really, they're really
both quite similar and there's a lot
of things that are similar about them.
And if you think about it, that's a lot
the way the world works too,
is that we have these abstract data types
like humans and people
and then we're all just specific
instances of those
with our own little properties.
Now, we can actually use
object-oriented techniques in Javascript
so that these Winston variables
are formal instances of a Winston object,
so that they know that they share
these things in common.
So, to do that, the first thing we need
to do is actually describe
this abstract datatype Winston,
and so we'll do that by making a variable.
You will store the datatype in a variable
so var Winston, and we'll do capital W
because we always start
our object types with a capital,
and we'll set it equal to a function.
And this function is a special function
that we call a "constructor function"
because this is what's going to get called
every time we want
to create a new Winston instance.
So when we want to create a teenage
Winston, we'll call this function
or an adultWinston,
we'll call this function.
So that means that this function
should take whatever arguments it needs
to know about in order
to make a full Winston.
So in this case it needs to know
a nickname, an age, an x and a y.
Now, once we've received those arguments
we need to do something with them,
so we need to actually attach
that information to the Winston object.
So we'll use a new special keyword,
called "this". And "this" will refer
to the current object instance.
So we'll say this.nickname,
so it'll say all right,
the nickname property
of this object is equal to
whatever gets passed
into the constructor function, okay?
And this.age is equal to the age
that gets passed in, this.x is equal
to the x that gets passed in,
and this.y equals the y
that gets passed in.
All right, so now we have
this abstract datatype called Winston,
and it has a constructor function
that we can use to create a new Winston.
So let's try to use it!
We're going to create winstonTeen again,
but this time we're going
to say winstonTeen equals,
and instead of curly braces,
we're gonna say "equals new Winston".
So we're saying "we're trying
to create a new Winston instance,"
and then we're going to pass
in the information that it needs
so "Winsteen", 15, 20, 50, okay?
And then we can delete this old one
because we don't need it anymore.
All right? And now that's
created a new Winsteen.
And now we can say
winstonAdult = new Winston()
and of course his name is
"Mr. Winst-a-lot", sweet name,
and he's 30, and he's at 229 and 50.
All right? And then we can delete
this object literal,
and, tada! Our code still works.
So what we've done here
is that we've said okay there's this,
this kind of abstract type
of data which is this Winston
and we can create new Winston instances
that have these properties
that are unique to them,
and we'll just remember
those properties inside them.
And remembering is really important.
So you know inside here,
we have this.nickname, this.age.
If we accidentally didn't have this age,
notice that now it says "undefined."
That's because down here,
this drawWinston function,
it expects whatever object gets passed in
it expects it to have an age property.
And if we didn't say this.age,
then it doesn't have an age property.
We passed it to the construction function
but then we didn't do anything with it,
we have to actually attach it
to the object using "this" keyword.
So we'll add this back.
Now you might be thinking
like sure, you got your code working
but, you know, we're... all we've done is
accomplished what we had before.
But here's the cool thing.
Now, all of our Winstons go
through the same constructor function.
So if we want to, we can actually
change things, change some things
about the Winston...
all the Winstons, just inside here.
So maybe age, we actually want
to say "years old."
We can just put that here,
and now all of our Winstons say
"15 years old," "30 years old," right?
So they're taking the part
that's unique about them,
but then they also have things
that are shared about them.
And that's a really cool thing
about object-oriented programming
is this idea that there's
these kinds of objects
in the world, and you can actually
create instances of these objects,
and there's some things
that are similar about them
like they all have the same properties.
Then there are things that are different
like oh, this property is actually
a different value
than this other property, right?
But then, you know, we can do
the same behavior with them
like call the same functions
and use them in similar ways.
So that's some of the cool stuff
about object-oriented programming
but as you're going to see,
there's tons more too.
So, stay tuned!