JavaScript Classes

Lesson Objectives

1. Explain why we need classes

2. Create a class to define the blueprint for creating objects

3. Add methods to a class

4. Set properties on an instance of a class

5. Make an instance of each class customizable

6. Create methods to alter the properties of an instance

7. Make a class inherit attributes from a "parent class"

8. Create static properties for a class

9. Create a factory

Explain why we need classes

Sometimes we need to repetitively create new objects with the same attributes. Imagine we wanted to create multiple people. All people have the same basic attributes, so it would be great if we could create a blueprint for our person creation process.

Create a class to define the blueprint for creating objects

When creating a class, it's custom to capitalize the first letter of the variable, so we know it's a class. This follows customs in other programming languages.

class Person {

};

Now we can "instantiate" or create new objects using this class. We do this by adding the new keyword before calling the class name like a function.

const me = new Person();
const bob = new Person();
console.log(me);
console.log(bob);
console.log(typeof(me));
console.log(typeof(bob));

Add methods to a class

Right now, our object doesn't do anything. Let's have it do some stuff;

class Person {
  greet() {
    console.log("hi!");
  }
}
const me = new Person();
me.greet();

These methods can of course take parameters:

class Person {
  greet(otherPerson) {
    console.log("hi " + otherPerson + "!");
  }
}
const me = new Person();
me.greet("bob");

If we have multiple methods, don't put commas between them:

class Person {
  greet(otherPerson) {
    console.log("hi " + otherPerson + "!");
  }
  jump() {
    console.log("weeee!");
  }
}
const me = new Person();
me.greet("bob");
me.jump();

Set properties on an instance of a class

If we log the instances of our class, we'll see they don't have any properties:

class Person {
  greet(otherPerson) {
    console.log("hi " + otherPerson + "!");
  }
  jump() {
    console.log("weeee!");
  }
}
const me = new Person();
console.log(me);

Let's add some properties with a constructor function. This is a function that gets called once, each time an object is created:

class Person {
  constructor() {
    this.legs = 2;
    this.arms = 2;
    this.eyes = "blue";
    this.hair = "blonde";
  }
  greet(otherPerson) {
    console.log("hi " + otherPerson + "!");
  }
  jump() {
    console.log("weeee!");
  }
}
const me = new Person();
console.log(me);

Make an instance of each class customizable

Of course, our constructor function can take params which we can use to alter the properties of the object instantiated. This allows us to customize each instance:

class Person {
  constructor() {
    this.legs = 2;
    this.arms = 2;
    this.eyes = "blue";
    this.hair = "blonde";
  }
  greet(otherPerson) {
    console.log("hi " + otherPerson + "!");
  }
  jump() {
    console.log("weeee!");
  }
}
const me = new Person();
console.log(me);

Create methods to alter the properties of an instance

We can of course, alter the properties of an instance, after it is created:

me.hair = 'red';
console.log(me);

But it's a nice practice to define a method that will alter that:

class Person {
  constructor(name, age, eyes, hair) {
    this.legs = 2;
    this.arms = 2;
    this.name = name;
    this.age = age;
    this.eyes = eyes;
    this.hair = hair;
  }
  setHair(hairColor) {
    this.hair = hairColor;
  }
  greet(otherPerson) {
    console.log("hi " + otherPerson + "!");
  }
  jump() {
    console.log("weeee!");
  }
}
const me = new Person("Matt", 36, "blue", "blonde");
console.log(me);
me.setHair("red");
console.log(me);

• This way, everything is done with methods

• Other developers can quickly scan the class definition to determine what you'd like them to be able to do with the class

Make a class inherit attributes from a "parent class"

Sometimes we want to have a "parent" class that will have some basic attributes that will be inherited by "child" classes.

class Person {
  constructor(name, age, eyes, hair) {
    this.legs = 2;
    this.arms = 2;
    this.name = name;
    this.age = age;
    this.eyes = eyes;
    this.hair = hair;
  }
  setHair(hairColor) {
    this.hair = hairColor;
  }
  greet(otherPerson) {
    console.log("hi " + otherPerson + "!");
  }
  jump() {
    console.log("weeee!");
  }
}

class Hero extends Person {}
const spiderman = new Hero("Peter Parker", 16, "blue", "black");
console.log(spiderman);

We can now add additional functionality:

class Hero extends Person {
  fly() {
    console.log("I can scale buildings!");
  }
}
const spiderman = new Hero("Peter Parker", 16, "blue", "black");
spiderman.fly();

And we can override previous functionality:

class Hero extends Person {
  fly() {
    console.log("I can scale buildings!");
  }
  greet(otherPerson) {
    console.log("Greetings " + otherPerson);
  }
}
const spiderman = new Hero("Peter Parker", 16, "blue", "black");
spiderman.greet("Bob");

We can even reference the parent class' method and extend its original functionality:

class Hero extends Person {
  fly() {
    console.log("I can scale buildings!");
  }
  greet(otherPerson) {
    console.log("Greetings " + otherPerson);
  }
  jump() {
    super.jump();
    this.fly();
  }
}
const spiderman = new Hero("Peter Parker", 16, "blue", "black");
spiderman.jump();

This is most useful on the constructor:

class Hero extends Person {
  constructor(name, age, eyes, hair) {
    super(name, age, eyes, hair);
    this.superPowers = [
      "flight",
      "superhuman strength",
      "x-ray vision",
      "heat vision",
      "cold breath",
      "super-speed",
      "enhanced hearing",
      "nigh-invulnerability",
    ];
  }
  fly() {
    console.log("I can scale buildings!");
  }
  greet(otherPerson) {
    console.log("Greetings " + otherPerson);
  }
  jump() {
    super.jump();
    this.fly();
  }
}
const spiderman = new Hero("Peter Parker", 16, "blue", "black");
console.log(spiderman);

Create static properties for a class

Sometimes you want to define properties that pertain to the class as a whole, not the instance. This allows us to limit, somewhat, what the user of class can do.

class Person {
  static eyeColors() {
    return ["blue", "green", "brown"];
  }
  //rest of class definition here...
}
//more code...
const spiderman = new Hero("Peter Parker", 16, Person.eyeColors()[0], "black");

Create a factory

• Sometimes we need to have a factory object that will generate other objects

• The purpose of the factory is so it can control the creation process in some way

• This is usually a single object that exists throughout the program that performs a set of functions

  • also called a singleton

class Car {
  constructor(serialNumber) {
    this.serialNumber = serialNumber;
  }
  drive() {
    console.log("Vroom");
  }
}
const factory = {
  cars: [],
  generateCar() {
    const newCar = new Car(this.cars.length);
    this.cars.push(newCar);
    return newCar;
  },
  findCar(index) {
    return this.cars[index];
  },
};

factory.generateCar();
factory.generateCar();
console.log(factory);
console.log(factory.findCar(1));

You could also have a factory which is an instantiation of a class

class Car {
    constructor(maker, serialNumber){
        this.maker = maker;
        this.serialNumber = serialNumber;
    }
    drive(){
        console.log('Vroom');
    }
}

class AutoPlant {
    constructor(maker){
        this.maker = maker;
        this.cars = [];
    }
    generateCar(){
        const newCar = new Car(this.maker, this.cars.length)
        this.cars.push(newCar);
        return newCar;
    }
    findCar(index){
        return this.cars[index];
    }
}

const toyotaPlant = new AutoPlant("Toyota");
const bmwPlant = new AutoPlant("BMW");
toyotaPlant.generateCar();
console.log(toyotaPlant);
console.log(toyotaPlant.findCar(0))