Adding Methods To Our Class3:15 with Ashley Boucher
Add methods to the class declaration.
this keyword can take on different values depending on its context and hows it's used. To learn more about it, I suggest reviewing the following workshop from the Treehouse library.
Another resource is the helpful documentation on
this from the MDN web docs.
Adding methods to our classes is pretty straightforward. 0:00 In fact, the syntax for 0:03 class methods looks similar to the syntax of a class constructor. 0:04 If you'd like to keep following along, open up the Pet.js file. 0:08 Hit Enter a few times after the constructor method to put some white 0:12 space before the end of the class declaration. 0:15 Each of our object literals had a method called bark. 0:18 Our pet class should have a similar method, some way for 0:21 the pet to express a sound. 0:24 But not all pets bark, hm. 0:26 What if we create a method for our pet class called speak? 0:28 Let's start with that and together we can work out the correct code. 0:32 On one of the new lines you created type the name of the method, speak. 0:36 A set of parentheses and then open and close curly braces. 0:40 Note that when adding methods inside a class we don't use the function keyword. 0:46 The bark method in the object literal's logged the word woof to the console. 0:51 But the method inside the class needs something a little more dynamic. 0:55 Not all pets say woof when they speak so what do we do? 0:58 Well, there are several ways we could handle this. 1:01 One option is to add a sound property in our constructor method that holds 1:04 the value for the sound our pet will make, like woof or meow. 1:08 Add a new line inside the constructor method and 1:12 create a new property for sound. 1:14 Don't forget to add the sound parameter to the method. 1:19 Back in the speak method we'll create a line that logs the value 1:23 of the sound property to the console. 1:27 When accessing the sound property we're going to use the keyword this instead of 1:34 the object name. 1:38 Just like we did in our constructor method. 1:40 Don't forget to check the teacher's notes for 1:42 more useful information on keyword, this. 1:44 Now, that we've created our method let's go back to the objects we've created and 1:47 adapt them. 1:51 So that when they're instantiated a value for 1:51 the sound property is being passed to the constructor method. 1:53 Perfect, let's see the speak method in action. 2:05 You can see that each of these two objects has a different value for 2:09 the sound property. 2:11 So we'll call the speak method on both of them to show how each object, 2:12 though built from the same blueprint, is customized to have its own values. 2:16 We'll use dot notation to call the speak method on the objects. 2:22 Now, we'll save and jump down to our console to run the file. 2:32 Awesome, great job. 2:43 We don't have any more methods to add to our pet class right now. 2:45 But as you move through the rest of the videos start to think about what 2:47 else you could add. 2:50 Are there other properties you want to include, other methods? 2:52 What else can you do with our pet class? 2:55 Congratulations, you've made some serious progress in this course. 2:58 Now, you know how to write classes, create constructor methods, and 3:02 add methods to classes. 3:05 You can instantiate new objects from your classes as well. 3:06 To really solidify the concepts you've learned check the teacher's notes for 3:10 links to more practice. 3:13 Keep on coding. 3:14
You need to sign up for Treehouse in order to download course files.Sign up