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.