Skip to content

JavaScript class extends | Code

  • by

JavaScript class extends is creating a class that is a child of another(parent) class. Where the child class inherits all the methods from the parent class.

class ChildClass extends ParentClass { 
     /* ... */ 
}

JavaScript class extends

A simple example code creates a class that is a child of another class.

<!DOCTYPE html>
<html>
<body>
  <script>
    class Animal {
      constructor(name) {
        this.speed = 0;
        this.name = name;
      }
      run(speed) {
        this.speed = speed;
        console.log(`${this.name} runs with speed ${this.speed}.`);
      }
      stop() {
        this.speed = 0;
        console.log(`${this.name} stands still.`);
      }
    }

    // Extends class
    class Rabbit extends Animal {
      hide() {
        console.log(`${this.name} hides!`);
      }
    }

    let rabbit = new Rabbit("Tiger");

    rabbit.run(50);
    rabbit.hide(); 
  </script>

</body>
</html> 

Output:

JavaScript class extends

Using extends with built-in class

class DateFormatter extends Date {

  getFormattedDate() {
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    return `${this.getDate()}-${months[this.getMonth()]}-${this.getFullYear()}`;
  }

}

console.log(new DateFormatter('August 19, 1975 23:15:30').getFormattedDate());
// expected output: "19-Aug-1975"

Do comment if you have any doubts or suggestions on this JS class topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Your email address will not be published. Required fields are marked *