Classes in Javascript

You have already learned what prototypes are and how the prototype chain works in the last session. Now is the time to learn about classes. JavaScript classes, introduced in ECMAScript 2015, are primarily syntactic sugar over JavaScript's existing prototype-based inheritance. Classes are in fact "special functions". When you check for the data type of a class in JavaScript, you will get function in return.

In the next video, let’s look at how you can define classes in JavaScript.

In the last video, you looked at the syntax of defining a class. You can define a function called as constructor inside each class and this function is the first function to be called when the class is instantiated. Instantiating a class means creating an object of the class and this is done using the new operator.

Remember that it is a good coding practice to give the name of the class starting with a capital letter.

You also learned how a class can derive all the properties and methods of another class. Thus, a child class can inherit a parent class properties and methods using the ‘extends’ keyword.  An important point to note is that when a child class is implementing a parent class, you should call the super() function inside the constructor of the child class. This will call the parent class constructor first to derive the properties and methods of the parent class. Also remember that before using the ‘this’ keyword inside a class constructor, you need to call the super() function. All the classes in JavaScript extend the Object class by default.

Using classes is an alternative to use the prototypal inheritance achieved using the prototype chain, which you have seen in the earlier segment.

Thus, the following code snippet which you saw in the earlier segment while using prototypal inheritance in ES5:

let animal = {
   moves: true
}

let rabbit = {
   eats: true
}

rabbit.__proto__ = animal;

console.log(rabbit.moves);

can be rewritten as follows using the classes in ES6 syntax:

class Animal {
   constructor() {
       this.moves = true;
   }
}

class Rabbit extends Animal {
   constructor() {
       super();
       this.eats = true;
   }
}

let rabbit = new Rabbit();
console.log(rabbit.moves);

The output for both the code snippets given above will be:

true

Now, apart from the constructor, you can also define other functions inside a class. Thus, you can write something like this:

class Person {
   constructor(name) {
       this.name = name;
   }

   getName() {
       return this.name;
   }
}

class Employee extends Person {
   constructor(name, id) {
       super(name);
       this.id = id;
   }

   getID() {
       return this.id;
   }
}

let emp = new Employee("Srishti", "E101");
console.log(emp.getName(), emp.getID());

Here, you have declared a class named Person, which contains a constructor that takes in the name as an argument and add the value of the name inside a variable called name. Thus, when an instance of the Person class is created, this.name refers to the name assigned to the instance (object) of the Person class. Then, there is a function called getName(). This function acts as a getter function to get the value contained inside the variable name of the instance (object) of the Person class.

Then, a class named Employee is defined which inherits from the Person class. Thus, the Employee class will also have the name variable (referenced using this.name) and a function named getName() which returns the value of this.name where this refers to the instance (object) of the Employee class. Inside the Employee class, there is a constructor which takes in two arguments - name and id. The name is passed to the super() method, thus passing the argument name to the constructor of the parent class, which is the Person class in this case. On the next statement, the id, passed as an argument to the constructor, is added to a variable called id, which is added to the Employee class. Inside the Employee class, there is a function named getID. This function acts as a getter function to get the value contained inside the variable id of the instance of the Employee class.

Now, when an instance of the Employee class is created named emp, the values passed to the constructor of the Employee class are “Srishti” and “E101” as the arguments corresponding to the name and id respectively and thus setting these variables for the emp instance. Now, when the emp.getName() and the emp.getID() functions are called, the values for the name and id are returned, which are “Srishti” and “E101” respectively.