Implementing Inheritance in JavaScript using Prototypes

Inheritance is an important concept in object-oriented programming (OOP). It allows you to define a hierarchy of classes or objects that share common characteristics and behaviors. JavaScript supports inheritance natively through its prototypal inheritance model. In this tutorial, we will discuss how to implement inheritance in JavaScript using prototypes.

What is Prototypal Inheritance?

Prototypal inheritance is a type of inheritance where objects inherit the properties and methods of another object. In JavaScript, an object’s prototype is an object from which the object inherits methods and properties. Every object in JavaScript has a prototype, and you can access the prototype of an object using the prototype keyword.

For example, let’s say we have an object called car. We can access the prototype of the object using the prototype keyword:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let car = {
  make: 'Honda',
  model: 'Civic',
  year: 2020
};

console.log(car.prototype);  // Object {...}

[/dm_code_snippet]

The prototype of the car object is an object that contains methods and properties that can be inherited by the car object. We can use the prototype object to add new methods and properties to the car object.

For example, let’s say we want to add a new method to the car object called drive. We can do this by adding a new method to the prototype of the car object:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

car.prototype.drive = function() {
  console.log('Vroom!');
};

car.drive();  // Vroom!

[/dm_code_snippet]

Now the car object has a new method called drive. This is how we can use the prototype object to add new methods and properties to an object.

Inheriting from a Prototype

Now that we know how to use the prototype object to add new methods and properties to an object, let’s discuss how we can use it to implement inheritance. To do this, we will use the Object.create() method.

The Object.create() method takes an object as an argument and creates a new object with the prototype of the object passed in as an argument. This means that the new object will inherit the methods and properties of the object passed in as an argument.

For example, let’s say we have a car object with a drive method:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let car = {
  make: 'Honda',
  model: 'Civic',
  year: 2020,
  drive: function() {
    console.log('Vroom!');
  }
};

[/dm_code_snippet]

Now, let’s say we want to create a new object called electricCar that inherits from the car object. We can do this using the Object.create() method:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let electricCar = Object.create(car);

electricCar.drive();  // Vroom!

[/dm_code_snippet]

The electricCar object now has the drive method inherited from the car object. We can use the Object.create() method to create objects that inherit from other objects.

Overriding Inherited Methods

In some cases, we may want to override an inherited method. For example, let’s say we want to override the drive method of the electricCar object so that it prints out a different message. We can do this by defining a new drive method in the electricCar object:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

electricCar.drive = function() {
  console.log('Zoom!');
};

electricCar.drive();  // Zoom!

[/dm_code_snippet]

The electricCar object now has its own drive method that overrides the inherited drive method from the car object. This is how we can override inherited methods.

Conclusion

In this tutorial, we discussed how to implement inheritance in JavaScript using prototypes. We discussed what prototypal inheritance is and how to use the prototype object to add new methods and properties to an object. We also discussed how to use the Object.create() method to create objects that inherit from other objects, as well as how to override inherited methods.

Inheritance is an important concept in object-oriented programming and can be used to create powerful and flexible applications. We hope this tutorial has helped you understand how to use prototypal inheritance in JavaScript.