"extends" keyword in JavaScript?

Front End Technology Javascript Object Oriented Programming

In JavaScript, you may extend both classes and objects with the extends keyword. It is frequently used to build classes that are children of other classes. In addition to built-in objects, customized classes can also be subclass using the extends keyword.

The classes serve as the blueprint for a real-world item so that we may easily change, access, and utilise them in programming. It is specified to establish an abstract data type to hold a specific sort of information together with the methods for manipulating that information. You use the extends keyword to use class inheritance.

Any constructor with the prototype property, or one that could be invoked using new, can be a candidate for the parent class.

Syntax

class childclass extends parentclass {...}
class parentclass extends in-built object {...}

Example 1

In the example below, the Jungle class inherits all of the extAnimal class's methods and properties. The animalSize() function and name attribute will therefore be added to the Jungle class.

After that, we created a wildAnimal object and used it to access the animalSize() method of the Jungle class.


<!DOCTYPE html>
<html>
<title>"extends" keyword in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      class extAnimal {
         constructor(name) {
            this.name = name;
         }
         animalSize() {
            document.write(`Elephant is bigger ${this.name}`);
         }
      }
      class Jungle extends extAnimal {
      }
      let wildAnimal = new Jungle('than Tiger');
      wildAnimal.animalSize();
   </script>
</body>
</html>

Example 2

In this example let us understand how the super keyword, which is utilised inside a child class to indicate its parent class.

You can see here 'super' inside the 'Jungle' class is a subclass of 'Animal'. Because of this, whenever the constructor of the 'Jungle' class is invoked, it also invokes the constructor of the 'Animal' class, which gives it a name attribute.


<!DOCTYPE html>
<html>
<title>"extends" keyword in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      class Animal {
         constructor(name) {
            this.name = name;
         }
         clawSize() {
            document.write(`Bear has ${this.name}`);
         }
      } 
      class Jungle extends Animal {
         constructor(name) {
            document.write("Created jungle as class"+"<br>");
            super(name);
         }
      }
      let wildAnimal = new Jungle('long claws');
      wildAnimal.clawSize();
   </script>
</body>
</html>

Example 3

In this example let us understand the Overriding Method or Property. The method and property of the child class will be used if it matches the same name with a parent class' method or property. This technique is called method overriding.

The parent 'Animal’ class as well as the child ‘Jungle’ class both have the ‘behaviour’ property and the overrideMethod() function in this scenario. In context of this, the overrideMethod() function and the ‘behaviour’ property are overridden by the ‘Jungle’ class.


<!DOCTYPE html>
<html>
<title>"extends" keyword in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      class Animal {
         constructor(name) {
            this.name = name;
            this.behavior = "aggressive";
         }
         overrideMethod() {
            document.write();(`Hello ${this.name}.`);
         }
      }
      class Jungle extends Animal {
         constructor(name) {
            super(name);
            this.behavior = 'Wild';
         }
         overrideMethod() {
            document.write(`Loins are very ${this.name}.`);
            document.write('behavior: ' + this.behavior);
         }
      }
      let y = new Jungle('Aggressive'+'<br>');
      y.overrideMethod();
   </script>
</body>
</html>

Example 4

In this example let us understand how super keyword can also be used to call the parent class's static methods.


<!DOCTYPE html>
<html>
<title>"extends" keyword in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      class Animal {
         constructor() {}
         static getAge() {
            return 'I have 4 puppies';
         }
      }
      class Jungle extends Animal {
         constructor() {
            super()
         }
         static getAge() {
            return super.getAge() + ' that are all of same age';
         }
      }
      document.write(Jungle.getAge())
   </script>
</body>
</html>

In Brief

Using inheritance in ES6 requires the use of the extends keyword. A base class or parent class is the type of class that will be extended. The subclass, also known as the child class, is the class which extends the base class or parent class.

To call the parent class's constructor, call the super(arguments) method in the child class' constructor.

To invoke methods from the parent class within methods of the child class, just use super keyword.