Search
 
SCRIPT & CODE EXAMPLE
 

JAVASCRIPT

extends 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

extends 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

extends in js

The extends keyword is used to create a child class of another class (parent). 
The child class inherits all the methods from another class. Inheritance is 
useful for code reusability: reuse properties and methods of an existing class 
when you create a new class.
Comment

PREVIOUS NEXT
Code Example
Javascript :: reactjs join two array 
Javascript :: javascript remove all element in array 
Javascript :: javascript array.find 
Javascript :: generate apk debug react native 
Javascript :: fetch method in javascript 
Javascript :: text.toUpperCase is not a function 
Javascript :: remove special characters in javascript 
Javascript :: mongodb mongoose aggregate two collections using lookup & format the result set. 
Javascript :: getfullyear javascript 
Javascript :: filter repetition multidimensional array javascript 
Javascript :: mysql json_array_append 
Javascript :: new Date() get speicifc hours min sec 
Javascript :: getmilliseconds javascript 
Javascript :: regex all 
Javascript :: node get package.json version 
Javascript :: clear interval js 
Javascript :: console log return from async 
Javascript :: react date format 
Javascript :: how to loop trough an object java script 
Javascript :: Could not find a production build in the 
Javascript :: regex email 
Javascript :: infinite scroll jquery 
Javascript :: hammer js 
Javascript :: js show element with focus 
Javascript :: js if else statement one line 
Javascript :: js indexof second occurrence 
Javascript :: javascript is url 
Javascript :: how to add d3.js in angular 
Javascript :: adding all elements of an array javascript 
Javascript :: JS two numbers in array whose sum equals a given number 
ADD CONTENT
Topic
Content
Source link
Name
2+5 =