JavaScript/C4/Classes-and-Inheritance-in-JS/English
Title of the script:Classes and Inheritance
Author: Jayesh Katta Ramalingaiah
Domain Reviewer:
Novice Reviewer:
Keywords: JavaScript, HTML, class, extends, methods, constructor
|
|
Slide: Title | Hello and welcome to the spoken tutorial on “Classes and Inheritance in JS”. |
Slide:
Learning Objectives |
In this tutorial, we will learn about:
|
Slide: System Specifications | This tutorial is recorded using:
However you may use any other browser of your choice. |
Slide : Pre-requisites | To practice this tutorial,
|
Slide: Code files |
|
Slide: Class | What are classes?
|
Only Narration | Now, let us take an example and understand classes better. |
Show VS editor | Open Visual Studio Code editor |
[Editor] Welcome Page -> Open Folder -> Practice-JS -> index.html & main.js
|
Then open the files index.html and main.js as explained in the earlier tutorials.
|
[Editor] Type:
<html lang="en"> <head> <title> Class and Inheritance </title> </head> <body> <script src = "main.js" > </script> </body> </html> |
In the index.html file, replace the code as shown.
|
Press: Ctrl + S
|
Save the file and Start the Live server. |
[Firefox] Press Ctrl + Shift + I
|
In the web browser, open the Browser developer tools panel and go to the Console tab. |
Switch to Editor | Switch back to the editor. |
[Editor] Type:
constructor(name) { this.name = name; }
console.log(this.name + " can Walk!"); }
console.log(this.name + " can Eat!"); }
console.log(this.name + " can Sleep!"); } }
console.log(a1); a1.eat(); |
In the main.js file, replace the code as shown. |
[Editor] Highlight:
|
To declare a class, we use the keyword class followed by the class name. |
[Editor] Highlight:
|
Constructor method is declared using the constructor keyword.
|
[Editor] Highlight:
this.name = name; } |
Those values are bound in the constructor. |
[Editor] Highlight:
console.log(this.name + " can walk!"); }
console.log(this.name + " can eat!"); }
console.log(this.name + " can sleep!"); } |
Here, I have declared 3 different methods: walk, eat and sleep.
|
[Editor] Highlight:
console.log(this.name + " can Eat!"); |
Inside every method, I have just logged a statement.
|
[Editor] Highlight:
|
Here, we’re doing something similar to the way of executing a constructor function.
|
[Editor] Highlight:
|
To verify that I’m logging a1. |
[Editor] Highlight:
|
Internally a1 object will have the prototypes: walk, eat and sleep.
|
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to the browser. |
[Browser] [Console Tab]:
[Click on ▶ icon beside Object and again click on ▶ icon beside prototype] Highlight:
name: "Lion" <prototype>: {…} constructor: class Animal { constructor(name) } eat: function eat() sleep: function sleep() walk: walk() |
Here, we can verify that when the class was executed, the object has been returned.
|
[Browser] [Console Tab]:
Lion can Eat! |
On executing the eat method, we see Lion can eat being printed.
|
Slide: Inheritance | Technically, Inheritance is a concept of inheriting the parent class properties.
|
Only Narration | Now, let us take an example and understand Inheritance better. |
Switch to Editor | Switch back to the editor. |
[Editor] Type:
constructor(name) { this.name = name; }
console.log(this.name + " can Walk!"); }
console.log(this.name + " can Eat!"); }
console.log(this.name + " can Sleep!"); } }
constructor(name) { super(name); }
console.log(this.name + "can Think!"); } }
console.log(a1); a1.eat();
console.log(h1); h1.eat(); |
In the main.js file, replace the code as shown. |
[Editor] Highlight:
constructor(name) { this.name = name; }
console.log(this.name + " can Walk!"); }
console.log(this.name + " can Eat!"); }
console.log(this.name + " can Sleep!"); } } |
I have not changed anything in the Animal class. |
[Editor] Highlight:
console.log(a1); a1.eat(); |
And, there's no change in this part too. |
[Editor] Highlight:
constructor(name) { super(name); }
console.log(this.name + "can Think!"); } } |
Here, I have declared a class Human. |
[Editor] Highlight:
|
I’m extending the Human class with Animal, to inherit all the properties of Animal.
|
[Editor] Highlight:
super(name); } |
Let’s look inside the constructor.
|
[Editor] Highlight:
|
It’s not necessary for me to bind the variable again.
|
[Editor] Highlight:
console.log(this.name + "can Think!"); } |
If there are any specific functions which Human need to have, it’s written inside the Human class.
|
[Editor] Highlight:
|
Here, I execute the Human class by passing Jayesh as name. |
[Editor] Highlight:
|
And to verify what Human class returns, I’m logging h1 here. |
[Editor] Highlight:
|
To verify if h1 canexecute the Animal class method, I’m executing the Animal class eat method. |
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to the browser. |
[Browser] [Console Tab]:
Highlight: Object { name: "Lion" } Lion can Eat! |
Here, there is no change in the output. |
[Browser] [Console Tab]:
[Click on ▶ icon beside Object and again click on ▶ icon beside prototype, and again click on ▶ icon beside prototype]
name: "Jayesh" <prototype>: {…} constructor: class Human { constructor(name) } think: function think() <prototype>: {…} constructor: class Animal { constructor(name) } eat: function eat() sleep: function sleep() walk: function walk() |
Observe here, h1 has access to Human class constructor and methods.
|
[Browser] [Console Tab]:
Highlight:
|
By executing the parent class method, we can verify that h1 can execute the parent class method too.
|
[Editor] Type:
constructor(name) { this.name = name; }
console.log(this.name + " can Walk!"); }
console.log(this.name + " can Eat!"); }
console.log(this.name + " can Sleep!"); } }
constructor(name) { super(name); }
console.log(this.name + "can Think!"); } }
constructor(name) { super(name); }
console.log(this.name + " can Fly!"); } }
console.log(a1); a1.eat();
console.log(h1); h1.eat();
console.log(b1); b1.think(); b1.eat(); |
In the main.js file, replace the code as shown. |
[Editor] Highlight:
constructor(name) { this.name = name; }
console.log(this.name + " can Walk!"); } eat() { console.log(this.name + " can Eat!"); }
console.log(this.name + " can Sleep!"); } }
constructor(name) { super(name); }
console.log(this.name + "can Think!"); } } |
I have not changed anything in Animal or Human classes. |
[Editor] Highlight:
console.log(a1); a1.eat();
console.log(h1); h1.eat(); |
And there's no change in this part too. |
[Editor] Highlight:
constructor(name) { super(name); }
console.log(this.name + " can Fly!"); } } |
Here, I have created a class Bird. |
[Editor] Highlight:
|
And extended it to the Human class. |
[Editor] Highlight:
super(name); } |
On invoking the super method in the constructor, It invokes the Human class constructor.
|
[Editor] Highlight:
console.log(this.name + " can Fly!"); } |
Birds have the ability to fly and along with that they can eat, sleep, walk and think.
|
[Editor] Highlight:
|
Here, I’m invoking the Bird class by passing Pigeon as name. |
[Editor] Highlight:
|
I’m logging b1 to verify what is being returned. |
[Editor] Highlight:
|
To check whether I have access to Human class, I’m executing the Human class method. |
[Editor] Highlight:
|
To check whether I have access to Animal class, I’m executing the Animal class method. |
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
Lion can Eat! Object { name: "Jayesh" } Jayesh can Eat! |
Here, there’s no change in the output. |
[Browser] [Console Tab]:
Highlight:
name: "Pigeon" <prototype>: {…} constructor: class Bird { constructor(name) } fly: function fly() <prototype>: {…} constructor: class Human { constructor(name) } think: function think() <prototype>: {…} constructor: class Animal { constructor(name) } eat: function eat() sleep: function sleep() walk: function walk() |
Now observe here, we have access to Bird class, Human class and Animal class too. |
[Browser] [Console Tab]:
Highlight:
|
The Human class method is also executed without any errors.
|
[Browser] [Console Tab]:
Highlight:
|
The Animal class method is also executed without any errors.
|
Only Narration | With this we have come to the end of this tutorial.
|
Slide: Summary | In this tutorial, we have learnt:
|
Slide: Assignment | As an assignment:
|
Slide: Assignment |
|
Slide: Assignment |
|
Slide: About Spoken Tutorial Project |
|
Slide: Spoken tutorial workshops |
|
Slide: Forum questions | Pls post your timed queries in this forum |
Slide: Acknowledgement | Spoken Tutorial Project is funded by Ministry of Education (MoE), Government of India |
Slide: Thanks | The script for this tutorial is contributed by Jayesh and this is Praveen signing off. Thank you for joining |