1
00:00:00,840 --> 00:00:04,270
Just as objects can be
composed from many objects,

2
00:00:04,270 --> 00:00:07,650
classes can easily inherit
properties from other classes.

3
00:00:07,650 --> 00:00:11,080
In the previous video you learned
how to define a class of Student.

4
00:00:11,080 --> 00:00:16,150
In this video I'll add new features to the
Student class by extending another class.

5
00:00:16,150 --> 00:00:19,770
I'll show you how extending classes
can help keep your code modular and

6
00:00:19,770 --> 00:00:21,310
easy to reason about.

7
00:00:21,310 --> 00:00:24,370
And if you're following along,
go ahead and open the latest workspace for

8
00:00:24,370 --> 00:00:25,910
this course.

9
00:00:25,910 --> 00:00:29,620
In the file subclass.js,
I'm going to add new properties and

10
00:00:29,620 --> 00:00:34,815
methods to the Student class by
extending this Person class.

11
00:00:34,815 --> 00:00:41,095
As you can see, the Person class takes
three parameters, name, age, and eyeColor.

12
00:00:41,095 --> 00:00:44,815
And eyeColor has a default value of brown.

13
00:00:44,815 --> 00:00:49,765
There's also a dance method with
an array of different types of dances.

14
00:00:49,765 --> 00:00:55,810
And then I console.log a person's name and
a random dance from the dances array.

15
00:00:55,810 --> 00:00:59,910
And I've already defined
stevenJ as a Person and

16
00:00:59,910 --> 00:01:02,510
called the dance method for stevenJ.

17
00:01:02,510 --> 00:01:07,040
So, I'll run this file in the console and
see what gets logged.

18
00:01:08,380 --> 00:01:10,840
Great, I see that Steven
is doing the mambo.

19
00:01:12,340 --> 00:01:15,680
Well, I think it's safe to
say that my student class

20
00:01:15,680 --> 00:01:19,910
from the previous video could
extend my Person class.

21
00:01:19,910 --> 00:01:25,300
So I'll paste the Student class
right below the Person class and

22
00:01:25,300 --> 00:01:28,870
you can also copy this class from
the teacher's notes of this video.

23
00:01:28,870 --> 00:01:33,740
Normally, a named JavaScript function,
like a constructor function, can appear at

24
00:01:33,740 --> 00:01:37,390
the bottom of a script and still be
called by code that appears before it.

25
00:01:37,390 --> 00:01:42,280
That's known as hoisting, however,
JavaScript classes aren't hoisted.

26
00:01:42,280 --> 00:01:45,870
This means you need to load
code that defines the class

27
00:01:45,870 --> 00:01:48,580
before any code that calls the class.

28
00:01:48,580 --> 00:01:49,400
In other words,

29
00:01:49,400 --> 00:01:54,450
make sure you define classes at the top
of scripts before other codes use them.

30
00:01:54,450 --> 00:01:55,990
To learn more about what hoisting is,

31
00:01:55,990 --> 00:01:58,870
I have listed some resources
in the teacher's notes.

32
00:01:58,870 --> 00:02:05,330
Now, in my case, the Student class cannot
be declared before the Person class.

33
00:02:05,330 --> 00:02:10,021
So to extend the Person class
from the Student class,

34
00:02:10,021 --> 00:02:17,123
I'll add the extends keyword along with
a reference to the parent class Person.

35
00:02:17,123 --> 00:02:21,066
So right after Student I'll
say extends Person.

36
00:02:21,066 --> 00:02:27,402
Next I'll change stevenJ from an instance
of a Person to an instance of a Student.

37
00:02:31,867 --> 00:02:35,140
I'll save my file and
run it in the console.

38
00:02:36,680 --> 00:02:38,250
And I've got an error.

39
00:02:38,250 --> 00:02:41,260
It says, this is not defined.

40
00:02:41,260 --> 00:02:47,060
Well because I am extending Person,
I also need to call the super

41
00:02:47,060 --> 00:02:52,540
function within the student's constructor
before assigning values to the instance.

42
00:02:52,540 --> 00:02:56,690
Calling the super function means we
are calling the constructor function

43
00:02:56,690 --> 00:02:58,360
on Person.

44
00:02:58,360 --> 00:03:01,950
Now when extending a class, you must
be sure to call the super function

45
00:03:01,950 --> 00:03:07,100
in the child class constructor,
before any reference to the instance.

46
00:03:07,100 --> 00:03:10,130
So in the student constructor,
let's add super.

47
00:03:11,200 --> 00:03:14,643
The Student class only needs the name and
age properties, so

48
00:03:14,643 --> 00:03:16,207
I'll pass those through.

49
00:03:19,728 --> 00:03:23,355
And in addition to
calling the dance method,

50
00:03:23,355 --> 00:03:27,745
I'll also add and
log stevenJ's interest level.

51
00:03:27,745 --> 00:03:33,415
So right after age,
say interestLevel: 3 and

52
00:03:33,415 --> 00:03:39,522
then we'll consul.log
stevenJ.interestLevel

53
00:03:46,170 --> 00:03:48,300
I'll run this file in the console.

54
00:03:50,510 --> 00:03:55,120
And great, I see that Stephen is doing the
tango and has an interest level of three.

55
00:03:57,160 --> 00:04:04,380
So when I extended the Person class,
stevenJ inherited the dance method here.

56
00:04:04,380 --> 00:04:07,870
But I want my Student class
to have its own dance method.

57
00:04:07,870 --> 00:04:10,600
So I will add a dance method
to the Student class and

58
00:04:10,600 --> 00:04:15,310
include a parameter to allow the student
to perform a traditional dance.

59
00:04:15,310 --> 00:04:20,295
So inside the Student
class I'll type dance

60
00:04:20,295 --> 00:04:25,012
(traditional) [BLANK-AUDIO] Then

61
00:04:25,012 --> 00:04:29,600
inside we'll say if (traditional).

62
00:04:33,630 --> 00:04:38,000
Now traditional dances come
from the Person class, so

63
00:04:38,000 --> 00:04:43,080
I need to call dance on super
right inside the if statement.

64
00:04:43,080 --> 00:04:47,191
We'll say super.dance then return.

65
00:04:50,849 --> 00:04:55,596
So, now, if I call dance
with traditional being true,

66
00:04:55,596 --> 00:05:00,300
stevenJ will perform a dance
of the Person class.

67
00:05:00,300 --> 00:05:03,670
And if I call a dance with
traditional being false,

68
00:05:03,670 --> 00:05:06,720
he'll perform a dance
of the Student class.

69
00:05:06,720 --> 00:05:09,090
So now let's create the dances for
Student.

70
00:05:09,090 --> 00:05:13,679
I'll simply copy the dances
array from the Person class and

71
00:05:13,679 --> 00:05:16,891
paste it inside my Student dance method,

72
00:05:16,891 --> 00:05:21,124
right below the if statement,
and change the dances.

73
00:05:28,478 --> 00:05:33,893
So the dances for student will be lyrical.

74
00:05:37,072 --> 00:05:41,559
Tap, let's say ballet and jazz.

75
00:05:48,922 --> 00:05:54,444
Finally I'll copy the console.log
statement from the Person class and

76
00:05:54,444 --> 00:05:57,167
paste it below my new dances array.

77
00:06:04,350 --> 00:06:06,390
All right, let's try it out.

78
00:06:06,390 --> 00:06:10,945
So if you call dance,
with traditional being true,

79
00:06:10,945 --> 00:06:17,800
stevenJ should perform a random
dance of the Person class.

80
00:06:17,800 --> 00:06:24,580
So when I run this file in the console,
we see that stevenJ is doing the waltz.

81
00:06:24,580 --> 00:06:25,900
And that's right.

82
00:06:25,900 --> 00:06:29,094
And if you call dance with
traditional being false,

83
00:06:29,094 --> 00:06:32,808
stevenJ should perform a random
dance of the Student class.

84
00:06:35,534 --> 00:06:36,390
Let's see.

85
00:06:38,040 --> 00:06:41,640
Yep, Steven is doing the ballet, cool.

86
00:06:41,640 --> 00:06:46,010
Keep in mind that it's easy to override
a parent class's methods and properties.

87
00:06:46,010 --> 00:06:50,280
Because of that you may have undesired
results if you are not careful.

88
00:06:50,280 --> 00:06:54,660
The JavaScript interpreter will not
warn or notify you when this occurs.

89
00:06:54,660 --> 00:06:57,990
You can find more information about
subclasses by following the link in

90
00:06:57,990 --> 00:06:58,840
the teacher's notes.