In JavaScript, inheritance is by a prototype object. it calls “Prototypal-based Inheritance”.
In object-oriented programming, inheritance is the mechanism of basing an object or class upon another object (prototype-based inheritance) or class (class-based inheritance), retaining similar implementation.
class Person {
constructor(name, country, language) {
this.name = name;
this.country = country;
this.language = language;
}
speak() {
return this.name + " can speak " + this.language;
}
}
class American extends Person{
constructor (name, country, language, location){
super(name, country, language);
this.location = location;
}
}
const tim = new American("tim", "USA", "english", "North");
console.log(tim.speak());
console.log(tim.location);
console.log(tim.__proto__);
console.log(tim.__proto__.__proto__);
console.log(tim.__proto__.__proto__.__proto__);tim can speak english
North
American {}
Person {}
{}American class is sub class and Person is base class, and sub-class is inherited from the base class’s all the properties and methods.
When we do class American extends Person Class, it means to extend and set the prototype that is __.proto__ to point the Person. So, anytime you create an instance of American like tim and tim can use all the properties and methods in the Person class. However, if you want to get any parameters from based class, you need super keyword. super keyword is used to access and call functions on an object’s parent.
this without super keyword
class American extends Person{
constructor (name, country, language, location){
console.log(this);
super(name, country, language);
this.location = location;
}
}
const tim = new American("tim", "USA", "english", "North");ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor- you will get referenceError withoud super keyword.
this with super keyword
class American extends Person{
constructor (name, country, language, location){
super(name, country, language);
console.log(this);
this.location = location;
console.log(this);
}
}
const tim = new American("tim", "USA", "english", "North");American { name: 'tim', country: 'USA', language: 'english' }
American {
name: 'tim',
country: 'USA',
language: 'english',
location: 'North'
}Sub-class has methods
class Person {
constructor(name, country, language) {
this.name = name;
this.country = country;
this.language = language;
}
speak() {
return this.name + " can speak " + this.language;
}
}
class American extends Person{
constructor (name, country, language, location){
super(name, country, language);
this.location = location;
}
think(){
return "Think by " + this.language;
}
}
const tim = new American("tim", "USA", "english", "North");
console.log(tim.speak());
console.log(tim.think());tim can speak english
Think by englishThis is a way to keep our code nice and organized and using extends class.
Lastly, we look prototype for sub-class
class Person {
constructor(name, country, language) {
this.name = name;
this.country = country;
this.language = language;
}
speak() {
return this.name + " can speak " + this.language;
}
}
class American extends Person{
constructor (name, country, language, location){
super(name, country, language);
this.location = location;
}
think(){
return "Think by " + this.language
}
}
const tim = new American("tim", "USA", "english", "North");
console.log(American.prototype.speak());
console.log(American.prototype.think());
console.log(American.prototype.isPrototypeOf(tim));
console.log(Person.prototype.isPrototypeOf(tim));
console.log(tim instanceof American);
console.log(tim instanceof Person);undefined can speak undefined
Think by undefined
true
true
true
trueThe inheritance which is what we do with the keyword extends is inheriting from a base class or a higher class. Inheritance in JavaScript does not copy our functionality and properties. Instead, it simply links up the prototype chain. So, it is creating an efficient linking in JavaScript using prototypal inheritance. The interesting thing is that language like Java and C++ actually copy objects. when we do like extend instead of what we do with JavaScript which is that we link and the object is referenced there is actually a bit of efficiency there in terms of memory.