Classes

Several pages ago, we covered three different ways to create an object in JavaScript. I had also mentioned that we were going to cover how to create an object using the ES6 class syntax later on. Additionally, I had mentioned that JavaScript doesn't have the notion of classes, yet we're covering classes in this section. Let's clear all this up and take a look at how to create classes in JavaScript, and how to create objects from these classes.

For JavaScript releases prior to ES6, the notion of classes did not exist. Rather, whenever you created an object, under the hood the JavaScript runtime would inherit directly from other objects, and not from classes (remember that JavaScript is not a classical object-oriented language; it uses prototypal inheritance). This doesn't make JavaScript bad, but it does make it different. In order to bring the same style and semantics from classical object orientation, ES6 brought us the notion of classes. A class is a blueprint for objects, and when we create an object from this blueprint, or template, it is referred to as instantiation. We use a class to instantiate (to bring into existence) one or more objects from it. Let's get into the syntax.

Let's create a Car class and give it a constructor, three properties, and three methods:

class Car {
constructor(make, model) {
this.make = make;
this.model = model;
this.speed = 0;
}
get speed() {
return this._speed;
}
set speed(value) {
this._speed = value;
}
speedUp() {
this.speed += 10;
}
slowDown() {
this.speed -= 10;
}
}

I've purposely used the term methods here, whereas previously I had always referred to them as functions. Since we're now discussing classes and objects, in the classical object-orientation parlance, method is of better choice a word than function

The two relationships that you need to remember for any object-oriented language, are the following: 

  • Objects are instances of their classes
  • Objects encapsulate data and methods that manipulate that data

The data represents the state of the object at any moment in time, and the methods represent the behaviors the object has. That's pretty much it.

OK, back to our class example. Our Car class has a constructor that takes two parameters: the car's make and model. It also has three instance variables: make, model, and speed. Additionally, it has two methods, speedUp and slowDown. Lastly, the speed instance variable is actually a property; this is because it has an associated getter and setter.

Something to pay attention to is that the setter and getter in our class have an underscore in front of the property name, while the associated instance variable does not. This is important because, without the underscores, the JavaScript runtime would throw an exception (that is, RangeError: Maximum call stack size exceeded) when instantiating your Car object.

Great! So, how do we create our instance of it (that is, a Car object), and how can we call its methods and read its property?Here's the code to help answer these questions.

We create our Car object just like any other object, by calling its constructor:

var myG6 = new Car('Pontiac', 'G6');

Let's read our car's current speed:

myG6.speed; // this returns 0, which is the value it was initialized to

Oh, man! Zero miles per hour? That's unacceptable. Let's step on the gas pedal! See this:

myG6.speedUp(); // this increases our speed by 10 mph
myG6.speedUp(); // this increases our speed by another 10 mph
myG6.speedUp(); // this increases our speed yet again, by 10 mph
myG6.speedUp(); // this increases our speed, one last time, by ... you guessed it, 10 mph

How fast are we going? We'd better check:

myG6.speed; // this now returns 40 

Crap! We just entered a school zone and have to drop down to a maximum speed of 20 mph:

myG6.slowDown(); // this decreases our speed by 10 mph
myG6.slowDown(); // this decreases our speed by another 10 mph

Let's check our speed again:

myG6.speed; // this now returns 20

Whew! OK, we're good at this speed, for now. 

To wrap up this section, here are a couple of things to keep in mind about classes in JavaScript:

  • Unlike Java or Python, for instance, classes in JavaScript can only have one constructor. Overloading constructors is not supported. 
  • You can have a super call in your class (used in calling the constructor of a class higher up in the hierarchy), but it must be called prior to using the this reference, as in when we assign the make and model parameters to their respective instance variables.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.198.61