25 Classes and Objects

The Object-Oriented Mindset

The central idea behind object-oriented programming (OOP) is that a programmer should view a program as a set of objects with states and behaviors. This is in contrast to a procedural programmer who might begin by breaking down a program into tasks and thinking about the order in which to perform those tasks.

For example, in designing a brick-breaker game, a procedural programmer might first think about the central algorithms such as the game update algorithm, collision detection algorithms, drawing algorithms, and so on. An object-oriented programmer, on the other hand, would first consider what kinds of objects are in the game. They would probably identify balls, paddles, bricks, maybe the scoreboard, and so on. Then they would design and test each object type separately before putting it all together.

Objects with Methods

In object-oriented programming, an object has a state and behaviors. The state is defined by its instance variables (fields), while its behaviors are defined by its methods. A method is a function that is bound to a particular object and can only be accessed through that object.

Here’s an example, based on the ball object from the last chapter:

let ball = {
    x = 350, y = 200,
    xSpeed = -2, ySpeed = -0.5,

    moveOneStep = function() {
        this.x += this.xSpeed;
        this.y += this.ySpeed;
    }

}

In the above example, the ball object tracks its location and speed in its four fields (x, y, xSpeed, ySpeed). It’s fifth instance variable is moveOneStep, but this variable has been assigned a function value. This makes it a method. When it is called, it modifies the ball object’s x and y variables. Note the use of the this keyword, required to access the fields of “this” object (i.e., the ball).

The moveOneStep method can be called like this:

ball.moveOneStep()

This can lead to a very nice separation of concerns, or modularity in the code for complicated apps. We can now encapsulate any logic that has to do with the ball inside the methods of this one object, and call the methods there whenever we need to change the state  or find out something the object. This can make the rest of our code more readable and more maintainable while also making it easy for multiple programmers to work on the same project (each programmer designs and tests one object or a set of objects).

Objects and Classes

Now you can create objects with both fields and methods using an object literal. But if you wanted to add a second and third object of the same type (for example, multiple balls in an animation), you would end up duplicating a lot of code. This is where classes come in. Most object-oriented languages allow you to create a class to serve as a blueprint for an object. You write the code only once for a Ball class, then use it to create as many Ball objects as you want.

Here’s a class definition that could be used to create ball objects:

class Ball {
    x = 350;
    y = 200;
    xSpeed = -1;
    ySpeed = -0.5;

    moveOneStep = function() {
        this.x += this.xSpeed;
        this.y += this.ySpeed;
    }
}

The Ball class looks a bit like an object literal with a slightly different syntax (semicolons instead of commas, the class keyword, etc.). But it’s not an object.

Now that we have a Ball class, we can create any number of Ball objects using the new keyword, and the () operator:

let b1 = new Ball(); 
let b2 = new Ball();

Each Ball object contains its own set of x, y, xSpeed, and ySpeed variables. When we call moveOneStep on a Ball object, it accesses the variables that belong to that object only.

b1.moveOneStep();   // update b1's x and y
b2.xSpeed = -10;    // set b2's xSpeed
b2.moveOneStep();   // update b2's x and y

Constructors

One issue with the Ball class in the previous section is that all the Ball objects are created with the same values for x, y, xSpeed, and ySpeed. So if you wanted to create Ball objects in different locations with different speeds, you would have to set all their variables after you created them.

To make object creation easier, JavaScript provides a special constructor method. Here’s a new version of the Ball class with a constructor added that sets values for all four variables:

class Ball {
    constructor(x, y, xSpeed, ySpeed) {
        this.x = x;
        this.y = y;
        this.xSpeed = -xSpeed;
        this.ySpeed = -ySpeed;
    }
    moveOneStep = function() {
        this.x += this.xSpeed;
        this.y += this.ySpeed;
    }
}

If a constructor is present, it is automatically called when a Ball object is created. Since it takes 4 parameters, you now have to create Ball objects with 4 arguments:

b1 = new Ball(0, 0, -1, 0.5);  
b2 = new Ball(350, 200, 0, 0);

With the constructor added, you can now create Ball objects and set their variables all on one line.

class Ball {
    // class definition here
}

window.addEventListener("load", function(event) {
    // main code here
}