Difference between revisions of "JavaScript/C4/Classes-and-Inheritance-in-JS/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "Title of the script:Classes and Inheritance Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, class, extends, methods, cons...")
 
Line 24: Line 24:
 
Learning Objectives
 
Learning Objectives
 
|| In this tutorial, we will learn about:
 
|| In this tutorial, we will learn about:
−
 
−
 
 
* '''Classes '''and
 
* '''Classes '''and
 
* '''Inheritance in JS'''
 
* '''Inheritance in JS'''
−
 
−
 
  
 
|-
 
|-
 
|| Slide: System Specifications
 
|| Slide: System Specifications
 
|| This tutorial is recorded using:
 
|| This tutorial is recorded using:
−
 
−
 
 
* '''Ubuntu Linux''' OS version 18.04
 
* '''Ubuntu Linux''' OS version 18.04
 
* '''Visual Studio Code''' version 1.45.0 ('''code editor''')
 
* '''Visual Studio Code''' version 1.45.0 ('''code editor''')
Line 45: Line 39:
 
|| Slide : Pre-requisites
 
|| Slide : Pre-requisites
 
|| To practice this tutorial,
 
|| To practice this tutorial,
−
 
−
 
 
* You should be familiar with writing and executing''' JS''' files'''.'''
 
* You should be familiar with writing and executing''' JS''' files'''.'''
 
* If not, please go through the prerequisite tutorials on this website.
 
* If not, please go through the prerequisite tutorials on this website.
−
 
−
 
  
 
|-
 
|-
Line 58: Line 48:
 
* Pls download and extract the file.
 
* Pls download and extract the file.
 
* Make a copy and then use them for practising.
 
* Make a copy and then use them for practising.
−
 
−
 
  
 
|-
 
|-
Line 69: Line 57:
 
* '''Classes''' have ‘'''this’ context'''
 
* '''Classes''' have ‘'''this’ context'''
 
* '''constructor''', '''variables '''and '''methods '''can be '''declared''' inside the '''class'''
 
* '''constructor''', '''variables '''and '''methods '''can be '''declared''' inside the '''class'''
−
 
−
 
  
 
|-
 
|-
Line 131: Line 117:
  
 
Point to the browser '''Console''' tab
 
Point to the browser '''Console''' tab
−
|| In the web browser, open the '''Browser developer tools''' panel and go to the '''console tab'''.
+
|| In the '''web browser''', open the '''Browser developer tools''' panel and go to the '''Console tab'''.
  
 
|-
 
|-
Line 350: Line 336:
 
|-
 
|-
 
|| Slide: Inheritance
 
|| Slide: Inheritance
−
|| Technically, '''Inheritance '''is a concept of '''inheriting''' the parent''' class properties'''.
+
|| Technically, '''Inheritance '''is a concept of '''inheriting''' the '''parent class properties'''.
  
  
Line 356: Line 342:
  
  
−
When using '''extends '''to invoke the '''parent''' '''class constructor, '''we need to use '''super keyword.'''
+
When using '''extends '''to invoke the '''parent class constructor, '''we need to use '''super keyword.'''
  
 
|-
 
|-
Line 544: Line 530:
  
  
−
Here, as we have '''extended''' the '''Human class '''with '''Animal, '''so '''Animal '''is the parent '''class'''.
+
Here, as we have '''extended''' the '''Human class '''with '''Animal, '''so '''Animal '''is the '''parent class'''.
  
 
|-
 
|-
Line 579: Line 565:
  
 
h1.eat();
 
h1.eat();
−
|| To verify if '''h1''' can'''execute '''the''' Animal class method, '''I’m '''executing''' the '''Animal class eat method'''.
+
|| To verify if '''h1''' can'''execute ''' the''' Animal class method, '''I’m '''executing''' the '''Animal class eat method'''.
  
 
|-
 
|-
Line 641: Line 627:
  
  
−
This proves that we have inherited all the '''properties''' from the parent '''class'''.
+
This proves that we have inherited all the '''properties''' from the '''parent class'''.
  
 
|-
 
|-
Line 650: Line 636:
  
 
'''Jayesh can Eat!'''
 
'''Jayesh can Eat!'''
−
|| By '''executing''' the parent '''class method''', we can verify that '''h1 '''can '''execute''' the parent '''class method''' too.
+
|| By '''executing''' the '''parent class method''', we can verify that '''h1 '''can '''execute''' the '''parent class method''' too.
  
  
 
Now let’s create another '''class '''and verify a deep level '''inheritance '''too.
 
Now let’s create another '''class '''and verify a deep level '''inheritance '''too.
−
 
−
|-
 
−
|| Switch to Editor
 
−
|| Switch back to the '''editor.'''
 
  
 
|-
 
|-
Line 1,015: Line 997:
 
|| Slide''': '''Summary''' '''
 
|| Slide''': '''Summary''' '''
 
|| In this tutorial, we have learnt:
 
|| In this tutorial, we have learnt:
−
 
−
 
 
* '''Classes '''and
 
* '''Classes '''and
 
* '''Inheritance '''in '''JS'''
 
* '''Inheritance '''in '''JS'''
−
 
−
 
  
 
|-
 
|-
 
|| Slide: Assignment
 
|| Slide: Assignment
 
|| As an assignment:
 
|| As an assignment:
−
 
−
 
 
* Open the file '''assignment.js''' which you have created earlier.
 
* Open the file '''assignment.js''' which you have created earlier.
 
* Clear the existing code.
 
* Clear the existing code.
 
* Create a '''class Car'''
 
* Create a '''class Car'''
 
* Create the '''methods engine '''and '''wheels '''in the '''class''' '''Car'''
 
* Create the '''methods engine '''and '''wheels '''in the '''class''' '''Car'''
−
 
−
 
  
 
|-
 
|-
Line 1,040: Line 1,014:
 
* Create a '''method battery '''in the '''class''' '''ElectricCar'''
 
* Create a '''method battery '''in the '''class''' '''ElectricCar'''
 
* '''Log''' the '''method''' name in all the three '''methods'''
 
* '''Log''' the '''method''' name in all the three '''methods'''
−
 
−
 
  
 
|-
 
|-
Line 1,049: Line 1,021:
 
* Open the file '''MyPage.html''' in a '''web browser'''.
 
* Open the file '''MyPage.html''' in a '''web browser'''.
 
* Observe the output in the '''browser’s console.'''
 
* Observe the output in the '''browser’s console.'''
−
 
−
 
  
 
|-
 
|-
Line 1,057: Line 1,027:
 
* The video at the following link summarises the Spoken Tutorial project.
 
* The video at the following link summarises the Spoken Tutorial project.
 
* Please download and watch it
 
* Please download and watch it
−
 
−
 
  
 
|-
 
|-
Line 1,065: Line 1,033:
 
* We conduct workshops using spoken tutorials and give certificates.
 
* We conduct workshops using spoken tutorials and give certificates.
 
* For more details, please write to us.
 
* For more details, please write to us.
−
 
−
 
  
 
|-
 
|-

Revision as of 14:42, 31 May 2021

Title of the script:Classes and Inheritance

Author: Jayesh Katta Ramalingaiah

Domain Reviewer:

Novice Reviewer:

Keywords: JavaScript, HTML, class, extends, methods, constructor


Visual Cue
Narration
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:
  • Classes and
  • Inheritance in JS
Slide: System Specifications This tutorial is recorded using:
  • Ubuntu Linux OS version 18.04
  • Visual Studio Code version 1.45.0 (code editor)
  • Firefox web browser

However you may use any other browser of your choice.

Slide : Pre-requisites To practice this tutorial,
  • You should be familiar with writing and executing JS files.
  • If not, please go through the prerequisite tutorials on this website.
Slide: Code files
  • The files used in this tutorial are available in the Code files link on this tutorial page.
  • Pls download and extract the file.
  • Make a copy and then use them for practising.
Slide: Class What are classes?
  • Classes are templates for creating objects
  • Class declarations are not hoisted
  • Classes have ‘this’ context
  • constructor, variables and methods can be declared inside the class
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.


For this demonstration, I have already opened the same.


These files are available in the Code files link for practice.

[Editor] Type:


<!DOCTYPE html>

<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


Press: Alt + L and Alt + O

Save the file and Start the Live server.
[Firefox] Press Ctrl + Shift + I


Point to the browser Console tab

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:


class Animal {

constructor(name) {

this.name = name;

}


walk() {

console.log(this.name + " can Walk!");

}


eat() {

console.log(this.name + " can Eat!");

}


sleep() {

console.log(this.name + " can Sleep!");

}

}


const a1 = new Animal("Lion");

console.log(a1);

a1.eat();

In the main.js file, replace the code as shown.
[Editor] Highlight:


class Animal

To declare a class, we use the keyword class followed by the class name.
[Editor] Highlight:


constructor(name)

Constructor method is declared using the constructor keyword.


It’s similar to the constructor function, which we covered earlier when we learnt about functions.


NOTE: constructor is an inbuilt function in JS, which accepts any number of parameters.


Here, every class will have some private variables

[Editor] Highlight:


constructor(name) {

this.name = name;

}

Those values are bound in the constructor.
[Editor] Highlight:


walk() {

console.log(this.name + " can walk!");

}


eat() {

console.log(this.name + " can eat!");

}


sleep() {

console.log(this.name + " can sleep!");

}

Here, I have declared 3 different methods: walk, eat and sleep.


A method is similar to a function and is a part of the class.


We don’t need any keyword to create a method.


Only the method name is enough.

[Editor] Highlight:

console.log(this.name + " can Eat!");

Inside every method, I have just logged a statement.


As methods are part of the class, this refers to class.


this.name refers to the name bound in the constructor.


To append strings, we use the plus operator.

[Editor] Highlight:


const a1 = new Animal("Lion");

Here, we’re doing something similar to the way of executing a constructor function.


We execute the Animal class in the same way.


On executing Animal here, the constructor in Animal class will be executed.


The parameter Lion which is passed here, is the name in the constructor.


You are already aware that the constructor function returns an object.


So a1 variable will have an object.

[Editor] Highlight:


console.log(a1);

To verify that I’m logging a1.
[Editor] Highlight:


a1.eat();

Internally a1 object will have the prototypes: walk, eat and sleep.


So, here, I’m executing, a1.eat(); to verify the access to prototypes.

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.


And the object internally has prototypes: eat, sleep and walk.

[Browser] [Console Tab]:

Lion can Eat!

On executing the eat method, we see Lion can eat being printed.


Here, this.name refers to Lion.


This is because Lion was the name passed while executing the class constructor.

Slide: Inheritance Technically, Inheritance is a concept of inheriting the parent class properties.


In JS, we do that using extends keyword.


When using extends to invoke the parent class constructor, we need to use super keyword.

Only Narration Now, let us take an example and understand Inheritance better.
Switch to Editor Switch back to the editor.
[Editor] Type:


class Animal {

constructor(name) {

this.name = name;

}


walk() {

console.log(this.name + " can Walk!");

}


eat() {

console.log(this.name + " can Eat!");

}


sleep() {

console.log(this.name + " can Sleep!");

}

}


class Human extends Animal {

constructor(name) {

super(name);

}


think() {

console.log(this.name + "can Think!");

}

}


const a1 = new Animal("Lion");

console.log(a1);

a1.eat();


const h1 = new Human("Jayesh");

console.log(h1);

h1.eat();

In the main.js file, replace the code as shown.
[Editor] Highlight:


class Animal {

constructor(name) {

this.name = name;

}


walk() {

console.log(this.name + " can Walk!");

}


eat() {

console.log(this.name + " can Eat!");

}


sleep() {

console.log(this.name + " can Sleep!");

}

}

I have not changed anything in the Animal class.
[Editor] Highlight:


const a1 = new Animal("Lion");

console.log(a1);

a1.eat();

And, there's no change in this part too.
[Editor] Highlight:


class Human extends Animal {

constructor(name) {

super(name);

}


think() {

console.log(this.name + "can Think!");

}

}

Here, I have declared a class Human.
[Editor] Highlight:


class Human extends Animal

I’m extending the Human class with Animal, to inherit all the properties of Animal.


A Human can also eat, sleep and walk.


So, instead of replicating everything in Human class again, I extend it with the Animal class.

[Editor] Highlight:


constructor(name) {

super(name);

}

Let’s look inside the constructor.


I pass name because a Human will also have a name.

[Editor] Highlight:


super(name);

It’s not necessary for me to bind the variable again.


Instead, I pass the name to super method.


It’s an inbuilt method in JS, which executes the parent class constructor.


Here, as we have extended the Human class with Animal, so Animal is the parent class.

[Editor] Highlight:


think() {

console.log(this.name + "can Think!");

}

If there are any specific functions which Human need to have, it’s written inside the Human class.


Here, I have declared a think method, because a Human can think.

[Editor] Highlight:


const h1 = new Human("Jayesh");

Here, I execute the Human class by passing Jayesh as name.
[Editor] Highlight:


console.log(h1);

And to verify what Human class returns, I’m logging h1 here.
[Editor] Highlight:


h1.eat();

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]


Highlight:


{…}

​

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.


Along with that, it even has access to Animal class methods.


This proves that we have inherited all the properties from the parent class.

[Browser] [Console Tab]:

Highlight:


Jayesh can Eat!

By executing the parent class method, we can verify that h1 can execute the parent class method too.


Now let’s create another class and verify a deep level inheritance too.

[Editor] Type:


class Animal {

constructor(name) {

this.name = name;

}


walk() {

console.log(this.name + " can Walk!");

}


eat() {

console.log(this.name + " can Eat!");

}


sleep() {

console.log(this.name + " can Sleep!");

}

}


class Human extends Animal {

constructor(name) {

super(name);

}


think() {

console.log(this.name + "can Think!");

}

}


class Bird extends Human {

constructor(name) {

super(name);

}


fly() {

console.log(this.name + " can Fly!");

}

}


const a1 = new Animal("Lion");

console.log(a1);

a1.eat();


const h1 = new Human("Jayesh");

console.log(h1);

h1.eat();


const b1 = new Bird("Pigeon");

console.log(b1);

b1.think();

b1.eat();

In the main.js file, replace the code as shown.
[Editor] Highlight:


class Animal {

constructor(name) {

this.name = name;

}


walk() {

console.log(this.name + " can Walk!");

}

eat() {

console.log(this.name + " can Eat!");

}


sleep() {

console.log(this.name + " can Sleep!");

}

}


class Human extends Animal {

constructor(name) {

super(name);

}


think() {

console.log(this.name + "can Think!");

}

}

I have not changed anything in Animal or Human classes.
[Editor] Highlight:


const a1 = new Animal("Lion");

console.log(a1);

a1.eat();


const h1 = new Human("Jayesh");

console.log(h1);

h1.eat();

And there's no change in this part too.
[Editor] Highlight:


class Bird extends Human {

constructor(name) {

super(name);

}


fly() {

console.log(this.name + " can Fly!");

}

}

Here, I have created a class Bird.
[Editor] Highlight:


class Bird extends Human

And extended it to the Human class.
[Editor] Highlight:


constructor(name) {

super(name);

}

On invoking the super method in the constructor, It invokes the Human class constructor.


And, since Human class is extended, Animal class constructor will also be called.

[Editor] Highlight:


fly() {

console.log(this.name + " can Fly!");

}

Birds have the ability to fly and along with that they can eat, sleep, walk and think.


So, I have added a fly method.

[Editor] Highlight:


const b1 = new Bird("Pigeon");

Here, I’m invoking the Bird class by passing Pigeon as name.
[Editor] Highlight:


console.log(b1);

I’m logging b1 to verify what is being returned.
[Editor] Highlight:


b1.think();

To check whether I have access to Human class, I’m executing the Human class method.
[Editor] Highlight:


b1.eat();

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:


Object { name: "Lion" }

Lion can Eat!

Object { name: "Jayesh" }

Jayesh can Eat!

Here, there’s no change in the output.
[Browser] [Console Tab]:

Highlight:


[Click on ▶ icon beside Object and again click on ▶ icon beside prototype, and again click on ▶ icon beside prototype, and again click on ▶ icon beside prototype]


{…}

​

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:


Pigeon can Think!

The Human class method is also executed without any errors.


Thus we verify that b1 can execute the Human class method too.

[Browser] [Console Tab]:

Highlight:


Pigeon can Eat!

The Animal class method is also executed without any errors.


Hence we verify b1 can execute the Animal class method too.

Only Narration With this we have come to the end of this tutorial.


Let’s summarize.

Slide: Summary In this tutorial, we have learnt:
  • Classes and
  • Inheritance in JS
Slide: Assignment As an assignment:
  • Open the file assignment.js which you have created earlier.
  • Clear the existing code.
  • Create a class Car
  • Create the methods engine and wheels in the class Car
Slide: Assignment
  • Create a class called ElectricCar and inherit the properties of Car class
  • Create a method battery in the class ElectricCar
  • Log the method name in all the three methods
Slide: Assignment
  • Create an object ec1 using ElectricCar and then execute Car methods using ec1
  • Open the file MyPage.html in a web browser.
  • Observe the output in the browser’s console.
Slide: About Spoken Tutorial Project
  • The video at the following link summarises the Spoken Tutorial project.
  • Please download and watch it
Slide: Spoken tutorial workshops
  • We conduct workshops using spoken tutorials and give certificates.
  • For more details, please write to us.
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

Contributors and Content Editors

Kr.jayesh, Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=JavaScript/C4/Classes-and-Inheritance-in-JS/English&oldid=55176"