Understanding the Difference between Classical and Prototypal Inheritance in JavaScript

Inheritance is a major concept in object-oriented programming, and JavaScript is no exception. Classical inheritance models have been used in many popular programming languages, such as Java and C++, while prototypal inheritance is a newer and more versatile model that is native to JavaScript. In this tutorial, we’ll discuss the differences between classical and prototypal inheritance, and how to use each of them in JavaScript.

What is Classical Inheritance?

Classical inheritance, also known as class-based or traditional inheritance, is a programming model based on classes and objects. In this model, classes are used to define the structure of objects, and objects are then instantiated from classes. Classes can also have methods that are shared by all objects of the same class, and can be extended to create new classes. This model is popular in languages like Java and C++.

What is Prototypal Inheritance?

Prototypal inheritance, also known as prototype-based inheritance, is an object-oriented programming model based on prototypes. In this model, objects are used to define the structure of new objects, and these objects can be extended to create new objects. This model is native to JavaScript and is more flexible than classical inheritance.

Differences Between Classical and Prototypal Inheritance

The main difference between classical and prototypal inheritance is in how objects are created. In classical inheritance, objects are created from classes, while in prototypal inheritance, objects are created from objects. Additionally, classical inheritance is more rigid and structured, while prototypal inheritance is more flexible and dynamic. Finally, classical inheritance is more commonly found in languages like Java and C++, while prototypal inheritance is native to JavaScript.

How to Use Classical Inheritance in JavaScript

Classical inheritance can be implemented in JavaScript using the class and extends keywords. The class keyword is used to define a class and its methods, while the extends keyword is used to create a subclass from an existing class. Here’s an example of how to define a class in JavaScript:

[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”]

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} says hello!`);
  }
}

[/dm_code_snippet]

This defines an Animal class with a constructor and a speak method. To create a subclass of this class, we can use the extends 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”]

class Dog extends Animal {
  constructor(name) {
    super(name);
  }
  bark() {
    console.log(`${this.name} says Woof!`);
  }
}

[/dm_code_snippet]

This defines a Dog subclass of the Animal class. It has its own constructor and a bark method. To instantiate an instance of the Dog class, we can use the new 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”]

const myDog = new Dog('Fido');
myDog.bark(); // Fido says Woof!

[/dm_code_snippet]

How to Use Prototypal Inheritance in JavaScript

Prototypal inheritance can be implemented in JavaScript using the Object.create() method. This method creates a new object with the specified prototype object and properties. Here’s an example of how to use it:

[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”]

const animal = {
  speak() {
    console.log(`${this.name} says hello!`);
  }
};

const dog = Object.create(animal, {
  name: {
    value: 'Fido'
  },
  bark() {
    console.log(`${this.name} says Woof!`);
  }
});

dog.bark(); // Fido says Woof!

[/dm_code_snippet]

In this example, we create an animal object with a speak method. We then use the Object.create() method to create a new dog object with the animal object as its prototype. Finally, we add a name property and a bark method to the dog object.

Conclusion

In this tutorial, we discussed the differences between classical and prototypal inheritance, and how to use each of them in JavaScript. Classical inheritance is more rigid and structured, while prototypal inheritance is more flexible and dynamic. In classical inheritance, objects are created from classes, while in prototypal inheritance, objects are created from objects. We also saw how to use the class and extends keywords to implement classical inheritance, and how to use the Object.create() method to implement prototypal inheritance.