JavaScript, a language that runs in any modern browser and is pivotal in creating interactive elements on web pages, often surprises developers with its unique object-oriented features. Instead of classical inheritance as seen in languages like Java or C++, JavaScript uses prototype-based inheritance. However, with the advent of ECMAScript 6 (ES6), developers can create inheritance-like structures using classes, an abstraction that wraps JavaScript's prototyping easily.
Understanding JavaScript Classes
The class keyword in JavaScript functions as a syntactic sugar over its existing prototype-based inheritance. Though it doesn't introduce a new object-oriented model, it makes it easier to extend classes, instantiate classes, and encapsulate behaviour.
class Animal {
constructor(name) {
this.name = name;
}
makeSound() {
console.log(`${this.name} makes a sound.`);
}
}
In the example above, we define an Animal class with a constructor and a method makeSound. From this class, we can inherit by extending it.
Extension of Classes
JavaScript classes can be extended to create new classes with additional properties or methods. This feature mimics classical inheritance but is built on JavaScript object prototypes.
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
makeSound() {
console.log(`${this.name} barks.`);
}
}
const myDog = new Dog('Rex', 'German Shepherd');
myDog.makeSound(); // Rex barks.
In the code above, the Dog class inherits from the Animal class using the extends keyword. The super function is used inside the constructor of the derived class to call the constructor of the base class.
Mixins for Multidirectional Inheritance
In cases where you want to add multiple behaviours from different sources, JavaScript doesn’t support multiple inheritance. However, we can achieve similar patterns using a technique known as mixins.
function deviceMixin(target) {
target.prototype.turnOn = function() {
console.log(`${this.name} turns on.`);
};
}
class Phone extends Animal {
constructor(name, brand) {
super(name);
this.brand = brand;
}
}
deviceMixin(Phone);
const myiPhone = new Phone('iPhone', 'Apple');
myiPhone.turnOn(); // iPhone turns on.
The deviceMixin is a function that augments the Phone class with additional functionality. This avoids the pitfalls of multiple inheritance while affording flexibility.
Polymorphism in JavaScript Classes
Polymorphism allows a method to perform different functions based on the object that it is operating on. This is a crucial concept in object-oriented programming which you can implement using JavaScript classes.
class Bird extends Animal {
makeSound() {
console.log(`${this.name} chirps.`);
}
}
const myPetBird = new Bird('Tweety');
const animals = [myDog, myPetBird];
animals.forEach(animal => animal.makeSound());
// Output:
// Rex barks.
// Tweety chirps.
Conclusion
While JavaScript might not follow the conventional class-based approach for inheritance seen in more structured object-oriented languages, the ES6 syntax provides an intuitive way to use inheritance-like structure with classes. Utilizing classes, extensions, and mixins aligns with modern developer practices, allowing you to manage your code with a clean syntax and predictable behaviour. Remember, the elegance of JavaScript inheritance doesn't come from its similarity to other languages but from its powerful and flexible prototypal roots.
