- When Object Literals Aren’t Enough 3:04
- Writing Your First Class 3:28
- Adding Properties Inside the Constructor Method 2:33
- Creating a new class 3 objectives
- Instantiating a Pet Object 2:32
- Instantiating an object 1 objective
- Adding Methods To Our Class 3:15
- Adding methods to classes 2 objectives
- Review Working with Classes in JavaScript 4 questions
Preview
Video Player
00:00
00:00
Adding Methods To Our Class
3:15Add methods to the class declaration.
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