WEBVTT

00:00:00.000 --> 00:00:03.184
Now let's go ahead
and make another constructor.

00:00:03.184 --> 00:00:07.043
So this time,
I'm going to create a Dalmatian class....

00:00:09.180 --> 00:00:12.553
And it's going to be a dog
with the color...

00:00:15.770 --> 00:00:19.907
[slowly]
white with black spots.

00:00:22.995 --> 00:00:25.050
But obviously, I haven't...

00:00:25.050 --> 00:00:27.660
created any kind of relationship
between "Dalmation"

00:00:27.660 --> 00:00:30.540
and "dog" just yet, so if I reload--

00:00:31.631 --> 00:00:33.741
oh! Syntax error.

00:00:36.347 --> 00:00:39.176
Let's see where that is....

00:00:39.176 --> 00:00:42.060
Oh, I forgot my parentheses.

00:00:42.060 --> 00:00:43.712
This is a function.

00:00:48.767 --> 00:00:52.880
So obviously, if I set "spot"

00:00:53.940 --> 00:00:55.712
to new...

00:00:57.529 --> 00:01:01.333
Dalmation, Dal-ma-tion....

00:01:04.319 --> 00:01:06.665
Let's try that again.

00:01:06.665 --> 00:01:09.000
So now "Spot" is a dog,

00:01:09.000 --> 00:01:11.194
but only the color property
is set.

00:01:11.194 --> 00:01:14.857
So I can say "spot.color,"
and that works fine,

00:01:14.857 --> 00:01:17.753
but if I say "spot.speak,"

00:01:18.729 --> 00:01:20.130
that doesn't work at all.

00:01:20.130 --> 00:01:24.030
So, in order to define
the inheritance relationship,

00:01:24.030 --> 00:01:26.040
I need to do something
a little odd.

00:01:26.040 --> 00:01:28.260
So let me give you
a little background first.

00:01:28.260 --> 00:01:30.630
So, if you're used to a language

00:01:30.630 --> 00:01:35.190
like C++ or Java or C#,

00:01:35.190 --> 00:01:38.254
then the way that you define
an inheritance relationship

00:01:38.254 --> 00:01:41.730
is you have a base class,
like dog,

00:01:41.730 --> 00:01:44.040
and then you extend
that base class

00:01:44.040 --> 00:01:47.387
by creating a subclass, like Dalmation.

00:01:47.387 --> 00:01:49.470
So...

00:01:49.470 --> 00:01:51.750
the way you do it in JavaScript

00:01:51.750 --> 00:01:53.010
is a little different.

00:01:53.010 --> 00:01:56.220
So JavaScript is known
as a prototypal

00:01:56.220 --> 00:01:58.530
or "proto-tip-pal" language,

00:01:58.530 --> 00:02:01.500
where inheritance is based
on prototypes.

00:02:01.500 --> 00:02:02.908
So what is a prototype?

00:02:02.908 --> 00:02:05.372
A prototype is an object.

00:02:05.372 --> 00:02:08.220
So the way you define
an inheritance relationship

00:02:08.220 --> 00:02:12.330
is you set a base prototype,
a base object,

00:02:12.330 --> 00:02:15.797
that the sub-object
that you're creating

00:02:15.797 --> 00:02:18.210
inherits all the properties from.

00:02:18.210 --> 00:02:20.703
So instead of extending a class,

00:02:20.703 --> 00:02:23.397
which is a blueprint
for a set of objects,

00:02:23.397 --> 00:02:26.640
instead,
you're extending an object

00:02:26.640 --> 00:02:29.730
by adding additional methods
and additional properties

00:02:29.730 --> 00:02:32.400
to the base set of objects
and properties

00:02:32.400 --> 00:02:34.530
that that object has.

00:02:34.530 --> 00:02:36.210
So what I want to do, basically,

00:02:36.210 --> 00:02:39.000
is I want to create a new dog,

00:02:39.000 --> 00:02:42.330
which is the prototype for all Dalmations,

00:02:42.330 --> 00:02:44.610
and then I want to inherit

00:02:44.610 --> 00:02:47.010
that prototype

00:02:47.010 --> 00:02:49.950
for all Dalmations that I create.

00:02:49.950 --> 00:02:52.170
The way that works is the constructor,

00:02:52.170 --> 00:02:53.850
the Dalmation function,

00:02:54.390 --> 00:02:57.540
has a prototype property, which is an object.

00:02:57.990 --> 00:02:59.700
So whenever you create a function,

00:02:59.700 --> 00:03:01.470
there's going to be a prototype property

00:03:01.470 --> 00:03:03.570
for that function, let's take a look at it.

00:03:03.960 --> 00:03:05.190
So Dalmation,

00:03:06.540 --> 00:03:07.920
which is a function.prototype,

00:03:11.820 --> 00:03:12.960
is an object

00:03:14.040 --> 00:03:16.350
with a constructor function, and actually,

00:03:16.350 --> 00:03:18.780
this constructor function, if I open this up,

00:03:19.650 --> 00:03:21.420
the function is Dalmation.

00:03:21.450 --> 00:03:25.110
So an object whose function, constructor function,

00:03:25.110 --> 00:03:28.440
is a Dalmation, is the prototype

00:03:28.530 --> 00:03:30.660
for all Dalmation objects.

00:03:31.350 --> 00:03:33.450
And there aren't any other properties

00:03:33.450 --> 00:03:36.180
that are really interesting or useful on this object,

00:03:36.180 --> 00:03:39.090
because I haven't set any, but for example,

00:03:39.360 --> 00:03:50.610
if I set Dalmation.prototype.legs = 4...

00:03:52.140 --> 00:03:54.810
And then I said, spot.legs,

00:03:56.010 --> 00:03:58.800
all of a sudden, Spot, an existing Dalmation,

00:03:58.800 --> 00:04:01.350
inherits the number of legs

00:04:01.650 --> 00:04:05.130
from the prototype of the Dalmatian class.

00:04:06.330 --> 00:04:11.460
So I can do this for other properties as well.

00:04:11.490 --> 00:04:14.940
So dog.sound is bark,

00:04:17.550 --> 00:04:20.730
spot.sound is now bark as well.

00:04:21.810 --> 00:04:24.510
And this will be true for any other dog that I create.

00:04:24.540 --> 00:04:33.870
So for example, Rover is new Dalmation as well.

00:04:33.870 --> 00:04:35.760
rover.legs is four,

00:04:36.840 --> 00:04:39.270
rover.sound is bark,

00:04:39.900 --> 00:04:42.960
but I still haven't set a property

00:04:44.100 --> 00:04:47.130
for speak, so that's still going to be an error.

00:04:48.780 --> 00:04:52.170
So this suggests a way of doing inheritance,

00:04:52.170 --> 00:04:55.260
which is to make sure that all of the properties

00:04:55.260 --> 00:04:57.690
defined for dog are also set

00:04:58.200 --> 00:05:01.650
for the prototype object for the Dalmatian class,

00:05:03.060 --> 00:05:05.220
and there's a really easy way of doing that,

00:05:05.460 --> 00:05:06.510
which is...

00:05:07.710 --> 00:05:15.480
Dalmation.prototype = new Dog.

00:05:18.000 --> 00:05:20.760
So Dalmation is going to have a prototype object

00:05:20.760 --> 00:05:22.020
because it's a function,

00:05:23.130 --> 00:05:27.120
but I'm overriding that default generic object

00:05:27.180 --> 00:05:29.850
with a new dog.

00:05:30.810 --> 00:05:32.940
So any new dog that I create

00:05:33.000 --> 00:05:35.070
is going to have all of the properties

00:05:35.070 --> 00:05:36.390
that are defined for dog.

00:05:37.080 --> 00:05:39.660
So let's go ahead and-- actually let me save this...

00:05:40.320 --> 00:05:41.220
Save...

00:05:42.120 --> 00:05:43.470
and then reload,

00:05:44.640 --> 00:05:49.710
and now, I'm going to create Spot is new Dalmation.