Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Writing Your First Class3:28 with Ashley Boucher
Learn 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 word 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
You need to sign up for Treehouse in order to download course files.Sign up