Inheritance in JavaScript ES6 | Class Inheritance | JavaScript Tutorial Series by SFDC Stop

 Hello Trailblazers,

Welcome to the seventh tutorial in JavaScript Tutorial Series by SFDC Stop. In this tutorial, we're going to learn about Inheritance in JavaScript ES6. Inheritance is defined as the process where one (derived) class acquires the properties of another (base) class. We'll see how we can define a base class and a derived class, how we can call the constructor of the base class from the derived class, how we can use the base class methods from the derived class object with an example. This tutorial is published on SFDC Stop YouTube Channel. So, if you want to learn in detail, have a look at the tutorial video down below. Otherwise, you can scroll down to have a look at the code gist with explanation.

Tutorial Video

Concept

The concept of inheritance is to move from Generalization to Specialization. Inheritance plays a vital role in keeping your code reusable as you can keep all the methods that are common in a single base class and you can use them in derived (child) classes. You can basically create a hierarchy where each child has access to all the properties of it's parent as well as it has some other properties that are specific to itself.

Code Gist with Explanation

We're going to define a simple class named as Phone. This will be our base class. Then we're going to define another class named as TouchPhone which will be our derived class. Let's have a quick look at the code below and then we'll understand it properly:

Let's talk about the base class first. Our Phone class is accepting two parameters in it's constructor namely: name and price. The name and price received in the constructor is assigned to the data members of the class with the same name i.e. name and price. After the constructor() we have two methods that are responsible to print the name and price of the phone namely: printName() and printPrice()

Now, let's talk about the derived class. Our TouchPhone classs is extending the Phone class using the extends keyword, this class is our derived class. Inside the TouchPhone class, we have a constructor which is accepting 3 parameters namely: name, price and touchSensitivity. The name and price received in the constructor are passed to the constructor of the base class by using the super().

We know that the base class Phone accepts two parameters inside the constructor i.e. name and price, therefore, we've passed name and price in our super(). After that we've assigned the 3rd parameter which is nothing but touchSensitivity to the data member of the derived class with the same name. After the constructor, we have defined one method named as printTouchSensitivity() which is responsible to print the touch sensitivity of the touch phone.

Conceptual Note: There are some properties which are common to every mobile phone for ex: name and price. That's why we've kept them as a part of the base (parent) class. Now, there can be some phone specific properties as well. Like: we can divide a phone into 2 basic categories:

1. A touch screen phone

2. A basic phone with keypad

For this, we have derived a class from the phone class and named it as TouchPhone, which represents a touch screen phone with an additional property i.e. touchSensitivity. As we're moving from parent to child class, we're also moving from Generalization to Specialization as the child class has more specific properties as compared to base class.

On line number 39, we have created an instance of our TouchPhone class named as iPhone and passed the name, price and sensitivity as iPhone11, 200 and 1.5 respectively to the derived class constructor. The name and price are automatically passed to the Phone class constructor through the super(). Then we're calling the printName(), printPrice() and printTouchSensitivity() methods from the derived class object. The concept to learn here is that: The derived class object can directly access the methods of the base class and can also access the constructor of the base class using the super().

After that we just added a console.log('---------') to divide the result into two parts. In the second part, we're creating an instance of the base class named as basicPhone. We're passing two values inside the constructor named as: Basic Phone and 100. Then we're printing the name and price of the basic phone by calling the printName() and printPrice() methods.

The output when the above code is executed is given below:

As you can see above, we're able to get the name, price and touch sensitivity of the touch phone as: iPhone11, 200 and 1.5 from the instance of the TouchPhone class. After that we're displaying the name and price of the basic phone which is Basic Phone and 100 using the instance of Phone class.

So, we understood that the derived class can easily call the member functions of the base class but is the reverse possible? Can the base class call the member functions of the derived class? Let's try that..!!

As you can see below, we modified our code a little and at the last line we're trying to call the printTouchSensitivity() method of the derived class from the instance of the base class. 

The execution of the above code resulted in an error as "Uncaught TypeError: basicPhone.printTouchSensitivity is not a function". This is because, we cannot call the member function of a derived class from the base class.

To summarize, the learnings are given below:-

• Inheritance is defined as the process where one (derived) class acquires the properties of another (base) class.
  
  
• A class can extend another class by using extends keyword.
  
  
• The derived class can call the constructor of the base class by using the super().
  
  
• The instance of the derived class can directly call the methods of the base class.
  
  
• The instance of the base classs cannot directly call the methods of the derived class.

That's all for this tutorial. I hope you liked it. All the code used in this tutorial is available on GitHub and you can have a look at that by clicking here. Make sure to have a look at the video if you want to learn in detail and let me know your feedback in the comments down below.

Happy Trailblazing..!!