Inheritance JavaScript Object-Oriented Programming (OOP)

Edit Copy Hide

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

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

class Dog extends Animal {
  constructor(name) {
    super(name);
  }

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

const dog = new Dog('Blob');
dog.speak(); // Output: Blob how.

In this example, Dog is a subclass that inherits from the Animal superclass. The Dog class extends the Animal class using the extends keyword. It calls the superclass constructor using super(name). The speak method is overridden in the Dog class to provide a specific implementation. The instance of Dog can access both its own methods and the inherited methods from the Animal class.

Edit Copy Hide

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

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

class Dog extends Animal {
  constructor(name) {
    super(name);
  }

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

class Puppy extends Dog {
  constructor(name) {
    super(name);
  }

  speak() {
    console.log(`${this.name} makes cute puppy noises.`);
  }
}

const puppy = new Puppy('Max');
puppy.speak(); // Output: Max makes cute puppy noises.
puppy instanceof Dog; // Output: true
puppy instanceof Animal; // Output: true

In this example, Puppy is a subclass that inherits from the Dog class, which in turn inherits from the Animal superclass. This demonstrates multilevel inheritance. The Puppy class inherits the speak method from both the Dog and Animal classes. An instance of Puppy can access methods from all three classes in the inheritance chain.

Edit Copy Hide

const sayNameMixin = {
  sayName() {
    console.log(`My name is ${this.name}.`);
  }
};

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

Object.assign(Person.prototype, sayNameMixin);

const person = new Person('John');
person.sayName(); // Output: My name is John.

In this example, mixin-based inheritance is used to add additional functionality to a class. The sayNameMixin object contains a sayName method. The Person class does not have the sayName method, but it is added to its prototype using Object.assign(Person.prototype, sayNameMixin). This way, instances of the Person class can access the sayName method as if it were part of the class itself.

Feel free to copy the code and experiment with our javascript compiler

Run