With that said, the Introduction to ECMAScript 2015 or popularly known as ES6 brought us classes, which is an emulation of how other programming languages dealt with the application of OOP concepts.
What is prototype-based OOP?
Prototype-based programming is a style of object-oriented programming in which inheritance is implemented via the process of cloning existing objects that serve as prototypes. The question now becomes how do you create new objects with the same properties without classes for Inheritance?.
How It All Connects Together
[[Prototype]] which points to a different object.
This different object is the object prototype.
[[Prototype]]. If after consulting both the object and its
Here is a quick snippet to show what I’m talking about:
To find the
[[Prototype]] of this newly created object, we will use some of the inbuilt object methods.
Our book object can use any property or method that Object has, even though its not a property of the object.book.toString();output => [object Object]
We can perform this known methods and many more on arrays,
because they inherited this properties and methods through their [[Prototype]] linking to the Array.prototype which in turn links back to Object.prototype
Object.prototypeis the base prototype of all the objects
The Concept Of Inheritance
With this found knowledge of prototype and how it works, One would ask, how do I actually make this inheritance thing work with POOP (Prototypal Object-Oriented Programming ) just like Class-based OOP languages do. With this, we first need to understand these keywords and what they do.
constructor, this, new and the Object.create keyword
What do these keywords do.?
constructor function is a function that acts as a blueprint when we need to create objects of the same type, an example of this, is our
new Array() and
new Object(). The
new keyword is used to create new instances based on the constructor function. While
this keyword is a substitute for the new object on the constructor. The value of
this will become the new object when a new object is created, and Object.create Creates a new object, with a specified prototype. For better understanding find the attached links useful
- Understanding this keyword
- Constructors in action
- Inheritance through object.create
Let's go by first building a book constructor/class, Which would be used to add all kinds of book objects to our book library.
Then let’s create our user constructor/class which would be used for creating users signing up to our platform for reading and buying any kind of book.
And lastly, let's make an Admin constructor/class, which would inherit from our User constructor/class above. As we all know, an admin is also a user but a special user with extra privileges.
A visual look at this behind the scenes with all User and Admin inherited methods would be.
From the given diagram, Our User constructor/class is used to construct instances of user with the new keyword, which is then made possible by the this keyword. and lastly, our Admin constructor/class prototype was pointed to User.prototype with the help of Object.create, which made inheritance of User properties and methods possible, this, in turn, made our code reusable without going to rewrite all needed methods for admin when our User class already has those methods. In trying to access any unknown method on an Admin like
Classes are basically, the fundamental building blocks of application design and architecture. which most importantly helps in a large scalable and maintainable codebase. Of course, Bookspy was just an example. In a real-world scenario, it could be anything based on what type of application you’re trying to build. You can find the Bookspy repo here with all methods implemented and test with jest. Also, find the testing article useful if you looking to revisit or learn TDD