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!