Inheritance in JavaScript
Inheritance in JavaScript:
Inheritance in JavaScript is a mechanism that allows one object to inherit properties and behavior from another object. This is achieved through the use of prototypes.
Prototypes
In JavaScript, every object has a prototype, which is another object that serves as a template or a base for the object. When a property or method is accessed on an object, JavaScript first looks for it on the object itself, and if it’s not found, it looks for it on the object’s prototype.
Inheritance Example 1.
// Parent class
function Animal(name) {
this.name = name;
}
Animal.prototype.eat = function() {
console.log(this.name + “ is eating.”);
};
// Child class
function Dog(name, breed) {
Animal.call(this, name);
this.breed = breed;
}
// Inherit from Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
console.log(this.name + “ the “ + this.breed + “ is barking.”);
};
const myDog = new Dog(“Rex”, “Golden Retriever”);
myDog.eat(); // Output: Rex is eating.
myDog.bark(); // Output: Rex the Golden Retriever is barking.
Key Concepts
1. Prototype chain: When an object inherits from another object, it creates a prototype chain. JavaScript traverses this chain to find properties and methods.
2. Constructor function: A constructor function is used to create a new object and set its properties.
3. Inheritance: Inheritance allows an object to inherit properties and behavior from another object.
Modern JavaScript Inheritance
In modern JavaScript, you can use classes and the extends keyword to implement inheritance in a more traditional object-oriented programming style.
Example 2.
class Animal {
constructor(name) {
this.name = name;
}
eat() {
console.log(this.name + “ is eating.”);
}
}
class Dog extends Animal {
Get Vwadia’s stories in your inbox
Join Medium for free to get updates from this writer.
constructor(name, breed) {
super(name);
this.breed = breed;
}
bark() {
console.log(this.name + “ the “ + this.breed + “ is barking.”);
}
}
const myDog = new Dog(“Rex”, “Golden Retriever”);
myDog.eat(); // Output: Rex is eating.
myDog.bark(); // Output: Rex the Golden Retriever is barking.
Inheritance is a powerful tool in JavaScript that allows developers to create complex and reusable code.
Example 3.
class student {
constructor(name, age, course, address, number) {
this.name = name;
this.age = age;
this.course = course;
this.adress = address;
this.number = number;
}
learn() {
console.log(`my name is ${this.name}. I am studying ${this.course}.`);
}
}
const mark = new student(“Mark Maurice”, 28, “javascript”, “refactory”, 75123456789);
console.log(mark);
const john = new student(“Jean”, 14, “python”, “refactory”, 7812345678);
console.log(jean);
console.log(jean.learn())
//inheritance
class scholarship extends student {
constructor(name, age, course, address, number, amount, sponsor) {
ssuper(name, age, course, address, number);
this.amount = amount;
this.sponsor = sponsor;
}
scholarshipInfo() {
return `${this.name} has scholorship of UGX${this.amount}scholarship`;
}
}
const scholar1 = new scholarship(“Anne”, 27, “javascript”, “kampala”, 7483454355, 3000000, “mastercard foundation”);
console.log(scholar1);
