Object Methods (Video Version)

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

In the last talk-through, we learned how
to make an object type

to represent our two Winston-like objects

and then initialize them
with the constructors.

Now, an object type doesn't just
have to be associated with properties.

It can also be associated
with functionality.

Think about the world and all
the object types in it, like us humans.

We all have height and age,

but we also have things we can do like
sleep, and eat, and program.

And we wanna be able to associate
those functions with those object types.

In this program, which is just where
we left off from last time,

we've a funciton here, drawWinston,
that we call on both Winston objects.

Wouldn't it be neat if we could just
attach that to the Winston object type?

Well we can, and it's easy to do.

So underneath our constructor,
we're gonna write Winston --

capital W -- dot prototype.

And the "prototype", that's a new word
that you probably haven't seen before.

And the prototype is this property
of an object that we can attach

functions to and it will mean that every
object that's an instance of that

will then have those functions on them.

So we can say dot prototype and then dot,
and then the function name.

So we say draw, equals, and then we can
go and take our drawWinston code

and we can just put it,
move it, inside here.

All right, so now what we've done here
is we've attached a draw function

to our Winston prototype.

And that means that we should be able
to call draw() on any Winston-type object.

All right, so we should be able to call
draw() on winstonTeen or winstonAdult.

And when we have a function like this,
that we can call on an object,

we actually call that a "method."
So you might hear me say "method" now.

So let's say this is "the draw method." Okay.

So now we'll delete this, and we'll delete this,
and now we're gonna see, can we call draw()?

winstonTeen.draw()

Okay. We have an error.

We've had this error sticking out here,
so it says "winstObject is not defined"

Okay. So, before, we were passing
this argument into drawWinston,

which was the Winston object,
but now we're not passing it any more.

So, we could change this to pass it,
and then, let's see,

what would we pass here?
We'd have to pass winstonTeen.

Okay, that worked, but that seems
also really silly.

I'm already calling draw
on the object itself.

I shouldn't have to pass in
the object as well.

That seems redundant.

And that's true,
we shouldn't have to do that,

So let's delete this here,
and now let's think.

If we're inside the object,
what could we use

to access the properties of the object?

Well, you might look up at our constructor
and remember that special keyword

"this" and think "Ahh, what if we just
change this, to this!" (laughter)

So we change winstObject to "this".

Because we're inside the object right now.
This function is being evaluated

on the object, so the "this"
will refer to that current object.

And so that way we can just say "this"
and we'll get access to all

the properties of this current object.

And that totally works, see?
Isn't that cool?

So now we can then say winstonAdult.draw()

Tada! And it will access
the properties of winstonAdult

because that's the object
it's being called on.

So that's what's really cool about
this "this" keyword,

even though it can be kinda
confusing to say sometimes.

All right, so, that was a lot of fun.
So let's add another method.

Okay, so, what else might Winston do?

Maybe he'll talk. So we'll make a
Winston.prototype.talk

so we can attach as many methods
as we want to the prototype.

So we'll say, "I'm Winston!"

And then we'll just say this.x+20,
and this.y+150.

And then, y'know, nothing happened,

but of course that's because I didn't
actually call that function yet.

So, let's make the teen talk,
winstonTeen.talk() [inaudible] talk all the time

Okay. I'm Winston, tada!
And then winstonAdult.talk()

Tada!

All right, so now we have this Winston
object type that has properties:

nickname, age, x, y; and it has
functionality: behaviors, methods;

that act differently depending on
the properties,

and we can create as many instances
of Winstons as we want

and call any of these methods on it.

It's pretty cool, huh?