JS Inheritance 🎯

Welcome to our deep dive into JavaScript (JS) Inheritance! By the end of this lesson, you'll have a solid understanding of this essential object-oriented programming (OOP) concept. Let's get started! 🚀

What is Inheritance? 📝

Inheritance is a fundamental concept in Object-Oriented Programming (OOP). It allows us to create new objects that reuse, extend, and modify the properties and behaviors of existing objects. Think of it like a blueprint or a template for creating new objects.

Why Use Inheritance? 💡

Inheritance helps us write cleaner, more efficient, and easier-to-maintain code. By creating a parent class that contains properties and methods shared by several related objects, we can avoid redundancy and make our code more modular.

Understanding Classes and Objects 🎯

Before we dive into inheritance, let's quickly review the basics of classes and objects in JavaScript.

Classes

A class is a blueprint for creating objects. It defines the properties and methods that will be shared by all objects created from it.

javascript

// Definition of a Parent Class
class Parent {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(`Hello, I am ${this.name}`);
  }
}

Objects

An object is an instance of a class. It is created by calling the class constructor with specific arguments.

javascript

// Creating an object from the Parent class
const parent1 = new Parent('Alice');

Creating a Child Class 🎯

Now that we understand classes and objects, let's create a child class that inherits from the parent class.

javascript

// Definition of a Child Class that inherits from Parent
class Child extends Parent {
  constructor(name, age) {
    // Call the Parent constructor to set the name property
    super(name);
    this.age = age;
  }

  // Override the sayHi method of the Parent class
  sayHi() {
    console.log(`Hello, I am ${this.name}. I am ${this.age} years old.`);
  }
}

In the above example, Child is a child class that inherits from the Parent class. When we create a new Child object, it will automatically have the name property from the Parent class, and we can add additional properties like age. We also override the sayHi method of the Parent class to output a more specific greeting.

Practical Example 🎯

Let's create a more practical example with a Vehicle parent class and a Car child class.

javascript

// Definition of a Vehicle class
class Vehicle {
  constructor(brand, color) {
    this.brand = brand;
    this.color = color;
  }

  drive() {
    console.log(`Driving a ${this.brand} ${this.color} vehicle.`);
  }
}

// Definition of a Car class that inherits from Vehicle
class Car extends Vehicle {
  constructor(brand, color, numDoors) {
    // Call the Vehicle constructor to set the brand and color properties
    super(brand, color);
    this.numDoors = numDoors;
  }

  openDoors() {
    console.log(`Opening ${this.numDoors} doors of the ${this.brand} ${this.color} car.`);
  }
}

// Creating a Car object
const myCar = new Car('Toyota', 'Red', 4);

// Using the Car object
myCar.drive(); // "Driving a Toyota Red vehicle."
myCar.openDoors(); // "Opening 4 doors of the Toyota Red car."

Quiz 🎯

That's it for our JS Inheritance tutorial! By now, you should have a good understanding of this important OOP concept. Keep practicing and experimenting with inheritance in your JavaScript projects, and you'll soon become a master of this powerful tool. Happy coding! 🤖🎉