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