WEBVTT

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

00:00:03.184 --> 00:00:06.962
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.781
[speaking while typing]
"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:31.631
and "dog" just yet,
so if I reload--

00:00:31.631 --> 00:00:33.540
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.790
This is a function.

00:00:48.767 --> 00:00:51.482
So obviously, if I set...

00:00:51.482 --> 00:00:53.940
[speaking while typing]
"spot"

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

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

00:01:04.328 --> 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.163
that doesn't work at all.

00:01:20.163 --> 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:54.394
the Dalmation function,

00:02:54.394 --> 00:02:58.014
has a prototype property,
which is an object.

00:02:58.014 --> 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.960
for that function;
let's take a look at it.

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

00:03:06.546 --> 00:03:10.728
which is a function.prototype,

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

00:03:14.040 --> 00:03:15.872
with a constructor function.

00:03:15.872 --> 00:03:17.642
And actually,
this constructor function,

00:03:17.642 --> 00:03:19.696
if I open this up,

00:03:19.696 --> 00:03:21.468
the function is Dalmation.

00:03:21.468 --> 00:03:25.067
So an object whose function,
constructor function,

00:03:25.067 --> 00:03:27.123
is a Dalmation,

00:03:27.123 --> 00:03:28.530
is the prototype

00:03:28.530 --> 00:03:31.350
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:38.016
because I haven't set any.

00:03:38.016 --> 00:03:39.360
But for example,

00:03:39.360 --> 00:03:40.470
if I set

00:03:40.470 --> 00:03:42.263
[speaking while typing]
"Dalmation

00:03:43.917 --> 00:03:45.763
".prototype

00:03:46.913 --> 00:03:49.551
".legs

00:03:49.551 --> 00:03:52.148
"= 4...."

00:03:52.148 --> 00:03:53.056
And then I said,

00:03:53.056 --> 00:03:56.010
[speaking while typing]
"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.650
inherits the number of legs

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

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

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

00:04:16.990 --> 00:04:21.810
"spot.sound"
is now "bark" as well.

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

00:04:24.540 --> 00:04:26.550
So for example,

00:04:26.550 --> 00:04:30.641
[speaking while typing]
Rover is "new Dalmation" as well.

00:04:32.437 --> 00:04:35.942
"rover.legs" is "4",

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

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

00:04:44.167 --> 00:04:47.563
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:58.153
defined for dog are also set

00:04:58.153 --> 00:05:01.969
for the prototype object
for the Dalmatian class.

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

00:05:05.495 --> 00:05:07.710
which is...

00:05:07.710 --> 00:05:11.238
[speaking while typing]
"Dalmation.prototype

00:05:12.556 --> 00:05:16.000
"= 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:23.130
because it's a function,

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

00:05:27.245 --> 00:05:30.040
with a new dog.

00:05:30.815 --> 00:05:33.000
So any new dog that I create

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

00:05:35.032 --> 00:05:37.080
that are defined for dog.

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

00:05:40.445 --> 00:05:42.120
Save...

00:05:42.120 --> 00:05:44.676
and then reload.

00:05:44.676 --> 00:05:46.480
And now, I'm going to create

00:05:46.480 --> 00:05:50.258
[speaking while typing]
Spot is new Dalmation.