6.5 Inheritance¶
Child Classes¶
Task 1: Study the following example.
class Person{
/* Constructor */
constructor(name, weight, height){
this.name = name;
this.weight = weight; // in KG
this.height = height; // in cm
}
/* Methods */
/*Height in meters*/
heightInMeter(){
return this.height / 100;
}
/*Calculate Body Mass Index -BMI- */
bmi(){
return this.weight / (this.heightInMeter() ** 2);
}
}
let person = new Person("Ali", 72, 180);
console.log(person.bmi());
The result is: 22.2
Task 2: Study the following example.
class User{
/* Constructor */
constructor(name, weight, height){
this.name = name;
this.weight = weight; // in KG
this.height = height; // in cm
}
/* Methods */
//Height in meters
heightInMeter(){
return this.height / 100;
}
//Calculate Body Mass Index -BMI-
bmi(){
return this.weight / (this.heightInMeter() ** 2);
}
//Generate a random integer between 0 and 100
randomNumber(){
return Math.floor(Math.random() * 100)
}
//Generate username
genTemporaryUsername(){
return this.name + this.randomNumber();
}
}
let user = new User("Sanad", 80, 190);
console.log(user);
console.log(user.bmi());
console.log(user.genTemporaryUsername());
The result is as follows:
User {name: "Sanad", weight: 80, height: 190}
22.2
Sanad70
Task 3: Study the following example.
class Person{
/* Constructor */
constructor(name, weight, height){
this.name = name;
this.weight = weight; // in KG
this.height = height; // in cm
}
/* Methods */
//Height in meters
heightInMeter(){
return this.height / 100;
}
//Calculate Body Mass Index -BMI-
bmi(){
return this.weight / (this.heightInMeter() ** 2);
}
}
class User extends Person{
/* Methods */
//Generate a random integer between 0 and 100
randomNumber(){
return Math.floor(Math.random() * 100)
}
//Generate username
genTemporaryUsername(){
return this.name + this.randomNumber();
}
}
let user = new User("Sanad", 80, 190);
console.log(user);
console.log(user.bmi());
console.log(user.genTemporaryUsername());
The result is as follows:
User {name: "Sanad", weight: 80, height: 190}
22.2
Sanad98
Task 4: Study the following example.
class Shape{
/* Constructor */
constructor(name, sides){
this.name = name;
this.sides = sides;
}
/* Methods */
circumference(...sidesLength){
return sidesLength.reduce((a, b) => a + b, 0);
}
}
let shape1 = new Shape("Triangle", 3);
let shape2 = new Shape("Rectangular", 4);
let shape3 = new Shape("Square", 4);
console.log(shape1.circumference(5, 6, 7));
console.log(shape2.circumference(2, 4, 2, 4));
console.log(shape3.circumference(10, 10, 10, 10));
The result is as follows:
18
12
40
Task 5: Study the following example.
class Square{
/* Constructor */
constructor(name, sides){
this.name = name;
this.sides = sides;
}
/* Methods */
circumference(...sidesLength){
return sidesLength.reduce((a, b) => a + b, 0);
}
area(height){
return height * height;
}
}
let sq1 = new Square("Square", 4);
let sq2 = new Square("Square", 4);
console.log(sq1.circumference(10, 10, 10, 10), sq1.area(10));
console.log(sq2.circumference(8, 8, 8, 8), sq1.area(8));
The result is as follows:
40 100
32 64
Task 6: Study the following example.
class Shape{
/* Constructor */
constructor(name, sides){
this.name = name;
this.sides = sides;
}
/* Methods */
circumference(...sidesLength){
return sidesLength.reduce((a, b) => a + b, 0);
}
}
class Square extends Shape{
/* Methods */
area(sideLength){
return sideLength * sideLength;
}
}
let sq1 = new Square("Square", 4);
let sq2 = new Square("Square", 4);
console.log(sq1.circumference(10, 10, 10, 10), sq1.area(10));
console.log(sq2.circumference(8, 8, 8, 8), sq1.area(8));
The result is as follows:
40 100
32 64
Child classes
You can create a child class of another class (parent class). This child class inherits all the properties and the methods of the parent class. It also can have its own properties and methods.
You can create a child class using the keyword extends
.
Extra Practice¶
Task 7: Create a class that creates language objects.
/*
let language = {
name: null,
type: null,
info: function(){
return `${this.name} is a ${this.type}.`
}
}
*/
class Language{
/* Constructor */
constructor(name, type){
this.name = name;
this.type = type;
}
/* Methods */
info(){
return `${this.name} is a ${this.type} language.`
}
}
let lang1 = new Language("Arabic", "human");
let lang2 = new Language("Python", "programming");
console.log(lang1.info());
console.log(lang2.info());
The result is as follows:
Arabic is a human language.
Python is a programming language.
Task 8: Create a class that creates programming language objects.
/*
let programmingLanguage = {
name: null,
type: null,
info: function(){
return `${this.name} is a ${this.type}.`
},
moreInfo: function(designer, firstAppeared){
return `${this.name} was created by ${designer} in ${firstAppeared}`;
}
}
*/
class ProgrammingLanguage{
/* Constructor */
constructor(name, type){
this.name = name;
this.type = type;
}
/* Methods */
info(){
return `${this.name} is a ${this.type} language.`
}
moreInfo(designer, firstAppeared){
return `${this.name} was created by ${designer} in ${firstAppeared}`;
}
}
let lang1 = new ProgrammingLanguage("Ruby", "programming");
let lang2 = new ProgrammingLanguage("Python", "programming");
console.log(lang1.info());
console.log(lang1.moreInfo("Yukihiro Matsumoto", 1995));
console.log(".................");
console.log(lang2.info());
console.log(lang2.moreInfo("Guido van Rossum", 1991));
The result is as follows:
Ruby is a programming language.
Ruby was created by Yukihiro Matsumoto in 1995
.................
Python is a programming language.
Python was created by Guido van Rossum in 1991
Task 9: Refer to tasks 7-8; make the ProgrammingLanguage
class a child class of the Language
class.
class Language{
/* Constructor */
constructor(name, type){
this.name = name;
this.type = type;
}
/* Methods */
info(){
return `${this.name} is a ${this.type} language.`
}
}
class ProgrammingLanguage extends Language{
/* Methods */
moreInfo(designer, firstAppeared){
return `${this.name} was created by ${designer} in ${firstAppeared}`;
}
}
let lang1 = new ProgrammingLanguage("Ruby", "programming");
let lang2 = new ProgrammingLanguage("Python", "programming");
console.log(lang1.info());
console.log(lang1.moreInfo("Yukihiro Matsumoto", 1995));
console.log(".................");
console.log(lang2.info());
console.log(lang2.moreInfo("Guido van Rossum", 1991));
The result is as follows:
Ruby is a programming language.
Ruby was created by Yukihiro Matsumoto in 1995
.................
Python is a programming language.
Python was created by Guido van Rossum in 1991
Task 10: Refer to task 9; rename the moreInfo
method in the child class to info
.
class Language{
/* Constructor */
constructor(name, type){
this.name = name;
this.type = type;
}
/* Methods */
info(){
return `${this.name} is a ${this.type} language.`
}
}
class ProgrammingLanguage extends Language{
/* Methods */
info(designer, firstAppeared){
return `${this.name} was created by ${designer} in ${firstAppeared}`;
}
}
let lang1 = new ProgrammingLanguage("Ruby", "programming");
let lang2 = new ProgrammingLanguage("Python", "programming");
let lang3 = new Language("Arabic", "human");
let lang4 = new Language("Sanskrit", "human");
console.log(lang1.info("Yukihiro Matsumoto", 1995));
console.log(lang2.info("Guido van Rossum", 1991));
console.log(".................");
console.log(lang3.info());
console.log(lang4.info());
The result is as follows:
Ruby is a programming language.
Ruby was created by Yukihiro Matsumoto in 1995
.................
Arabic is a human language.
Sanskrit is a human language.
Task 11: Create a class that creates website objects.
/*
let website = {
name: null,
type: null,
grantAccess: function(location){
return location !== "Jordan" ? "not allowed" : "allowed";
}
}
*/
class Website{
/* constructor */
constructor(name, type){
this.name = name;
this.type = type;
}
/* Methods */
grantAccess(location){
return location !== "Jordan" ? "not allowed" : "allowed";
}
}
let website1 = new Website("Government Online", "government website");
let website2 = new Website("My school", "educational");
console.log(website1.grantAccess("Jordan"));
console.log(website2.grantAccess("USA"));
The result is as follows:
allowed
not allowed
Task 12: Create a class that creates blog objects.
/*
let blog = {
name: null,
type: null,
grantAccess: function(location){
return location !== "Jordan" ? "not allowed" : "allowed";
},
welcomeMessage: function(){
return `Welcome everyone to my blog. Hope you enjoy your time reading my awesome content.`;
}
}
*/
class Blog{
/* constructor */
constructor(name, type){
this.name = name;
this.type = type;
}
/* Methods */
grantAccess(location){
return location !== "Jordan" ? "not allowed" : "allowed";
}
welcomeMessage(){
return `Welcome everyone to my blog. Hope you enjoy your time reading my awesome content.`;
}
}
let blog1 = new Blog("Learn With Naw Blog", "blog");
let blog2 = new Blog("Linux Blog", "blog");
console.log(blog1);
console.log(blog1.grantAccess("Palestine"));
console.log(blog1.welcomeMessage());
console.log("..............")
console.log(blog2);
console.log(blog2.grantAccess("Iraq"));
console.log(blog2.welcomeMessage());
The result is as follows:
Blog {name: "Learn With Naw Blog", type: "blog"}
not allowed
Welcome everyone to my blog. Hope you enjoy your time reading my awesome content.
..............
Blog {name: "Linux Blog", type: "blog"}
not allowed
Welcome everyone to my blog. Hope you enjoy your time reading my awesome content.
Task 13: Refer to tasks 11-12; make the Blog
class a child class of the Website
class.
class Website{
/* constructor */
constructor(name, type){
this.name = name;
this.type = type;
}
/* Methods */
grantAccess(location){
return location !== "Jordan" ? "not allowed" : "allowed";
}
}
class Blog extends Website{
/* Methods */
welcomeMessage(){
return `Welcome everyone to my blog. Hope you enjoy your time reading my awesome content.`;
}
}
let blog1 = new Blog("Learn With Naw Blog", "blog");
let blog2 = new Blog("Linux Blog", "blog");
console.log(blog1);
console.log(blog1.grantAccess("Palestine"));
console.log(blog1.welcomeMessage());
console.log("..............")
console.log(blog2);
console.log(blog2.grantAccess("Iraq"));
console.log(blog2.welcomeMessage());
The result is as follows:
Blog {name: "Learn With Naw Blog", type: "blog"}
not allowed
Welcome everyone to my blog. Hope you enjoy your time reading my awesome content.
..............
Blog {name: "Linux Blog", type: "blog"}
not allowed
Welcome everyone to my blog. Hope you enjoy your time reading my awesome content.
Task 14: Refer to task 13; Add the following grantAcess
method to the Blog
class.
/*
grantAccess(){
return "All the countries are allowed";
}
*/
class Website{
/* constructor */
constructor(name, type){
this.name = name;
this.type = type;
}
/* Methods */
grantAccess(location){
return location !== "Jordan" ? "not allowed" : "allowed";
}
}
class Blog extends Website{
/* Methods */
welcomeMessage(){
return `Welcome everyone to my blog. Hope you enjoy your time reading my awesome content.`;
}
grantAccess(){
return "All the countries are allowed";
}
}
let website1 = new Website("College Website", "educational");
let website2 = new Website("Local Restaurant", "local business");
let blog1 = new Blog("Learn With Naw Blog", "blog");
let blog2 = new Blog("Linux Blog", "blog");
console.log(website1.grantAccess("Palestine"));
console.log(website2.grantAccess("Iraq"));
console.log("..............")
console.log(blog1.grantAccess("Palestine"));
console.log(blog2.grantAccess("Iraq"));
The result is as follows:
not allowed
not allowed
..............
All the countries are allowed
All the countries are allowed
Task 15: Create a class that creates theme objects.
/*
let theme = {
name: null,
domain: null,
author: null,
backgroundColor: function(){
return "Set the background elements to red";
}
}
*/
class Theme{
/* constructor */
constructor(name, domain, author){
this.name = name;
this.domain = name;
this.author = author;
}
/* Methods */
backgroundColor(){
return "Set the background elements to red";
}
}
let theme1 = new Theme("Learn With Naw", "learn-with-naw", "Nawras");
console.log(theme1.backgroundColor());
The result is: Set the background elements to red
Task 16: Create a class that creates child theme objects.
/*
let childTheme = {
name: null,
domain: null,
author: null,
backgroundColor: function(){
return "Set the background elements to blue";
}
}
*/
class ChildTheme{
/* constructor */
constructor(name, domain, author){
this.name = name;
this.domain = name;
this.author = author;
}
/* Methods */
backgroundColor(){
return "Set the background elements to blue";
}
}
let childTheme1 = new ChildTheme("Learn With Naw Child", "learn-with-naw-child", "Nawras");
console.log(childTheme1.backgroundColor());
The result is: Set the background elements to blue
Task 17: Refer to tasks 15-16; make the ChildThme
class a child class of the Theme
class.
class Theme{
/* constructor */
constructor(name, domain, author){
this.name = name;
this.domain = name;
this.author = author;
}
/* Methods */
backgroundColor(){
return "Set the background elements to red";
}
}
class ChildTheme extends Theme{
/* Methods */
backgroundColor(){
return "Set the background elements to blue";
}
}
let childTheme1 = new ChildTheme("Learn With Naw Child", "learn-with-naw-child", "Nawras");
console.log(childTheme1.backgroundColor());
The result is: Set the background elements to blue
Modifying Parent Methods
You can modify the parent class methods in the child class.