Preview
Video Player
00:00
00:00
Sub-Classes
6:59Learn how to create new classes based off of an existing class.
Just as objects can be
composed from many objects,
0:00
classes can easily inherit
properties from other classes.
0:04
In the previous video you learned
how to define a class of Student.
0:07
In this video I'll add new features to the
Student class by extending another class.
0:11
I'll show you how extending classes
can help keep your code modular and
0:16
easy to reason about.
0:19
And if you're following along,
go ahead and open the latest workspace for
0:21
this course.
0:24
In the file subclass.js,
I'm going to add new properties and
0:25
methods to the Student class by
extending this Person class.
0:29
As you can see, the Person class takes
three parameters, name, age, and eyeColor.
0:34
And eyeColor has a default value of brown.
0:41
There's also a dance method with
an array of different types of dances.
0:44
And then I console.log a person's name and
a random dance from the dances array.
0:49
And I've already defined
stevenJ as a Person and
0:55
called the dance method for stevenJ.
0:59
So, I'll run this file in the console and
see what gets logged.
1:02
Great, I see that Steven
is doing the mambo.
1:08
Well, I think it's safe to
say that my student class
1:12
from the previous video could
extend my Person class.
1:15
So I'll paste the Student class
right below the Person class and
1:19
you can also copy this class from
the teacher's notes of this video.
1:25
Normally, a named JavaScript function,
like a constructor function, can appear at
1:28
the bottom of a script and still be
called by code that appears before it.
1:33
That's known as hoisting, however,
JavaScript classes aren't hoisted.
1:37
This means you need to load
code that defines the class
1:42
before any code that calls the class.
1:45
In other words,
1:48
make sure you define classes at the top
of scripts before other codes use them.
1:49
To learn more about what hoisting is,
1:54
I have listed some resources
in the teacher's notes.
1:55
Now, in my case, the Student class cannot
be declared before the Person class.
1:58
So to extend the Person class
from the Student class,
2:05
I'll add the extends keyword along with
a reference to the parent class Person.
2:10
So right after Student I'll
say extends Person.
2:17
Next I'll change stevenJ from an instance
of a Person to an instance of a Student.
2:21
I'll save my file and
run it in the console.
2:31
And I've got an error.
2:36
It says, this is not defined.
2:38
Well because I am extending Person,
I also need to call the super
2:41
function within the student's constructor
before assigning values to the instance.
2:47
Calling the super function means we
are calling the constructor function
2:52
on Person.
2:56
Now when extending a class, you must
be sure to call the super function
2:58
in the child class constructor,
before any reference to the instance.
3:01
So in the student constructor,
let's add super.
3:07
The Student class only needs the name and
age properties, so
3:11
I'll pass those through.
3:14
And in addition to
calling the dance method,
3:19
I'll also add and
log stevenJ's interest level.
3:23
So right after age,
say interestLevel: 3 and
3:27
then we'll consul.log
stevenJ.interestLevel
3:33
I'll run this file in the console.
3:46
And great, I see that Stephen is doing the
tango and has an interest level of three.
3:50
So when I extended the Person class,
stevenJ inherited the dance method here.
3:57
But I want my Student class
to have its own dance method.
4:04
So I will add a dance method
to the Student class and
4:07
include a parameter to allow the student
to perform a traditional dance.
4:10
So inside the Student
class I'll type dance
4:15
(traditional) [BLANK-AUDIO] Then
4:20
inside we'll say if (traditional).
4:25
Now traditional dances come
from the Person class, so
4:33
I need to call dance on super
right inside the if statement.
4:38
We'll say super.dance then return.
4:43
So, now, if I call dance
with traditional being true,
4:50
stevenJ will perform a dance
of the Person class.
4:55
And if I call a dance with
traditional being false,
5:00
he'll perform a dance
of the Student class.
5:03
So now let's create the dances for
Student.
5:06
I'll simply copy the dances
array from the Person class and
5:09
paste it inside my Student dance method,
5:13
right below the if statement,
and change the dances.
5:16
So the dances for student will be lyrical.
5:28
Tap, let's say ballet and jazz.
5:37
Finally I'll copy the console.log
statement from the Person class and
5:48
paste it below my new dances array.
5:54
All right, let's try it out.
6:04
So if you call dance,
with traditional being true,
6:06
stevenJ should perform a random
dance of the Person class.
6:10
So when I run this file in the console,
we see that stevenJ is doing the waltz.
6:17
And that's right.
6:24
And if you call dance with
traditional being false,
6:25
stevenJ should perform a random
dance of the Student class.
6:29
Let's see.
6:35
Yep, Steven is doing the ballet, cool.
6:38
Keep in mind that it's easy to override
a parent class's methods and properties.
6:41
Because of that you may have undesired
results if you are not careful.
6:46
The JavaScript interpreter will not
warn or notify you when this occurs.
6:50
You can find more information about
subclasses by following the link in
6:54
the teacher's notes.
6:57