JavaScript Inheritance

What is inheritance in JavaScript?

Inheritance is a fundamental concept in object-oriented programming that allows one class (or object) to inherit properties and methods from another class (or object). In JavaScript, inheritance is primarily achieved through prototypes and the class syntax introduced in ES6.

How does prototype inheritance work in JavaScript?

Prototype inheritance allows objects to inherit properties and methods from other objects via the prototype chain. When trying to access a property or method on an object, JavaScript first checks the object itself and then its prototype, and so on up the chain.

function Animal(name) {
  this.name = name;
}

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

function Dog(name) {
  Animal.call(this, name); // Call the parent constructor
}

// Inherit from Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

const dog = new Dog('Rex');
dog.speak(); // Rex makes a noise.

How do you implement inheritance using the class syntax?

Inheritance can be implemented using the extends keyword in the class syntax. The child class inherits properties and methods from the parent class.

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.

What is the super keyword in JavaScript?

The super keyword is used to call the constructor and methods of a parent class. It must be used in the context of a derived class to access the parent class's properties and methods.

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

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

class Cat extends Animal {
  constructor(name) {
    super(name); // Call the parent class constructor
  }

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

const cat = new Cat('Whiskers');
cat.speak(); // Whiskers meows.

How do you prevent inheritance from the prototype chain?

You can prevent inheritance from the prototype chain by using the Object.create() method with an empty object or setting the prototype to null.

function Dog(name) {
  Animal.call(this, name);
}

// Prevent inheritance from Animal's prototype
Dog.prototype = Object.create(null);

Dog.prototype.speak = function() {
  console.log(`${this.name} barks.`);
};

const dog = new Dog('Rex');
dog.speak(); // TypeError: Cannot read property 'speak' of undefined

Can you demonstrate multiple inheritance in JavaScript?

JavaScript does not support multiple inheritance directly, but you can achieve similar functionality using mixins or composition.

const canFly = {
  fly() {
    console.log(`${this.name} is flying.`);
  }
};

const canSwim = {
  swim() {
    console.log(`${this.name} is swimming.`);
  }
};

function Bird(name) {
  this.name = name;
}

Object.assign(Bird.prototype, canFly);

function Fish(name) {
  this.name = name;
}

Object.assign(Fish.prototype, canSwim);

const parrot = new Bird('Parrot');
parrot.fly(); // Parrot is flying.

const salmon = new Fish('Salmon');
salmon.swim(); // Salmon is swimming.

How does the instanceof operator work in inheritance?

The instanceof operator checks if an object is an instance of a specific class or constructor function. It returns true if the object is found in the prototype chain of the constructor.

const dog = new Dog('Rex');
console.log(dog instanceof Dog); // true
console.log(dog instanceof Animal); // true
console.log(dog instanceof Object); // true

What is method overriding in inheritance?

Method overriding occurs when a subclass provides a specific implementation of a method that is already defined in its parent class. This allows the subclass to customize or extend the behavior of the inherited method.

class Animal {
  speak() {
    console.log('Animal speaks');
  }
}

class Dog extends Animal {
  speak() {
    console.log('Dog barks');
  }
}

const animal = new Animal();
animal.speak(); // Animal speaks

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

What are mixins and how do they relate to inheritance?

Mixins are a way to add functionality from multiple sources to a class. They allow you to create classes that can inherit behaviors from multiple objects without using traditional inheritance.

const canRun = {
  run() {
    console.log(`${this.name} is running.`);
  }
};

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

// Apply mixin
Object.assign(Horse.prototype, canRun);

const myHorse = new Horse('Spirit');
myHorse.run(); // Spirit is running.