Search
 
SCRIPT & CODE EXAMPLE
 

JAVASCRIPT

inheritance in javascript

// parent class animal
class Animal {
    constructor(name, weight) {
        this.name = name;
        this.weight = weight;
    }

    eat() {
        return `${this.name} is eating!`;
    }

    sleep() {
        return `${this.name} is going to sleep!`;
    }

    wakeUp() {
        return `${this.name} is waking up!`;
    }

}
//sub class gorilla

class Gorilla extends Animal {
    constructor(name, weight) {
        super(name, weight);
    }

    climbTrees() {
        return `${this.name} is climbing trees!`;
    }

    poundChest() {
        return `${this.name} is pounding its chest!`;
    }

    showVigour() {
        return `${super.eat()} ${this.poundChest()}`;
    }

    dailyRoutine() {
        return `${super.wakeUp()} ${this.poundChest()} ${super.eat()} ${super.sleep()}`;
    }

}

function display(content) {
    console.log(content);
}

const gorilla = new Gorilla('George', '160Kg');
display(gorilla.poundChest());
display(gorilla.sleep());
display(gorilla.showVigour());
display(gorilla.dailyRoutine());

// OUTPUT:
// George is pounding its chest!
// George is going to sleep!
// George is eating! George is pounding its chest!
// George is waking up! George is pounding its chest! George is eating! G
/*
The above code has 2 JavaScript classes namely Animal and Gorilla.
The Gorilla class is a subclass or child class of Animal and it uses the extends keyword to set itself as a subclass.
However, the super keyword has been used in two different ways.
Did you guys notice the same? In Gorilla’s constructor (line 23 of code)
super is used as a “function”. Whereas, Gorilla’s showVigour() (line 35) and dailyRoutine()(line 39) methods have used super as an “object”.
The super keyword is used in two ways because of the following reasons:
In line 24, the super keyword is used as a “function” which calls the
parent class Animal with the parameters passed to Gorilla. 
This is a key step to be carried out in order to make sure that
Gorilla is an instance of Animal.
In line 36 and 40 super is used as an “object” which
refers to an Animal instance (parent class). The super keyword 
here is used to call the methods of the parent class Animal explicitly.
People familiar with languages like C#, Java, Python can pretty
much relate to how all this works. However, JavaScript was not so simple before ES6 came in, especially for classes. So how did people code without using class syntax, super and extends keywords? Or they never used such concepts before and suddenly decided to add them? Let’s find out!
*/
Comment

inherit javascript

function Animal() { }
Animal.prototype.eat = function() {
  return "nom nom nom";
};
function Bird() { }

// Inherit all methods from Animal
Bird.prototype = Object.create(Animal.prototype);

// Bird.eat() overrides Animal.eat()
Bird.prototype.eat = function() {
  return "peck peck peck";
};
Comment

javascript prototype inheritance example

function Person(first, last, age, gender, interests) {
  this.name = {
    first,
    last
  };
  this.age = age;
  this.gender = gender;
  this.interests = interests;
};

function Teacher(first, last, age, gender, interests, subject) {
  Person.call(this, first, last, age, gender, interests);

  this.subject = subject;
}
Comment

inheritance in class in js

//class in es6 are just functional constructor.
//Parent class is Person and Developer class inheritant from Person class using 
//extend and super method 
class Person{
  constructor(firstname,lastname){
    this.firstname= firstname;
    this.lastname=lastname;
    
  }
  aboutPerson(){
  console.log(`My name is ${this.firstname} ${this.lastname} `)
  }
}

class Developer extends Person{
constructor(firstname,lastname,experience,projects){
 /* //super keyword is used to call the constructor
 of its parent class to access the parent's properties and methods*/
	super(firstname,lastname);
  	this.experience=experience;
  	this.projects=projects;
  
  	aboutDev(){
      console.log(`My name is ${this.firstname} and  I have ${this.experience}
	in software development`)
}
  
  const ShirshakDev= new Developer('Shirshak','Kandel',3,13)
  console.log(ShirshakDev.aboutDev())
Comment

javascript inheritance

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
Comment

javascript inheritance

class Animal {
   null
}
class tiger extends Animal {
 null }
Comment

javascript inheritence

class child_class_name extends parent_class_name
Comment

Inheritance in JavaScript

class teamMember {
    name;
    designation = "Support web dev";
    address;
    constructor(name, address) {
        this.name = name;
        this.address = address;
    }
}

class Support extends teamMember {
    startSession() {
        console.log(this.name, "start a support sessin");
    }
}
class StudentCare extends teamMember {
    buildARoutine() {
        console.log(this.name, "build a routine");
    }
}

const max = new Support("Max", "USA");
console.log(max);
const sarah = new StudentCare("Sarah", "UK");
console.log(sarah);
Comment

Inheritance In JavaScript


class Animal{

  constructor()
  {
    this.walk = "walk";
  }
}
class Dog extends Animal{
constructor()
{
  super();
this.bark = "bark";
}

}

const dog = new Dog();
console.log(dog.walk);
/*must include BOTH extends and super()*/
Comment

javascript inheritance

function Teacher(first, last, age, gender, interests, subject) {
  Person.call(this, first, last, age, gender, interests);

  this.subject = subject;
}
Comment

JavaScript Prototype Inheritance

// constructor function
function Person () {
    this.name = 'John',
    this.age = 23
}

// creating objects
const person1 = new Person();
const person2 = new Person();

// adding property to constructor function
Person.prototype.gender = 'male';

// prototype value of Person
console.log(Person.prototype);

// inheriting the property from prototype
console.log(person1.gender);
console.log(person2.gender);
Comment

inheritence in javascript

class Animal {
    constructor(name, weight) {
        this.name = name;
        this.weight = weight;
    }

    eat() {
        return `${this.name} is eating!`;
    }

    sleep() {
        return `${this.name} is going to sleep!`;
    }

    wakeUp() {
        return `${this.name} is waking up!`;
    }

}
//sub class gorilla

class Gorilla extends Animal {
    constructor(name, weight) {
        super(name, weight);
    }

    climbTrees() {
        return `${this.name} is climbing trees!`;
    }

    poundChest() {
        return `${this.name} is pounding its chest!`;
    }

    showVigour() {
        return `${super.eat()} ${this.poundChest()}`;
    }

    dailyRoutine() {
        return `${super.wakeUp()} ${this.poundChest()} ${super.eat()} ${super.sleep()}`;
    }

}

function display(content) {
    console.log(content);
}

const gorilla = new Gorilla('George', '160Kg');
display(gorilla.poundChest());
display(gorilla.sleep());
display(gorilla.showVigour());
display(gorilla.dailyRoutine());

// OUTPUT:
// George is pounding its chest!
// George is going to sleep!
// George is eating! George is pounding its chest!
// George is waking up! George is pounding its chest! George is eating! G
/*
The above code has 2 JavaScript classes namely Animal and Gorilla.
The Gorilla class is a subclass or child class of Animal and it uses the extends keyword to set itself as a subclass.
However, the super keyword has been used in two different ways.
Did you guys notice the same? In Gorilla’s constructor (line 23 of code)
super is used as a “function”. Whereas, Gorilla’s showVigour() (line 35) and dailyRoutine()(line 39) methods have used super as an “object”.
The super keyword is used in two ways because of the following reasons:
In line 24, the super keyword is used as a “function” which calls the
parent class Animal with the parameters passed to Gorilla. 
This is a key step to be carried out in order to make sure that
Gorilla is an instance of Animal.
In line 36 and 40 super is used as an “object” which
refers to an Animal instance (parent class). The super keyword 
here is used to call the methods of the parent class Animal explicitly.
People familiar with languages like C#, Java, Python can pretty
much relate to how all this works. However, JavaScript was not so simple before ES6 came in, especially for classes. So how did people code without using class syntax, super and extends keywords? Or they never used such concepts before and suddenly decided to add them? Let’s find out!
*/
10
Inheritance In JavaScriptJavascript By Javasper on Jul 6 2022 DonateThankComment
Comment

javascript inheritance

class childClass extends parentClass
{
  
}
Comment

PREVIOUS NEXT
Code Example
Javascript :: faker random from array 
Javascript :: how to clear node modules folder from your computer 
Javascript :: get specific parent element jquery 
Javascript :: create an element jquery 
Javascript :: fetch js 
Javascript :: js stop typing event 
Javascript :: get values inside json node js 
Javascript :: adding background video angular 6 
Javascript :: angular transition animation 
Javascript :: remove repetition multidimensional array javascript 
Javascript :: jquery validation with ajax submit 
Javascript :: vue toggle boolean on click 
Javascript :: send csrf token ajax laravel 
Javascript :: react 18 render 
Javascript :: sum values in array javascript 
Javascript :: nanoid 
Javascript :: javascript get black or white text base on color 
Javascript :: remove element from array lodash 
Javascript :: javascript time script 
Javascript :: getting empty req.body 
Javascript :: java script login system 
Javascript :: Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events 
Javascript :: hammer js cdn 
Javascript :: javascript Convert to Boolean Explicitly 
Javascript :: javascript round off 
Javascript :: hcaptcha bypass 
Javascript :: react hooks componentdidmount 
Javascript :: react conditional array item 
Javascript :: how to get type of variable in javascript 
Javascript :: discord.js embed timestamp 
ADD CONTENT
Topic
Content
Source link
Name
5+8 =