Before ES6 and classes, object-oriented programming was achieved using prototypes. We will not be going over prototypes in this article, but if you would like more information on them, check out prototypes at MDN.
In my college computer science courses, classes did not come easy to me. Partly because I did not have a basic understanding of classes to build on, and because we covered a lot of information in a short timeframe.
What is a Class?
Classes are in fact “special functions”. - MDN
In other programming languages, classes are referred to as blueprints (or templates) that can be re-used. Take a character in your favorite game. He/She has traits they always start with. These traits can be part of the blueprint. Health 100, speed 90, special ability ‘airstrike’, passive ‘fast heal’. We could write these into a character class to be reused.
Below is a barebones example of a class:
First we declare the class, then we instantiate an instanace of the class. More on this below.
How to Create a Class
There are two ways to create a class, class declaration and class expression. We will be using class declaration in this article (trying to keep things simple).
We create a class by using the
class keyword (lowercase) then the name we are giving our class. Above, we used
MyClassName. Class names should be in Pascal case (capitalize the first letter and first letter of each new word with no spaces between). After the class name, use opening and closing brackets to create the class body. The code for our class goes between the brackets.
Remember to create the class first before we access it. Classes are not hoisted like functions are.
How to Instantiate a Class
Instantiate means to create an instance of. We will be creating an instance of the class we made previously.
To instantiate our class, we set a variable (
myVariableNameForClass) equal to a new instance of the class (
MyClassName) followed by an empty pair of parentheses as depicted in the code snippit above. To see this class, we would console log out the variable name
myVariableNameForClass (see below).
A constructor is a method that gets executed when a new instance of an object is created. The constructor provides the class with initial values. Check out the example of a class constructor below:
We can even pass a value to the constructor and assign it to a constructor property.
Let’s walk through passing a value to the constructor:
We instantiate the class (
const player1 = new MasterChief("green");) and give the class a value of
green in the parenthesis.
Then the color
green goes into the constructor as a parameter named
color and then is passed to
this.color by assignment. Now we can create multiple MasterChiefs of multiple colors.
More facts about constructor methods:
1. Can only have one constructor method per class.
2. All classes have a constructor method.
3. If we do not define a constructor method, one will be defined for us (behind the scenes).
Why do constructor properties have
this in front of them?
this refers to the class they are in. Without
this, the values in the constructor will not be bound to the class they are being constructed in, therefore throwing a reference error of [property] not defined.
A method is a function that is declared inside a class. We have already learned about one method, the constructor method (above).
We can create methods that complete an action or a task for the class object. We could create a method in our MasterChief class that throws a grenade or shoots a gun.
If we call
player1.throwGrenade(); three times, we would get
Grenade thrown. Grenade thrown. Out of grenades.
What are Classes Used For?
Classes are used in object-oriented programming, which is a type of programming design. In a game using object-oriented design, we can use a class to build our characters and reuse the class every time that character is needed (as shown above with the MasterChief class).