Introduction to Inheritance and Prototypal Inheritance in JavaScript
Inheritance is one of the key concepts of Object-Oriented Programming (OOP). It is a mechanism that allows one object to acquire the properties of another object. JavaScript supports various types of inheritance which include classical inheritance and prototypal inheritance. In this tutorial, we will focus on the concept of prototypal inheritance in JavaScript.
What is Inheritance?
Inheritance is a relationship between two objects where one object (the child) acquires the properties of another object (the parent). It allows us to create relationships between objects and reuse code, making it easier to develop and maintain our applications. In JavaScript, inheritance is implemented using prototype-based inheritance.
What is Prototype-Based Inheritance?
Prototype-based inheritance is a type of inheritance where objects can inherit the properties and methods of other objects. It is based on the concept of prototypal objects, which are objects that serve as templates or prototypes for other objects. Each object has a prototype, which is an object from which it inherits properties. The prototype can itself have a prototype, and so on, forming a prototype chain. This chain of prototypes is traversed when a property or method is accessed, allowing us to access properties and methods from multiple objects.
How Does Prototype-Based Inheritance Work?
In JavaScript, all objects have a prototype property which is a reference to another object. When a property or method is accessed on an object, the JavaScript engine will first check if the property or method exists on that object. If it does not, the engine will traverse up the prototype chain to the object’s prototype, and so on, until it finds the property or method or reaches the end of the chain. This is how JavaScript implements inheritance.
Example of Prototype-Based Inheritance
Let’s say we have an object called Car which represents a car. We want to create another object called Tesla which represents a Tesla car. We can do this using prototype-based inheritance by creating the Tesla object and setting its prototype property to 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”]
let Car = {
type: 'sedan',
wheels: 4
};
let Tesla = {
model: 'Model S'
};
Tesla.prototype = Car;
[/dm_code_snippet]
Now the Tesla object has access to the properties and methods of the Car object. For example, we can access the type property of the Car object from the Tesla 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”]
console.log(Tesla.type); // output: sedan
[/dm_code_snippet]
Conclusion
In this tutorial, we learned about inheritance and prototypal inheritance in JavaScript. We saw how prototype-based inheritance works and how to implement it using the prototype property. We also saw a simple example of how to create a child object and set its prototype property to an existing parent object.
Inheritance is a powerful concept that can help us simplify our code and make it easier to work with. It is an essential part of Object-Oriented Programming, and understanding it is key to becoming a proficient JavaScript developer.
