CodeGym /Java Course /Frontend SELF EN /Class Inheritance

Class Inheritance

Frontend SELF EN
Level 40 , Lesson 0
Available

7.1 Basics of Inheritance

Class inheritance in JavaScript lets you create new classes based on existing ones, reusing and extending their functionality. It's a key aspect of object-oriented programming (OOP) that allows the creation of class hierarchies and management of object behaviors.

The keyword extends is used for class inheritance. The class that inherits another class is called the derived class (subclass), and the class from which it inherits is called the base class (superclass).

Example:

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

        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      }

      class Dog extends Animal {
        speak() {
          console.log(`${this.name} barks.`);
        }
      }

      const dog = new Dog('Rex');
      dog.speak(); // "Rex barks."
    
  

Explanation:

  • The Animal class is a base class with a constructor and a speak() method.
  • The Dog class inherits from Animal and overrides the speak() method.
  • The dog instance of the Dog class uses the overridden speak() method.

7.2 The super Keyword

The super keyword is used to call the constructor or methods of the base class from the derived class.

1. Calling the Base Class Constructor

The derived class must call the base class constructor using super() before using this.

Example:

The Dog constructor calls super(name) to initialize the name property of the base Animal class.

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

        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      }

      class Dog extends Animal {
        constructor(name, breed) {
          super(name);
          this.breed = breed;
        }

        speak() {
          console.log(`${this.name} barks.`);
        }
      }

      const dog = new Dog('Rex', 'Labrador');
      console.log(dog.name); // "Rex"
      console.log(dog.breed); // "Labrador"
      dog.speak(); // "Rex barks."
    
  

2. Calling Base Class Methods

Base class methods can be called from the derived class using super.

Example:

The speak() method of the Dog class calls the speak() method of the base Animal class using super.speak(), then adds its own logic.

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

        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      }

      class Dog extends Animal {
        speak() {
          super.speak(); // Call the base class method
          console.log(`${this.name} barks.`);
        }
      }

      const dog = new Dog('Rex');
      dog.speak();

      // "Rex makes a noise."
      // "Rex barks."
    
  

7.3 Inheritance and Method Overriding

Inheritance lets derived classes override methods of the base class. This allows for altering or extending the functionality of the methods.

Example:

The speak() method of the Dog class overrides the speak() method of the base Animal class, providing its own implementation.

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

        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      }

      class Dog extends Animal {
        speak() {
          console.log(`${this.name} barks.`);
        }
      }

      const animal = new Animal('Generic Animal');
      animal.speak(); // "Generic Animal makes a noise."

      const dog = new Dog('Rex');
      dog.speak(); // "Rex barks."
    
  

7.4 Inheritance and Additional Methods

A derived class can add new methods that do not exist in the base class.

Example:

The Dog class adds a new fetch() method, which does not exist in the base Animal class.

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

        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      }

      class Dog extends Animal {
        speak() {
          console.log(`${this.name} barks.`);
        }

        fetch() {
          console.log(`${this.name} is fetching.`);
        }
      }

      const dog = new Dog('Rex');
      dog.speak(); // "Rex barks."
      dog.fetch(); // "Rex is fetching."
    
  

7.5 Checking Inheritance

To check inheritance, you can use the instanceof operator and the isPrototypeOf() method.

Example:

The instanceof operator checks if an object is an instance of a class. The isPrototypeOf() method checks if an object's prototype is in the prototype chain of another object.

JavaScript
    
      console.log(dog instanceof Dog); // true
      console.log(dog instanceof Animal); // true
      console.log(Animal.prototype.isPrototypeOf(Dog.prototype)); // true
    
  
1
Task
Frontend SELF EN, level 40, lesson 0
Locked
Inheritance with super
Inheritance with super
1
Task
Frontend SELF EN, level 40, lesson 0
Locked
Method hunt in Predator
Method hunt in Predator
Comments
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION