- 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
Writing Your First Class
3:28Learn how to declare a class and add a constructor method.
The goal for
this lesson is to create objects for
0:00
each of my pets that
aren't object literals.
0:02
To do this,
we're going to write a class, and
0:05
then create an object of that class
type for each of the animals.
0:07
Hopefully that doesn't sound too hard or
complicated, but if it does,
0:11
stay with me, you can and will get this
stuff, even if it's hard at first.
0:14
You can always rewind,
watch these videos again, and
0:19
you can even slow me down
if I'm talking too fast.
0:21
There's a workspace attached to this
video that you can code along with.
0:25
Take a moment to go ahead and
open that up.
0:28
If you'd rather use your own text editor,
you can download the project files and
0:31
follow along that way.
0:34
Okay, you ready?
0:36
Open up the pets.js file.
0:38
Inside you'll see the four object
literals from the previous video.
0:40
Like we saw in the last video,
0:43
each of these object literal has the same
properties, animal, age, and breed.
0:45
They also have the same method, bark.
0:50
Take a closer look at them.
0:53
Do you notice anything
else similar between them?
0:55
Well, the value for the animal
property in each of them is dog.
0:58
Because dog is a common value among
each of these object literals,
1:04
it's a viable option for
the name or type of our class.
1:07
When we're designing and writing classes,
it's helpful to start by looking for
1:12
these types of patterns and commonalities
among the things we're trying to model.
1:15
We could also choose to create
a class called pet or even animal.
1:19
Each of these options is
more broad than the last and
1:23
they each would have slightly
different properties and methods.
1:25
As a developer, how you make these
choices is really up to you, but
1:29
it's important to keep in mind how you
plan to use the object, and what other
1:32
objects will interact with it, and how
your objects might change in the future.
1:36
So for this excercise, we want to
create a class to model my pets.
1:40
Right now, I only have dogs, but
what if one day I choose to get a cat.
1:44
It might be wise for me to keep my class
more general and write a pet class,
1:48
instead of a dog class.
1:52
This could save a lot of code
rewrite efforts later on.
1:54
Okay, I think this is
a pretty good place to start.
1:58
Let's create a new file called Pet.js.
2:01
On the first line,
write the words class Pet.
2:08
Capitalizing the first letter of a class
name in its declaration is a common
2:14
convention in programming.
2:18
Now you're going to follow this with
a set of open and closed curly braces.
2:19
Now what?
2:25
Well, we're going to add
a constructor method.
2:27
A constructor method goes at the top,
inside a class.
2:30
This is a special method and
2:33
it's where you outline the properties
that your class will have.
2:34
When you create an object
from this class later on,
2:37
what you're really doing is invoking
this constructor method, and
2:40
like regular methods,
you can pass in parameters.
2:43
If the class is like a blueprint,
the constructor method is like a factory
2:47
that creates objects
based on that blueprint.
2:50
Check the teacher's notes for more
information about constructor methods.
2:53
Inside your curly braces, type the word
constructor followed by the open and
2:58
closed parentheses you'd use in
a regular function declaration.
3:02
Also, like a regular function declaration,
3:06
you'll follow this with a set of open and
closed curly braces.
3:08
Technically this is all we
need to have a working class.
3:14
As you can see our constructor
method is empty and
3:17
if we were to create a pet object right
now it wouldn't be terribly interesting.
3:20
So in the next video we'll continue
to flush out our construction method.
3:24