Welcome to your next JavaScript session! We'll be discussing Classes, which are essential blueprints for creating objects. We'll cover class syntax, constructors, methods, and class inheritance. Are you ready to explore JavaScript Classes? Let's unravel the magic!

In JavaScript, Classes serve as blueprints for creating objects. Imagine building houses; each house shares a similar structure — doors, windows, a roof, rooms — but the details may vary, such as the number of rooms or doors. Similarly, each object of a class will have a consistent structure, but the details may differ.

JavaScript
Copy to clipboard
1class House {
2    // Stay tuned for properties and methods.
3}

Here, House is a Class. An object of this Class would be an individual house.

When creating an object from a class, the new keyword calls the constructor inside that class, initiating a new object called an instance of the class.

JavaScript
Copy to clipboard
1class Car {
2    constructor(brand) {
3        console.log("The Car constructor has been called");
4        this.carname = brand;
5    }
6}
7let myCar = new Car("Toyota"); // prints "The Car constructor has been called"

We've created a myCar object of the Car Class with carname set as 'Toyota'. The myCar object is an instance of the Car Class.

In JavaScript classes, this refers to the instance of the class. In other words, when an object is created using a class, this stands for that particular object.

When this is used inside a class's constructor method, it refers to the newly created instance of that class. In our code, this.carname = brand; means the carname property of the newly created object is set to the value of brand passed to the constructor.

You can access the property carname of the instance myCar as follows:

JavaScript
Copy to clipboard
1console.log(myCar.carname);  // Outputs: 'Toyota'

Class Methods allow an object of the class to interact with its properties. Consider a simple Player class for a game, for example. A player has properties like name and score and methods like increaseScore.

JavaScript
Copy to clipboard
1class Player {
2    constructor(name, score) {
3        this.name = name;
4        this.score = score;
5    }
6
7    increaseScore() {
8        this.score++; // Increase Player's score by 1, the same as this.score += 1;
9    }
10}
11
12let player1 = new Player('John', 0);
13player1.increaseScore();
14
15console.log(player1.name); // Output: John
16console.log(player1.score); // Output: 1

Note that when defining class methods, we omit the function keyword.

Inheritance enables one Class to acquire properties and methods from another Class. In Javascript, you can create a new class that inherits from an existing class with the extends keyword.

A key part of using class inheritance is the super keyword. It's used to call the constructor of the parent class and to access the parent's methods.

Here's an example that demonstrates the order of operations when an instance of the subclass (Cat or Dog) is created:

JavaScript
Copy to clipboard
1class Animal {
2    constructor(name) {
3        console.log("An instance of Animal is being created");
4        this.name = name;
5    }
6
7    speak() {
8        console.log(`${this.name} makes a noise.`);
9    }
10}
11
12class Cat extends Animal {
13    // Cat does not have its own constructor or speak method
14}
15
16class Dog extends Animal {
17    constructor(name, breed) {
18        console.log("An instance of Dog is being created");
19        super(name);  // calls the parent constructor
20        this.breed = breed;
21    }
22
23    speak() {
24        super.speak();  // calls the parent method
25        console.log(`${this.name} barks.`);
26    }
27}
28
29let whiskers = new Cat('Whiskers');
30// Logs:
31// An instance of Animal is being created
32
33whiskers.speak(); // Logs: Whiskers makes a noise.
34
35let spot = new Dog('Spot', 'Dalmatian');
36// Logs:
37// An instance of Dog is being created
38// An instance of Animal is being created
39
40spot.speak(); 
41// Logs:
42// Spot makes a noise.
43// Spot barks.

In this example, when a new instance of Dog named Spot is created, it first logs "An instance of Dog is being created", then super(name) calls the Animal constructor, which logs "An instance of Animal is being created". When Spot speaks, it calls the parent's speak method, outputting "Spot makes a noise.", then it adds its own message, "Spot barks.". This demonstrates how Dog instances inherit properties and methods from both the Dog and the Animal class.

In contrast, Cat does not have its own constructor or speak method, so it fully relies on the inherited constructor and method from Animal. Thus, a new Cat instance like whiskers shows only "An instance of Animal is being created" and when we call whiskers.speak(), it only outputs "Whiskers makes a noise.". This highlights how a subclass can fully adopt a superclass's features when it does not define its own.

The exploration has been exciting, hasn't it? We've delved into JavaScript Classes, learned about class syntax, constructors, methods, and class inheritance. Mastering these concepts represents an important stride in your JavaScript journey. Brace yourself for hands-on exercises that will help solidify your knowledge. See you on the other side!