[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.98,0:00:03.39,Default,,0000,0000,0000,,We're back with our program\Nthat creates Winstons
Dialogue: 0,0:00:03.39,0:00:06.34,Default,,0000,0000,0000,,but I've added a new object type, Hopper,
Dialogue: 0,0:00:06.34,0:00:08.74,Default,,0000,0000,0000,,because Hopper was feeling\Na little left out.
Dialogue: 0,0:00:08.74,0:00:11.92,Default,,0000,0000,0000,,Now I define Hopper\Nthe same way that I define Winston.
Dialogue: 0,0:00:11.92,0:00:15.39,Default,,0000,0000,0000,,Starting off with the constructer function\Nand taking the same properties
Dialogue: 0,0:00:15.39,0:00:20.93,Default,,0000,0000,0000,,and then draw, and talk, and then\NI also added another method called Horray
Dialogue: 0,0:00:20.93,0:00:25.33,Default,,0000,0000,0000,,because Hoppers really like to celebrate\Nand Winstons don't really at all.
Dialogue: 0,0:00:25.33,0:00:29.92,Default,,0000,0000,0000,,Now at the bottom of the function,\NI've created two new Hopper objects:
Dialogue: 0,0:00:29.92,0:00:31.52,Default,,0000,0000,0000,,Little Hopper and Big Hopper
Dialogue: 0,0:00:31.52,0:00:36.51,Default,,0000,0000,0000,,and drawn them and called talk on one\Nand Horray on the other.
Dialogue: 0,0:00:36.51,0:00:37.51,Default,,0000,0000,0000,,So that's pretty neat
Dialogue: 0,0:00:37.51,0:00:42.65,Default,,0000,0000,0000,,Now, if we look at this code up here,\Nyou might notice something interesting.
Dialogue: 0,0:00:42.65,0:00:47.39,Default,,0000,0000,0000,,The code for hopper is {\i1}very{\i0} similar\Nto the code for winston.
Dialogue: 0,0:00:47.39,0:00:51.31,Default,,0000,0000,0000,,Particularly look at this constructor.\NI don't know if you remember but that is
Dialogue: 0,0:00:51.31,0:00:54.86,Default,,0000,0000,0000,,exactly the same code\Nas our Winston constructor function.
Dialogue: 0,0:00:54.86,0:00:58.49,Default,,0000,0000,0000,,And then this talk function, is also\Nexactly the same code
Dialogue: 0,0:00:58.49,0:01:03.90,Default,,0000,0000,0000,,as our Winston talk function,\Nand they also both have draw functions.
Dialogue: 0,0:01:03.90,0:01:07.38,Default,,0000,0000,0000,,So there's a lot of things in common\Nabout these two object types
Dialogue: 0,0:01:07.38,0:01:09.63,Default,,0000,0000,0000,,and that makes sense because\NHopper and Winston
Dialogue: 0,0:01:09.63,0:01:13.30,Default,,0000,0000,0000,,they're two very similar object types\Nin our world.
Dialogue: 0,0:01:13.30,0:01:17.88,Default,,0000,0000,0000,,If you think about the real world,\Noutside the computer,
Dialogue: 0,0:01:17.88,0:01:20.81,Default,,0000,0000,0000,,most object types shares similarities\Nwith other object types.
Dialogue: 0,0:01:20.81,0:01:25.54,Default,,0000,0000,0000,,Like in the animal kingdom. \NAll animals are similar in some ways.
Dialogue: 0,0:01:25.54,0:01:29.76,Default,,0000,0000,0000,,And then we have different types\Nof animals, like humans.
Dialogue: 0,0:01:29.76,0:01:34.30,Default,,0000,0000,0000,,Humans share those similarities but also\Nhave their own unique similarities.
Dialogue: 0,0:01:34.30,0:01:38.10,Default,,0000,0000,0000,,So we could say that animal\Nis an object type
Dialogue: 0,0:01:38.10,0:01:41.63,Default,,0000,0000,0000,,that human object types\Ninherit functionality from.
Dialogue: 0,0:01:41.63,0:01:43.63,Default,,0000,0000,0000,,We don't completely start from scratch.\N
Dialogue: 0,0:01:43.63,0:01:46.89,Default,,0000,0000,0000,,We add on top of the functionality \Nthat we get from being an animal.
Dialogue: 0,0:01:46.89,0:01:51.80,Default,,0000,0000,0000,,Like all animals make noises,\Nbut humans also make language.
Dialogue: 0,0:01:51.80,0:01:56.36,Default,,0000,0000,0000,,So this concept of object inheritance\Nis really useful in programming too.
Dialogue: 0,0:01:56.36,0:02:00.72,Default,,0000,0000,0000,,And we can create a chain of\Nobject inheritance in our Javascript.
Dialogue: 0,0:02:00.72,0:02:05.12,Default,,0000,0000,0000,,So to do this when you think about\Nwhat's shared about our object types.
Dialogue: 0,0:02:05.12,0:02:06.64,Default,,0000,0000,0000,,And come up with a name for that
Dialogue: 0,0:02:06.64,0:02:09.60,Default,,0000,0000,0000,,'cause we're going to create \Na new object type that represents
Dialogue: 0,0:02:09.60,0:02:12.09,Default,,0000,0000,0000,,the base object.\NSo let's call them creatures.
Dialogue: 0,0:02:12.09,0:02:13.79,Default,,0000,0000,0000,,They're both creatures.
Dialogue: 0,0:02:13.79,0:02:16.30,Default,,0000,0000,0000,,So we say var creature equals...\N
Dialogue: 0,0:02:16.30,0:02:19.93,Default,,0000,0000,0000,,And now we need our constructer function\NSo let's go and just steal Hopper's
Dialogue: 0,0:02:19.93,0:02:23.66,Default,,0000,0000,0000,,since that's the same thing\Nthat Winston has. Alright.
Dialogue: 0,0:02:23.66,0:02:29.40,Default,,0000,0000,0000,,And then... let's see. Now we want to...\NWhat do we want to do next?
Dialogue: 0,0:02:29.40,0:02:33.24,Default,,0000,0000,0000,,Maybe we want to add \Nthe "talk" function on it.
Dialogue: 0,0:02:33.24,0:02:36.37,Default,,0000,0000,0000,,Talk function, we could just\Nsteal Hoppper's.
Dialogue: 0,0:02:36.37,0:02:39.94,Default,,0000,0000,0000,,But of course we need to have it on\Nthe creature's prototype instead.
Dialogue: 0,0:02:39.94,0:02:45.79,Default,,0000,0000,0000,,Okay, cool. So now we have\Nthis creature object type.
Dialogue: 0,0:02:45.79,0:02:48.34,Default,,0000,0000,0000,,But we need to actually tell Hopper
Dialogue: 0,0:02:48.34,0:02:52.64,Default,,0000,0000,0000,,that Hopper should actually\Nbase it's functionality off of creature.
Dialogue: 0,0:02:52.64,0:02:55.96,Default,,0000,0000,0000,,So we can do that\Nby writing this line here.
Dialogue: 0,0:02:55.96,0:03:05.00,Default,,0000,0000,0000,,We'll say "Hopper.prototype\Nequals object.create, creature.prototype"
Dialogue: 0,0:03:05.00,0:03:09.82,Default,,0000,0000,0000,,So what this line does, tells Javascript\Nto base Hopper's prototype,
Dialogue: 0,0:03:09.82,0:03:16.30,Default,,0000,0000,0000,,so to base all of Hopper's functionality,\Noff of the creature prototype.
Dialogue: 0,0:03:16.30,0:03:20.21,Default,,0000,0000,0000,,That means that every time it looks\Nfor a function on a Hopper,
Dialogue: 0,0:03:20.21,0:03:23.74,Default,,0000,0000,0000,,it'll look at Hopper's prototype first,\Nbut then if it doesn't find that
Dialogue: 0,0:03:23.74,0:03:26.87,Default,,0000,0000,0000,,it'll actually look and see\Nif it was on the creature prototype.
Dialogue: 0,0:03:26.87,0:03:29.75,Default,,0000,0000,0000,,And this is what we call\Nthe prototype chain.
Dialogue: 0,0:03:29.75,0:03:32.37,Default,,0000,0000,0000,,Now, once we've done this\Nwe should actually be able to
Dialogue: 0,0:03:32.37,0:03:37.56,Default,,0000,0000,0000,,delete the talk function on Hopper\Nbecause it already exists on creature.
Dialogue: 0,0:03:37.56,0:03:42.06,Default,,0000,0000,0000,,Which is up the prototype chain,\Nso let's try it. Ready? ♪Dun dun dun♪
Dialogue: 0,0:03:42.06,0:03:48.00,Default,,0000,0000,0000,,It worked! And it works because\Nit finds it on creature prototype instead.
Dialogue: 0,0:03:49.31,0:03:52.31,Default,,0000,0000,0000,,So let's try deleting it on Winston too.
Dialogue: 0,0:03:53.47,0:03:58.42,Default,,0000,0000,0000,,Okay. It didn't work it says\N"object has no method 'talk'".
Dialogue: 0,0:03:58.42,0:04:00.90,Default,,0000,0000,0000,,And why is that?\NWell we have our Winston constructer
Dialogue: 0,0:04:00.90,0:04:02.95,Default,,0000,0000,0000,,and draw and we took away the talk.
Dialogue: 0,0:04:02.95,0:04:06.50,Default,,0000,0000,0000,,Well, you notice we forgot to actually\Ntell Winson's prototype
Dialogue: 0,0:04:06.50,0:04:08.62,Default,,0000,0000,0000,,to be based off the creature prototype.
Dialogue: 0,0:04:08.62,0:04:14.37,Default,,0000,0000,0000,,So we need that very important line.\NWinston.prototype=object.create
Dialogue: 0,0:04:14.37,0:04:16.52,Default,,0000,0000,0000,,(Creature.prototype)
Dialogue: 0,0:04:17.78,0:04:20.26,Default,,0000,0000,0000,,Ta Da!\NAnd notice something important.
Dialogue: 0,0:04:20.26,0:04:23.32,Default,,0000,0000,0000,,I have this line after\Nthe constructor function
Dialogue: 0,0:04:23.32,0:04:27.29,Default,,0000,0000,0000,,but {\i1}before{\i0} I add anything else\Nto the Winston prototype.
Dialogue: 0,0:04:27.29,0:04:30.06,Default,,0000,0000,0000,,So that's usually what you want to do.\NYou want to tell it
Dialogue: 0,0:04:30.06,0:04:32.02,Default,,0000,0000,0000,,just as your starting off immediately:
Dialogue: 0,0:04:32.02,0:04:34.20,Default,,0000,0000,0000,,what your {\i1}initial{\i0} prototype\Nwill be based on.
Dialogue: 0,0:04:34.20,0:04:37.22,Default,,0000,0000,0000,,But then we keep adding more stuff\Nto it's prototype.
Dialogue: 0,0:04:37.22,0:04:39.00,Default,,0000,0000,0000,,Because there could be some things
Dialogue: 0,0:04:39.00,0:04:41.52,Default,,0000,0000,0000,,that are unique to Winstons\Nor unique to Hoppers
Dialogue: 0,0:04:41.52,0:04:42.89,Default,,0000,0000,0000,,that aren't on creatures.\N
Dialogue: 0,0:04:42.89,0:04:46.36,Default,,0000,0000,0000,,And that's totally cool\Nthat you can define those.
Dialogue: 0,0:04:46.36,0:04:50.16,Default,,0000,0000,0000,,Alright. Now, if we look at this\Nwe still have some repeated code.
Dialogue: 0,0:04:50.16,0:04:51.52,Default,,0000,0000,0000,,The constructor code.
Dialogue: 0,0:04:51.52,0:04:54.06,Default,,0000,0000,0000,,Right? We have this all three times.
Dialogue: 0,0:04:54.06,0:04:59.32,Default,,0000,0000,0000,,So could we just delete it?\NLet's try it.
Dialogue: 0,0:05:00.87,0:05:03.51,Default,,0000,0000,0000,,Okay. Hmm...\NDoesn't seem like that worked
Dialogue: 0,0:05:03.51,0:05:05.65,Default,,0000,0000,0000,,'Cause our Hopper shows up\Nin the upper left corner.
Dialogue: 0,0:05:05.65,0:05:08.08,Default,,0000,0000,0000,,It kind of forgot everything about itself.
Dialogue: 0,0:05:08.08,0:05:11.19,Default,,0000,0000,0000,,And this is because Javascript\Ndoes not assume you want
Dialogue: 0,0:05:11.19,0:05:15.26,Default,,0000,0000,0000,,the same constructor even if you want\Nto base the prototype off of it.
Dialogue: 0,0:05:15.26,0:05:19.36,Default,,0000,0000,0000,,It lets you define your own\Nconstructor for these objects.
Dialogue: 0,0:05:19.36,0:05:26.42,Default,,0000,0000,0000,,But it also does give you an easy way\Nto call a constructor from a sub-object
Dialogue: 0,0:05:26.42,0:05:28.28,Default,,0000,0000,0000,,The way we can do this is,\Nwe will write
Dialogue: 0,0:05:28.28,0:05:36.11,Default,,0000,0000,0000,,creature.call(this,nickname,age,x,y)
Dialogue: 0,0:05:36.11,0:05:41.07,Default,,0000,0000,0000,,Now what this does--notice it worked. yay.\NAnd what it did actually
Dialogue: 0,0:05:41.07,0:05:44.50,Default,,0000,0000,0000,,it's calling the creature function, \N--the construction function.
Dialogue: 0,0:05:44.50,0:05:47.18,Default,,0000,0000,0000,,It's calling that function\Nbut it's passing and saying,
Dialogue: 0,0:05:47.18,0:05:50.34,Default,,0000,0000,0000,,okay you should call this\Nconstructor function as if
Dialogue: 0,0:05:50.34,0:05:54.20,Default,,0000,0000,0000,,it was being called from\Nthis Hopper object
Dialogue: 0,0:05:54.20,0:05:56.97,Default,,0000,0000,0000,,and as if it's being called with\Nthese arguments.
Dialogue: 0,0:05:56.97,0:05:59.43,Default,,0000,0000,0000,,These are arguments that\Nthe Hopper got called with.
Dialogue: 0,0:05:59.43,0:06:03.86,Default,,0000,0000,0000,,And that will end up just executing\Nthis code as if it was right here.
Dialogue: 0,0:06:03.86,0:06:06.81,Default,,0000,0000,0000,,And that's exactly what we want.\NAnd it worked.
Dialogue: 0,0:06:06.81,0:06:08.98,Default,,0000,0000,0000,,And we can go ahead and
Dialogue: 0,0:06:08.98,0:06:14.92,Default,,0000,0000,0000,,copy this line into\Nthe Winston constructor too.
Dialogue: 0,0:06:14.92,0:06:17.26,Default,,0000,0000,0000,,And it works. Yay!
Dialogue: 0,0:06:17.26,0:06:20.16,Default,,0000,0000,0000,,Alright. So check this out.\NWe've encapsulated all our shared
Dialogue: 0,0:06:20.16,0:06:23.09,Default,,0000,0000,0000,,properties and functionalities\Nabout objects in this single base
Dialogue: 0,0:06:23.09,0:06:24.90,Default,,0000,0000,0000,,object type: creature
Dialogue: 0,0:06:24.90,0:06:28.21,Default,,0000,0000,0000,,And we've made two object types\Nthat extend from that base object.
Dialogue: 0,0:06:28.21,0:06:31.93,Default,,0000,0000,0000,,They inherit some functionality\Nbut they add their own too.
Dialogue: 0,0:06:31.93,0:06:33.31,Default,,0000,0000,0000,,And the cool thing about this
Dialogue: 0,0:06:33.31,0:06:36.49,Default,,0000,0000,0000,,is that we can change the shared\Nfunctionality in a single place.
Dialogue: 0,0:06:36.49,0:06:41.20,Default,,0000,0000,0000,,Like if we wanted to change age again.\NWe could say "+ yrs old".
Dialogue: 0,0:06:41.20,0:06:44.19,Default,,0000,0000,0000,,Cool, now everybody has \N"yrs old" at the end of it.
Dialogue: 0,0:06:44.19,0:06:49.48,Default,,0000,0000,0000,,Or we could change the "talk" functions\Nand be like "suppp?!". Woo!
Dialogue: 0,0:06:49.48,0:06:53.32,Default,,0000,0000,0000,,And now both Winstons and Hoppers\Nare saying "sup".
Dialogue: 0,0:06:53.32,0:06:54.32,Default,,0000,0000,0000,,So now that you've seen how to
Dialogue: 0,0:06:54.32,0:06:56.65,Default,,0000,0000,0000,,create object types\Nand inherit from object types,
Dialogue: 0,0:06:56.65,0:06:58.52,Default,,0000,0000,0000,,you can start thinking \Nabout how this might be useful
Dialogue: 0,0:06:58.52,0:07:01.59,Default,,0000,0000,0000,,in your drawings and\Nanimations and simulations and games.
Dialogue: 0,0:07:01.60,0:07:05.29,Default,,0000,0000,0000,,For example, maybe you have a game and\Nyou have many types of characters in it
Dialogue: 0,0:07:05.29,0:07:07.68,Default,,0000,0000,0000,,All of them can run\Nbut only some of them can jump.
Dialogue: 0,0:07:07.68,0:07:12.45,Default,,0000,0000,0000,,That's a perfect place for some\Nobject types and some inheritance.
Dialogue: 0,0:07:12.45,0:07:15.97,Default,,0000,0000,0000,,But I bet you can think of\Ntons of more ways as well.