Keys to Inheritance in Javascript
Javascript is an Object Oriented Language based on prototypes, not classes like other languages. Javascript has class and prototypal inheritance with differences that are murky at best and defining either requires some defense.
The main focus of this article is to explain some interesting tidbits when using the class keyword to create a blueprint for objects and passing inheritance.
For a better explanation of class and prototypal inheritance, I recommend reading:
Using the class keyword, creates a blueprint to create instances of an object with the properties and method defined within the class. However, the class itself is not an object.
class Hero {
constructor(hero, power, secretPower) {
this.hero = hero;
this.power = power;
this.secretPower = secretPower;
}
give() {
console.log(`${this.hero} gives ${this.secretPower}`);
}
static costume() {
return 'Bat Mask';
}
};Hero.prototype.attack = function () {
console.log(`${this.hero} uses ${this.power}`);
};const batMan = new Hero('Batman', 'Batarangs', 'money');batMan.give(); // Batman gives money
batMan.attack(); // Batman uses BatarangsbatMan.costume(); // undefinedconsole.log(`${batMan.hero} wears a ${Hero.costume()}`);
// Batman wears a Bat Mask
We have created a Hero class with a constructor accepting three parameters and three methods. An instance of Hero has been created using the new keyword to create batMan.
Once an instance has been created and thanks to the constructor, we can call the methods with reference to the instance.
The main focus is the keyword static. Static prevents inheritance to an object instance. batMan.costume() will trigger not a function or an undefined.
In order to call the method, we must reference the class, Hero.costume(). What if we create another class derived from the Hero class?
class CatHero extends Hero {
get who() { console.log(`Who is this cat? "${this.cat()}"`); } cat() { return 'I am ' + this.hero; } give() {
super.give();
console.log(`because I’m ${this.hero}`);
}
}const batCat = new CatHero('BatCat', 'Catarangs', 'no shits');batCat.attack() // BatCat uses Catarangs
console.log(`${batCat.hero} wears a ${CatHero.costume()}`);
// BatCat wears a Bat Mask
Hero has been extended to another class called CatHero. CatHero inherits all the prototypes of the Hero class including the static methods. CatHero.costume() works as intended returning “Bat Mask”.
Static requires knowledge of the class object and not just the instance of the object.
I have applied two other unique keywords to the class CatHero, get and super.
Get converts a method to a property and adds additional use cases.
class CatHero extends Hero {
get who() { console.log(`Who is this cat? "${this.cat()}"`); } cat() { return 'I am ' + this.hero; }
}batCat.who; // I am BatCat
With get, the who function will evaluate anything inside the function before returning, in this case logging to the console. To invoke who(), We only need to run the instance of CatHero with a .who . No parenthesis as it is now evaluated as a property.
The final keyword addressed in this article is super.
Super references the function at the initial class declaration. Let’s see how this is applied.
class Hero {
constructor(hero, power, secretPower) {
this.hero = hero;
this.power = power;
this.secretPower = secretPower;
}
give() {
console.log(`${this.hero} gives ${this.secretPower}`);
}
};class CatHero extends Hero {
give() {
super.give();
console.log(`because I’m ${this.hero}`);
}
}batCat.give(); // BatCat gives no shits because I’m BatCat
In the Hero class, the give function references the hero instance and the hero’s secret power. In CatHero, the give function references Hero’s give function before executing the rest of the function in CatHero.
Super can be useful when extending classes and needing to add additional functionality to an already existing function within the class. Super prevents rewriting code
In Conclusion…
Object Oriented Programming relies heavily on prototypes and passing inheritance is just as important. However, one chooses to handle and create inheritance is preferential.
Here, we addressed some keywords that can be useful in preventing rewrites of code and adding additional functionality. The goal is to provide as many tools as possible to make any programmer become better and more efficient.
No one wants to be grumpy cat…
