This is the third article in a series about prototypal inheritance in JavaScript. Have a look at the first article about Inheritance in JavaScript.
The prototype chain is the way inheritance in JavaScript is achieved. There are three common ways to create a prototype chain:
- functional
- constructor functions
- class-syntax constructors (this article)
This article will cover the class-syntax approach on creating prototype chains.
Prototypal Inheritance (Class-Syntax Constructors)
JavaScript got a class
keyword with ECMAScript2015 or ES6. This is not the same as a class keyword in a classical OOP language, JavaScript remains dynamic and loosely typed.
The class keyword is syntactic sugar that actually creates a function , it creates a Constructor Function. Don't believe me? 😀 Let's log the typeof of a class.
class test {}
console.log(typeof test);
// The result will be function
The class syntax does significantly reduce boilerplate when creating a prototype chain.
Let's have a look at some code. For the example code, we will use the animal
and dog
taxonomy, where animal is a prototype of dog.
class Animal {
constructor(name) {
this.name = name;
}
eat() {
console.log(this.name + ' eats');
}
}
class Dog extends Animal {
constructor(name) {
super(name + ' the dog');
}
bark() {
console.log(this.name + ' barks');
}
}
const henry = new Dog('Henry');
henry.eat(); // prints "Henry the dog eats"
henry.bark(); // prints "Hentry the dog barks"
The code above results in the exact prototype chain as in the functional approach or constructor approach.
console.log(Object.getPrototypeOf(henry) === Dog.prototype); //Will be true
console.log(
Object.getPrototypeOf(Dog.prototype) === Animal.prototype,
); //Will be true
To describe the full prototype chain:
- the prototype of Henry is Dog.prototype
- the prototype of Dog.prototype is Animal.prototype
- the prototype of Animal.prototype is Object.prototype.
The extends
keyword makes prototypal inheritance a lot simpler. In the example code, class Dog extends Animal
will ensure that the prototype of Dog.prototype
will be Animal.prototype
. The constructor
method in each class is the equivalent to the function body of a Constructor Function. The super
keyword in the Dog class constructor method is a generic way to call the parent class constructor, while setting the this
keyword to the current instance (Animal.call(this, name + ' the dog')
is equivalent to super(name + ' the dog')
). Any methods other than the constructor, are added to the prototype object of the function that the class syntax creates.
Let's remove the syntactic sugar.
class Animal {
constructor(name) {
this.name = name;
}
eat() {
console.log(this.name + ' eats');
}
}
// remove syntactic sugar
function Animal(name) {
this.name = name;
}
Animal.prototype.eat = function() {
console.log(this.name + ' eats');
};
The class-syntax is the preferred way to create a prototype chain in JavaScript at the time of writing this article.
TL;DR
- Inheritance in JavaScript is achieved with a chain of prototypes
- There are three common ways to create a prototype chain (functional, constructor functions, class-syntax constructors)
- The
class-syntax
is syntactic sugar and creates a constructor function. - The
class-syntax
reduces boilerplate code and is the preferred way of creating prototype chains.
Thanks for reading and if you have any questions , use the comment function or send me a message @mariokandut.
If you want to know more about Javascript , have a look at these Javascript Tutorials.
Top comments (0)