Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Add properties to the class blueprint using the constructor method.
Understanding "this"
Understanding how to use the this keyword can seem confusing at first. For more information, review the documentation on MDN web docs, which has some other examples.
Constructor Methods
Now that we have declared
the pet class and
0:00
created its constructor method,
let's outline what properties that
0:02
objects of this class type
will have available to them.
0:05
The object literals in the pets.js
file have three properties,
0:09
animal, age, and breed.
0:14
I think you'll agree that these
are appropriate to use in this pet
0:16
class as well.
0:19
If we were writing a Dog class instead,
0:21
the animal property would be pretty
redundant, so we could leave that one out.
0:23
But since we're writing a Pet class,
it's important to keep.
0:26
To include a property in
a constructor method,
0:30
you write the word this, followed by a
dot, followed by the name of the property.
0:32
If you recall, when we want to add
a property to an object literal,
0:37
the syntax is the name of the object
literal, followed by a dot, and
0:40
then the new property.
0:44
We use this same pattern
in the constructor method,
0:46
except instead of the object name,
we are using keyword this.
0:48
That's because the this keyword
inside a constructor method
0:52
is referring to the object
that is being created.
0:56
The keyword this has different
meanings depending on where it's used,
0:59
which is often confusing,
even to experienced JavaScript developers.
1:03
We don't get into the keyword
this too much in this course, but
1:07
it's an important concept to know.
1:10
So I've included some links to other
Treehouse courses and workshops and
1:12
some outside documentation that can help
you understand this a little better.
1:15
So to add the animal property,
we type this.animal.
1:20
Now we have to set it equal to a value.
1:25
But how do we know what to set it to?
1:27
Later on, when we create
an instance of our Pet class, and
1:29
this constructor method is invoked, we'll
pass it the value that we want to use.
1:32
That means our constructor method
must be able to accept a parameter.
1:37
To do that, inside the parentheses,
we type the word animal.
1:40
Now we can set our animal
property equal to this parameter.
1:47
Okay, let's add our other two properties,
and then we'll take a break.
1:52
First, we'll add the parameters for
age and breed.
1:56
Then just like we did for the animal
property, we'll create new properties for
2:01
age and breed and
set them equal to the parameters.
2:05
Wow, great job.
2:17
Congrats on completing your
very first constructor method.
2:19
This is is amazing progress,
and I'm really proud of you.
2:22
Let's take a break here to celebrate our
accomplishment, and when we come back,
2:25
we'll instantiate some pet objects and
start to see the fruits of our labor.
2:28
See you soon.
2:32
You need to sign up for Treehouse in order to download course files.
Sign up