1
00:00:00,977 --> 00:00:03,393
We're back with our program
that creates Winstons
2
00:00:03,393 --> 00:00:06,339
but I've added a new object type, Hopper,
3
00:00:06,339 --> 00:00:08,739
because Hopper was feeling
a little left out.
4
00:00:08,739 --> 00:00:11,924
Now I define Hopper
the same way that I define Winston.
5
00:00:11,924 --> 00:00:15,394
Starting off with the constructer function
and taking the same properties
6
00:00:15,394 --> 00:00:20,933
and then draw, and talk, and then
I also added another method called Horray
7
00:00:20,933 --> 00:00:25,328
because Hoppers really like to celebrate
and Winstons don't really at all.
8
00:00:25,328 --> 00:00:29,924
Now at the bottom of the function,
I've created two new Hopper objects:
9
00:00:29,924 --> 00:00:31,524
Little Hopper and Big Hopper
10
00:00:31,524 --> 00:00:36,507
and drawn them and called talk on one
and Horray on the other.
11
00:00:36,507 --> 00:00:37,508
So that's pretty neat
12
00:00:37,508 --> 00:00:42,648
Now, if we look at this code up here,
you might notice something interesting.
13
00:00:42,648 --> 00:00:47,394
The code for hopper is very similar
to the code for winston.
14
00:00:47,394 --> 00:00:51,314
Particularly look at this constructor.
I don't know if you remember but that is
15
00:00:51,314 --> 00:00:54,864
exactly the same code
as our Winston constructor function.
16
00:00:54,864 --> 00:00:58,493
And then this talk function, is also
exactly the same code
17
00:00:58,493 --> 00:01:03,897
as our Winston talk function,
and they also both have draw functions.
18
00:01:03,897 --> 00:01:07,382
So there's a lot of things in common
about these two object types
19
00:01:07,382 --> 00:01:09,631
and that makes sense because
Hopper and Winston
20
00:01:09,631 --> 00:01:13,299
they're two very similar object types
in our world.
21
00:01:13,299 --> 00:01:17,879
If you think about the real world,
outside the computer,
22
00:01:17,879 --> 00:01:20,809
most object types shares similarities
with other object types.
23
00:01:20,809 --> 00:01:25,543
Like in the animal kingdom.
All animals are similar in some ways.
24
00:01:25,543 --> 00:01:29,762
And then we have different types
of animals, like humans.
25
00:01:29,762 --> 00:01:34,298
Humans share those similarities but also
have their own unique similarities.
26
00:01:34,298 --> 00:01:38,100
So we could say that animal
is an object type
27
00:01:38,100 --> 00:01:41,627
that human object types
inherit functionality from.
28
00:01:41,627 --> 00:01:43,634
We don't completely start from scratch.
29
00:01:43,634 --> 00:01:46,894
We add on top of the functionality
that we get from being an animal.
30
00:01:46,894 --> 00:01:51,796
Like all animals make noises,
but humans also make language.
31
00:01:51,796 --> 00:01:56,363
So this concept of object inheritance
is really useful in programming too.
32
00:01:56,363 --> 00:02:00,715
And we can create a chain of
object inheritance in our Javascript.
33
00:02:00,715 --> 00:02:05,119
So to do this when you think about
what's shared about our object types.
34
00:02:05,119 --> 00:02:06,643
And come up with a name for that
35
00:02:06,643 --> 00:02:09,595
'cause we're going to create
a new object type that represents
36
00:02:09,595 --> 00:02:12,086
the base object.
So let's call them creatures.
37
00:02:12,094 --> 00:02:13,793
They're both creatures.
38
00:02:13,793 --> 00:02:16,301
So we say var creature equals...
39
00:02:16,301 --> 00:02:19,931
And now we need our constructer function
So let's go and just steal Hopper's
40
00:02:19,931 --> 00:02:23,662
since that's the same thing
that Winston has. Alright.
41
00:02:23,662 --> 00:02:29,402
And then... let's see. Now we want to...
What do we want to do next?
42
00:02:29,402 --> 00:02:33,236
Maybe we want to add
the "talk" function on it.
43
00:02:33,236 --> 00:02:36,373
Talk function, we could just
steal Hoppper's.
44
00:02:36,373 --> 00:02:39,943
But of course we need to have it on
the creature's prototype instead.
45
00:02:39,943 --> 00:02:45,790
Okay, cool. So now we have
this creature object type.
46
00:02:45,790 --> 00:02:48,340
But we need to actually tell Hopper
47
00:02:48,340 --> 00:02:52,641
that Hopper should actually
base it's functionality off of creature.
48
00:02:52,641 --> 00:02:55,959
So we can do that
by writing this line here.
49
00:02:55,959 --> 00:03:05,000
We'll say "Hopper.prototype
equals object.create, creature.prototype"
50
00:03:05,000 --> 00:03:09,817
So what this line does, tells Javascript
to base Hopper's prototype,
51
00:03:09,817 --> 00:03:16,297
so to base all of Hopper's functionality,
off of the creature prototype.
52
00:03:16,297 --> 00:03:20,212
That means that every time it looks
for a function on a Hopper,
53
00:03:20,212 --> 00:03:23,742
it'll look at Hopper's prototype first,
but then if it doesn't find that
54
00:03:23,742 --> 00:03:26,869
it'll actually look and see
if it was on the creature prototype.
55
00:03:26,869 --> 00:03:29,746
And this is what we call
the prototype chain.
56
00:03:29,746 --> 00:03:32,372
Now, once we've done this
we should actually be able to
57
00:03:32,372 --> 00:03:37,564
delete the talk function on Hopper
because it already exists on creature.
58
00:03:37,564 --> 00:03:42,061
Which is up the prototype chain,
so let's try it. Ready? ♪Dun dun dun♪
59
00:03:42,061 --> 00:03:48,004
It worked! And it works because
it finds it on creature prototype instead.
60
00:03:49,314 --> 00:03:52,314
So let's try deleting it on Winston too.
61
00:03:53,474 --> 00:03:58,420
Okay. It didn't work it says
"object has no method 'talk'".
62
00:03:58,420 --> 00:04:00,903
And why is that?
Well we have our Winston constructer
63
00:04:00,903 --> 00:04:02,947
and draw and we took away the talk.
64
00:04:02,947 --> 00:04:06,504
Well, you notice we forgot to actually
tell Winson's prototype
65
00:04:06,504 --> 00:04:08,619
to be based off the creature prototype.
66
00:04:08,619 --> 00:04:14,371
So we need that very important line.
Winston.prototype=object.create
67
00:04:14,371 --> 00:04:16,524
(Creature.prototype)
68
00:04:17,784 --> 00:04:20,256
Ta Da!
And notice something important.
69
00:04:20,256 --> 00:04:23,317
I have this line after
the constructor function
70
00:04:23,317 --> 00:04:27,288
but before I add anything else
to the Winston prototype.
71
00:04:27,288 --> 00:04:30,064
So that's usually what you want to do.
You want to tell it
72
00:04:30,064 --> 00:04:32,024
just as your starting off immediately:
73
00:04:32,024 --> 00:04:34,200
what your initial prototype
will be based on.
74
00:04:34,200 --> 00:04:37,224
But then we keep adding more stuff
to it's prototype.
75
00:04:37,224 --> 00:04:39,003
Because there could be some things
76
00:04:39,003 --> 00:04:41,523
that are unique to Winstons
or unique to Hoppers
77
00:04:41,523 --> 00:04:42,889
that aren't on creatures.
78
00:04:42,889 --> 00:04:46,365
And that's totally cool
that you can define those.
79
00:04:46,365 --> 00:04:50,156
Alright. Now, if we look at this
we still have some repeated code.
80
00:04:50,156 --> 00:04:51,524
The constructor code.
81
00:04:51,524 --> 00:04:54,056
Right? We have this all three times.
82
00:04:54,056 --> 00:04:59,318
So could we just delete it?
Let's try it.
83
00:05:00,868 --> 00:05:03,509
Okay. Hmm...
Doesn't seem like that worked
84
00:05:03,509 --> 00:05:05,649
'Cause our Hopper shows up
in the upper left corner.
85
00:05:05,649 --> 00:05:08,080
It kind of forgot everything about itself.
86
00:05:08,080 --> 00:05:11,194
And this is because Javascript
does not assume you want
87
00:05:11,194 --> 00:05:15,264
the same constructor even if you want
to base the prototype off of it.
88
00:05:15,264 --> 00:05:19,359
It lets you define your own
constructor for these objects.
89
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
90
00:05:26,418 --> 00:05:28,276
The way we can do this is,
we will write
91
00:05:28,276 --> 00:05:36,110
creature.call(this,nickname,age,x,y)
92
00:05:36,110 --> 00:05:41,068
Now what this does--notice it worked. yay.
And what it did actually
93
00:05:41,068 --> 00:05:44,499
it's calling the creature function,
--the construction function.
94
00:05:44,499 --> 00:05:47,179
It's calling that function
but it's passing and saying,
95
00:05:47,179 --> 00:05:50,339
okay you should call this
constructor function as if
96
00:05:50,339 --> 00:05:54,204
it was being called from
this Hopper object
97
00:05:54,204 --> 00:05:56,968
and as if it's being called with
these arguments.
98
00:05:56,968 --> 00:05:59,427
These are arguments that
the Hopper got called with.
99
00:05:59,427 --> 00:06:03,859
And that will end up just executing
this code as if it was right here.
100
00:06:03,859 --> 00:06:06,807
And that's exactly what we want.
And it worked.
101
00:06:06,807 --> 00:06:08,979
And we can go ahead and
102
00:06:08,979 --> 00:06:14,915
copy this line into
the Winston constructor too.
103
00:06:14,915 --> 00:06:17,261
And it works. Yay!
104
00:06:17,261 --> 00:06:20,161
Alright. So check this out.
We've encapsulated all our shared
105
00:06:20,161 --> 00:06:23,091
properties and functionalities
about objects in this single base
106
00:06:23,091 --> 00:06:24,901
object type: creature
107
00:06:24,901 --> 00:06:28,207
And we've made two object types
that extend from that base object.
108
00:06:28,207 --> 00:06:31,931
They inherit some functionality
but they add their own too.
109
00:06:31,931 --> 00:06:33,309
And the cool thing about this
110
00:06:33,309 --> 00:06:36,489
is that we can change the shared
functionality in a single place.
111
00:06:36,489 --> 00:06:41,202
Like if we wanted to change age again.
We could say "+ yrs old".
112
00:06:41,202 --> 00:06:44,188
Cool, now everybody has
"yrs old" at the end of it.
113
00:06:44,188 --> 00:06:49,481
Or we could change the "talk" functions
and be like "suppp?!". Woo!
114
00:06:49,481 --> 00:06:53,321
And now both Winstons and Hoppers
are saying "sup".
115
00:06:53,321 --> 00:06:54,321
So now that you've seen how to
116
00:06:54,321 --> 00:06:56,654
create object types
and inherit from object types,
117
00:06:56,654 --> 00:06:58,524
you can start thinking
about how this might be useful
118
00:06:58,524 --> 00:07:01,588
in your drawings and
animations and simulations and games.
119
00:07:01,598 --> 00:07:05,287
For example, maybe you have a game and
you have many types of characters in it
120
00:07:05,287 --> 00:07:07,683
All of them can run
but only some of them can jump.
121
00:07:07,683 --> 00:07:12,450
That's a perfect place for some
object types and some inheritance.
122
00:07:12,450 --> 00:07:15,970
But I bet you can think of
tons of more ways as well.