How to Use Inheritance in JavaScript
Inheritance is a fundamental concept in object-oriented programming (OOP) that allows one class to inherit properties and methods from another class. JavaScript, being an OOP language, supports inheritance through prototypes. This article will guide you on how to use inheritance in JavaScript, including understanding prototypes, creating subclasses, and accessing inherited properties and methods.
Understanding Prototypes
In JavaScript, every object has a prototype. The prototype is an object that serves as a prototype for creating new objects. When you create a new object, it inherits properties and methods from its prototype. If the object does not have a property or method, it will look up the prototype chain until it finds the property or method or reaches the end of the chain.
To access the prototype of an object, you can use the `__proto__` property or the `Object.getPrototypeOf()` method. Here’s an example:
“`javascript
const animal = {
eat() {
console.log(‘Eating…’);
}
};
console.log(animal.eat()); // Eating…
console.log(animal.__proto__); // { eat: [Function: eat] }
console.log(Object.getPrototypeOf(animal)); // { eat: [Function: eat] }
“`
In the example above, the `animal` object inherits the `eat` method from its prototype.
Creating Subclasses
To create a subclass in JavaScript, you can use the `Object.create()` method to create a new object with a specified prototype. This allows you to define a new class by extending an existing class. Here’s an example of creating a `Dog` subclass that inherits from the `Animal` class:
“`javascript
const Animal = {
eat() {
console.log(‘Eating…’);
}
};
const Dog = Object.create(Animal);
Dog.bark = function() {
console.log(‘Barking…’);
};
console.log(Dog.eat()); // Eating…
console.log(Dog.bark()); // Barking…
“`
In the example above, the `Dog` object inherits the `eat` method from the `Animal` object and has its own `bark` method.
Accessing Inherited Properties and Methods
To access inherited properties and methods in a subclass, you can simply call them on the instance of the subclass. If the subclass does not have the property or method, it will look up the prototype chain until it finds the property or method or reaches the end of the chain.
Here’s an example of accessing inherited properties and methods in a subclass:
“`javascript
const Cat = Object.create(Animal);
Cat.meow = function() {
console.log(‘Meowing…’);
};
console.log(Cat.eat()); // Eating…
console.log(Cat.meow()); // Meowing…
console.log(Cat.sleep()); // undefined
console.log(Cat.__proto__.sleep()); // Eating…
“`
In the example above, the `Cat` object inherits the `eat` method from the `Animal` object and has its own `meow` method. When trying to access the `sleep` method, it is not defined in the `Cat` object, so it looks up the prototype chain and finds the `eat` method in the `Animal` object.
Conclusion
Inheritance is a powerful concept in JavaScript that allows you to create subclasses and reuse code. By understanding prototypes and using the `Object.create()` method, you can easily create and extend classes in your JavaScript applications. By following the examples and techniques outlined in this article, you’ll be well on your way to mastering inheritance in JavaScript.
