JavaScript Inheritance
JavaScript inheritance is the method through which the objects inherit the properties and the methods from the other objects. It enables code reuse and structuring of relationships between objects, creating a hierarchy where a child object can access features of its parent object. Inheritance in JavaScript can be achieved in the following ways:
Table of Content
- Prototypal Inheritance
- Classical Inheritance
- Functional Inheritance
Prototypal Inheritance
Objects inherit from other objects through their prototypes. Each object has a prototype, properties, and methods inherited from that prototype. The methods through which prototypal inheritance is achieved in JavaScript are as follows.
Example: The below code example demonstrates Inheritance and method overriding in JavaScript.
Javascript
function Animal(name) { this .name = name; } Animal.prototype.sound = function () { console.log( "Some generic sound" ); }; function Dog(name, breed) { Animal.call( this , name); this .breed = breed; } Dog.prototype = Object.create(Animal.prototype); Dog.prototype.constructor = Dog; Dog.prototype.sound = function () { console.log( "Woof! Woof!" ); }; const myDog = new Dog( "Buddy" , "Labrador" ); myDog.sound(); // Outputs: Woof! Woof! |
Woof! Woof!
Classical Inheritance
Introduced in ECMAScript6 (ES6) with the class keyword. Uses a class-based approach similar to other programming languages like Java or C++. Following are the methods through which class-based inheritance is achieved in JavaScript:
Inheritance using extend keyword
JavaScript ES6 classes support the extended keyword to perform class inheritance.
Example: Demonstrating class inheritance and method overloading in JavaScript.
Javascript
class automobile { constructor(name, cc) { this .name = name; this .cc = cc; } engine() { console.log(`${ this .name} has ${ this .cc} engine`); } } class car extends automobile { engine() { console.log( this .name, "has " , this .cc, "cc engine" ); } } let carz = new car( 'Rex' , "1149" ); carz.engine(); |
Rex has 1149 cc engine
Inheritance using the super keyword
Super keyword is used in classes to call the properties and methods of the parent class.
Example: Using super keyword for method invocation and inheritance in JavaScript.
Javascript
// Inheritance using super keyword in JS class Automobile { constructor(name) { this .name = name; } engine() { console.log( this .name, "has " , this .cc, "cc engine" ); } } class Car extends Automobile { constructor(name, cc) { super (name); // Additional properties for // the Car class this .cc = cc; } engine() { // the 'engine' method of the parent // class using 'super' super .engine(); console.log( this .name, "has " , this .cc, "cc engine" ); } } let carz = new Car( 'Rexton' , '1500' ); carz.engine(); |
Rexton has 1500 cc engine Rexton has 1500 cc engine
Inheritance in static members
Static members belong to their own class and not to their instances because inheritance also applies to the static members of the class.
Example: Demonstrating the inheritance in static members in JavaScript.
Javascript
// Inheritance in static members class Automobile { static staticMethod() { return 'Automobile static method' ; } } class car extends Automobile { static staticMethod() { return 'Car static method' ; } } console.log(Automobile.staticMethod()); console.log(car.staticMethod()); |
Automobile static method Car static method
Functional Inheritance
Objects inherit properties and methods from other objects through function constructors. It uses functions to create objects and establish relationships between them. The methods through which functional inheritance is achieved in JavaScript are as follows:
Constructor overriding
In JavaScript, when we want to extend a class we might want to override the constructor using the super keyword which invokes the parent constructor.
Example: Demonstrating inheritance and method overriding in the JavaScript classes.
Javascript
function Animal(name) { const obj = {}; obj.name = name; obj.sound = function () { console.log( "Some generic sound" ); }; return obj; } function Dog(name, breed) { const obj = Animal(name); obj.breed = breed; obj.sound = function () { console.log( "Woof! Woof!" ); }; return obj; } const myDog = Dog( "Buddy" , "Labrador" ); myDog.sound(); // Outputs: Woof! Woof! |
Woof! Woof!
Inheritance from Built-in data types
One can extend the functionality of the built-in JavaScript types like “Array”, and “Error” to create custom classes.
Example: myArr subclass extending the built-in array class in JavaScript.
Javascript
class myArr extends Array { isEmpty() { return this .length > 0; } } let arr = new myArr(10, 20, 30); console.log(arr.isEmpty()); |
true
Contact Us