WEBVTT
00:00:00.977 --> 00:00:03.393
We're back with our program
that creates Winstons
00:00:03.393 --> 00:00:06.339
but I've added a new object type, Hopper,
00:00:06.339 --> 00:00:08.739
because Hopper was feeling
a little left out.
00:00:08.739 --> 00:00:11.924
Now I define Hopper
the same way that I define Winston.
00:00:11.924 --> 00:00:15.394
Starting off with the constructer function
and taking the same properties
00:00:15.394 --> 00:00:20.933
and then draw, and talk, and then
I also added another method called Horray
00:00:20.933 --> 00:00:25.328
because Hoppers really like to celebrate
and Winstons don't really at all.
00:00:25.328 --> 00:00:29.924
Now at the bottom of the function,
I've created two new Hopper objects:
00:00:29.924 --> 00:00:31.524
Little Hopper and Big Hopper
00:00:31.524 --> 00:00:36.507
and drawn them and called talk on one
and Horray on the other.
00:00:36.507 --> 00:00:37.508
So that's pretty neat
00:00:37.508 --> 00:00:42.648
Now, if we look at this code up here,
you might notice something interesting.
00:00:42.648 --> 00:00:47.394
The code for hopper is very similar
to the code for winston.
00:00:47.394 --> 00:00:51.314
Particularly look at this constructor.
I don't know if you remember but that is
00:00:51.314 --> 00:00:54.864
exactly the same code
as our Winston constructor function.
00:00:54.864 --> 00:00:58.493
And then this talk function, is also
exactly the same code
00:00:58.493 --> 00:01:03.897
as our Winston talk function,
and they also both have draw functions.
00:01:03.897 --> 00:01:07.382
So there's a lot of things in common
about these two object types
00:01:07.382 --> 00:01:09.631
and that makes sense because
Hopper and Winston
00:01:09.631 --> 00:01:13.299
they're two very similar object types
in our world.
00:01:13.299 --> 00:01:17.879
If you think about the real world,
outside the computer,
00:01:17.879 --> 00:01:20.809
most object types shares similarities
with other object types.
00:01:20.809 --> 00:01:25.543
Like in the animal kingdom.
All animals are similar in some ways.
00:01:25.543 --> 00:01:29.762
And then we have different types
of animals, like humans.
00:01:29.762 --> 00:01:34.298
Humans share those similarities but also
have their own unique similarities.
00:01:34.298 --> 00:01:38.100
So we could say that animal
is an object type
00:01:38.100 --> 00:01:41.627
that human object types
inherit functionality from.
00:01:41.627 --> 00:01:43.634
We don't completely start from scratch.
00:01:43.634 --> 00:01:46.894
We add on top of the functionality
that we get from being an animal.
00:01:46.894 --> 00:01:51.796
Like all animals make noises,
but humans also make language.
00:01:51.796 --> 00:01:56.363
So this concept of object inheritance
is really useful in programming too.
00:01:56.363 --> 00:02:00.715
And we can create a chain of
object inheritance in our Javascript.
00:02:00.715 --> 00:02:05.119
So to do this when you think about
what's shared about our object types.
00:02:05.119 --> 00:02:06.643
And come up with a name for that
00:02:06.643 --> 00:02:09.595
'cause we're going to create
a new object type that represents
00:02:09.595 --> 00:02:12.086
the base object.
So let's call them creatures.
00:02:12.094 --> 00:02:13.793
They're both creatures.
00:02:13.793 --> 00:02:16.301
So we say var creature equals...
00:02:16.301 --> 00:02:19.931
And now we need our constructer function
So let's go and just steal Hopper's
00:02:19.931 --> 00:02:23.662
since that's the same thing
that Winston has. Alright.
00:02:23.662 --> 00:02:29.402
And then... let's see. Now we want to...
What do we want to do next?
00:02:29.402 --> 00:02:33.236
Maybe we want to add
the "talk" function on it.
00:02:33.236 --> 00:02:36.373
Talk function, we could just
steal Hoppper's.
00:02:36.373 --> 00:02:39.943
But of course we need to have it on
the creature's prototype instead.
00:02:39.943 --> 00:02:45.790
Okay, cool. So now we have
this creature object type.
00:02:45.790 --> 00:02:48.340
But we need to actually tell Hopper
00:02:48.340 --> 00:02:52.641
that Hopper should actually
base it's functionality off of creature.
00:02:52.641 --> 00:02:55.959
So we can do that
by writing this line here.
00:02:55.959 --> 00:03:05.000
We'll say "Hopper.prototype
equals object.create, creature.prototype"
00:03:05.000 --> 00:03:09.817
So what this line does, tells Javascript
to base Hopper's prototype,
00:03:09.817 --> 00:03:16.297
so to base all of Hopper's functionality,
off of the creature prototype.
00:03:16.297 --> 00:03:20.212
That means that every time it looks
for a function on a Hopper,
00:03:20.212 --> 00:03:23.742
it'll look at Hopper's prototype first,
but then if it doesn't find that
00:03:23.742 --> 00:03:26.869
it'll actually look and see
if it was on the creature prototype.
00:03:26.869 --> 00:03:29.746
And this is what we call
the prototype chain.
00:03:29.746 --> 00:03:32.372
Now, once we've done this
we should actually be able to
00:03:32.372 --> 00:03:37.564
delete the talk function on Hopper
because it already exists on creature.
00:03:37.564 --> 00:03:42.061
Which is up the prototype chain,
so let's try it. Ready? ♪Dun dun dun♪
00:03:42.061 --> 00:03:48.004
It worked! And it works because
it finds it on creature prototype instead.
00:03:49.314 --> 00:03:52.314
So let's try deleting it on Winston too.
00:03:53.474 --> 00:03:58.420
Okay. It didn't work it says
"object has no method 'talk'".
00:03:58.420 --> 00:04:00.903
And why is that?
Well we have our Winston constructer
00:04:00.903 --> 00:04:02.947
and draw and we took away the talk.
00:04:02.947 --> 00:04:06.504
Well, you notice we forgot to actually
tell Winson's prototype
00:04:06.504 --> 00:04:08.619
to be based off the creature prototype.
00:04:08.619 --> 00:04:14.371
So we need that very important line.
Winston.prototype=object.create
00:04:14.371 --> 00:04:16.524
(Creature.prototype)
00:04:17.784 --> 00:04:20.256
Ta Da!
And notice something important.
00:04:20.256 --> 00:04:23.317
I have this line after
the constructor function
00:04:23.317 --> 00:04:27.288
but before I add anything else
to the Winston prototype.
00:04:27.288 --> 00:04:30.064
So that's usually what you want to do.
You want to tell it
00:04:30.064 --> 00:04:32.024
just as your starting off immediately:
00:04:32.024 --> 00:04:34.200
what your initial prototype
will be based on.
00:04:34.200 --> 00:04:37.224
But then we keep adding more stuff
to it's prototype.
00:04:37.224 --> 00:04:39.003
Because there could be some things
00:04:39.003 --> 00:04:41.523
that are unique to Winstons
or unique to Hoppers
00:04:41.523 --> 00:04:42.889
that aren't on creatures.
00:04:42.889 --> 00:04:46.365
And that's totally cool
that you can define those.
00:04:46.365 --> 00:04:50.156
Alright. Now, if we look at this
we still have some repeated code.
00:04:50.156 --> 00:04:51.524
The constructor code.
00:04:51.524 --> 00:04:54.056
Right? We have this all three times.
00:04:54.056 --> 00:04:59.318
So could we just delete it?
Let's try it.
00:05:00.868 --> 00:05:03.509
Okay. Hmm...
Doesn't seem like that worked
00:05:03.509 --> 00:05:05.649
'Cause our Hopper shows up
in the upper left corner.
00:05:05.649 --> 00:05:08.080
It kind of forgot everything about itself.
00:05:08.080 --> 00:05:11.194
And this is because Javascript
does not assume you want
00:05:11.194 --> 00:05:15.264
the same constructor even if you want
to base the prototype off of it.
00:05:15.264 --> 00:05:19.359
It lets you define your own
constructor for these objects.
00:05:19.359 --> 00:05:26.418
But it also does give you an easy way
to call a constructor from a sub-object
00:05:26.418 --> 00:05:28.276
The way we can do this is,
we will write
00:05:28.276 --> 00:05:36.110
creature.call(this,nickname,age,x,y)
00:05:36.110 --> 00:05:41.068
Now what this does--notice it worked. yay.
And what it did actually
00:05:41.068 --> 00:05:44.499
it's calling the creature function,
--the construction function.
00:05:44.499 --> 00:05:47.179
It's calling that function
but it's passing and saying,
00:05:47.179 --> 00:05:50.339
okay you should call this
constructor function as if
00:05:50.339 --> 00:05:54.204
it was being called from
this Hopper object
00:05:54.204 --> 00:05:56.968
and as if it's being called with
these arguments.
00:05:56.968 --> 00:05:59.427
These are arguments that
the Hopper got called with.
00:05:59.427 --> 00:06:03.859
And that will end up just executing
this code as if it was right here.
00:06:03.859 --> 00:06:06.807
And that's exactly what we want.
And it worked.
00:06:06.807 --> 00:06:08.979
And we can go ahead and
00:06:08.979 --> 00:06:14.915
copy this line into
the Winston constructor too.
00:06:14.915 --> 00:06:17.261
And it works. Yay!
00:06:17.261 --> 00:06:20.161
Alright. So check this out.
We've encapsulated all our shared
00:06:20.161 --> 00:06:23.091
properties and functionalities
about objects in this single base
00:06:23.091 --> 00:06:24.901
object type: creature
00:06:24.901 --> 00:06:28.207
And we've made two object types
that extend from that base object.
00:06:28.207 --> 00:06:31.931
They inherit some functionality
but they add their own too.
00:06:31.931 --> 00:06:33.309
And the cool thing about this
00:06:33.309 --> 00:06:36.489
is that we can change the shared
functionality in a single place.
00:06:36.489 --> 00:06:41.202
Like if we wanted to change age again.
We could say "+ yrs old".
00:06:41.202 --> 00:06:44.188
Cool, now everybody has
"yrs old" at the end of it.
00:06:44.188 --> 00:06:49.481
Or we could change the "talk" functions
and be like "suppp?!". Woo!
00:06:49.481 --> 00:06:53.321
And now both Winstons and Hoppers
are saying "sup".
00:06:53.321 --> 00:06:54.321
So now that you've seen how to
00:06:54.321 --> 00:06:56.654
create object types
and inherit from object types,
00:06:56.654 --> 00:06:58.524
you can start thinking
about how this might be useful
00:06:58.524 --> 00:07:01.588
in your drawings and
animations and simulations and games.
00:07:01.598 --> 00:07:05.287
For example, maybe you have a game and
you have many types of characters in it
00:07:05.287 --> 00:07:07.683
All of them can run
but only some of them can jump.
00:07:07.683 --> 00:07:12.450
That's a perfect place for some
object types and some inheritance.
00:07:12.450 --> 00:07:15.970
But I bet you can think of
tons of more ways as well.