Javascript in 100 bits

Course by zooboole,

Last Updated on 2025-01-28 08:04:00

Lesson 22 - JavaScript Class Inheritance

Inheritance allows one class to inherit properties and methods from another class. This helps in reusing code and creating hierarchical relationships between objects.

Explanation

  • The extends keyword is used to inherit from another class.
  • The super keyword calls the parent class's constructor.
  • The child class can override or add new methods.

Example 1: Basic Inheritance

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

    speak() {
        return `${this.name} makes a sound.`;
    }
}

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

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

const myDog = new Dog("Buddy", "Golden Retriever");
console.log(myDog.speak());
// Output: Buddy barks.

Example 2: Extending Inheritance Further

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    introduce() {
        return `Hi, I'm ${this.name} and I'm ${this.age} years old.`;
    }
}

class Student extends Person {
    constructor(name, age, grade) {
        super(name, age);
        this.grade = grade;
    }

    introduce() {
        return `${super.introduce()} I study in grade ${this.grade}.`;
    }
}

const student1 = new Student("Alice", 16, 10);
console.log(student1.introduce());
// Output: Hi, I'm Alice and I'm 16 years old. I study in grade 10.

Try Your Hand

Follow these steps to create your own class inheritance!

Steps:

  1. Create a File:

    • Name it Lesson22-inheritance.html.

  2. Write the Code:

    • Copy the following code:
    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Lesson 22 - Class Inheritance</title>
</head>
<body>
   <script>
       class Vehicle {
           constructor(type, wheels) {
               this.type = type;
               this.wheels = wheels;
           }

           describe() {
               return `This is a ${this.type} with ${this.wheels} wheels.`;
           }
       }

       class Bike extends Vehicle {
           constructor(brand) {
               super("Bike", 2);
               this.brand = brand;
           }

           describe() {
               return `${super.describe()} It is made by ${this.brand}.`;
           }
       }

       const myBike = new Bike("Yamaha");
       console.log(myBike.describe());
   </script>
</body>
</html>

  3. Save the File:

    • Save it in your project folder.

  4. Preview the File:

    • Open it in your browser and check the console for output.

Experiment

Try modifying the class:

  1. Add a Car class that inherits from Vehicle: 

    class Car extends Vehicle {
   constructor(brand, doors) {
       super("Car", 4);
       this.brand = brand;
       this.doors = doors;
   }

   describe() {
       return `${super.describe()} It is a ${this.brand} with ${this.doors} doors.`;
   }
}

const myCar = new Car("Tesla", 4);
console.log(myCar.describe());

  2. Modify Student to have a new study() method: 

    class Student extends Person {
   constructor(name, age, grade) {
       super(name, age);
       this.grade = grade;
   }

   study() {
       return `${this.name} is studying in grade ${this.grade}.`;
   }
}

const student2 = new Student("Bob", 15, 9);
console.log(student2.study()); // Output: Bob is studying in grade 9.

Key Takeaways

  • Use extends to make a class inherit from another class.
  • Use super() to call the parent’s constructor.
  • Child classes can override or extend methods.
  • Inheritance promotes code reuse and organization.