Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introducing ES2015!
You have completed Introducing ES2015!
Preview
Learn how to create new classes based off of an existing class.
Code snippets
class Student {
constructor({ name, age, interestLevel = 5 } = {} ) {
this.name = name;
this.age = age;
this.interestLevel = interestLevel;
this.grades = new Map;
}
}
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up