Before classes became a thing in JavaScript, prototypes were the oop way of doing things in javascript. This seemed to scare some folks away from javascript, while some totally ignored it.
Currently, folks picking up javascript today avoid prototyping by all means. It would be good, if everyone who learned Javascript during the era of es6 understood what happens behind the scene when we use classes, class Inheritance and the super() keyword in javascript.
To get started with this tutorial, we would first have to revisit the basic concepts we learned starting off, one of which is objects
.
Objects are key/value pairs. The most common way to create an object is with curly braces {} and you add properties and methods to an object using dot notation. In order to effectively learn about prototypes in JavaScript, we’re going to channel our minds back to objects
and how they are used.
ProtoType:
The Prototype is the mechanism by which all JavaScript objects inherit from one another.
function Person(attributes) {
this.age = attributes.age;
this.name = attributes.name;
this.occupation = attributes.occupation;
}
Given the constructor function person, we would want to introduce a speak property using Person.prototype
Person.prototype.speak = function () {
return `Hello, my name is ${this.name}`;
};
Now that we have added the speak
property to the Person
constructor, it now completely owns it and can pass it down to each instance of Person
, without having to create a new property on any objects.
Inheritance using prototypes:
Let's look at how inheritance works in JavaScript using prototypes. We create a Child
constructor
function Child(childAttributes) {
Person.call(this, childAttributes);
this.isChild = childAttributes.isChild; // this will be a special attribute to Child
}
By writing the line of code, Person.call(this, childAttributes)
, we are binding this
to Person
, and this is what makes sure that the Child
constructor inherits the properties of the Person
constructor, this really cool process has been abstracted away by the super
keyword in Es6
.
One problem still exists, our Inheritance isn't complete yet, because the Child
constructor isn't aware of the Person prototype yet. We would have to manually tell Child
about Person
using Object.create()
.
Child.prototype = Object.create(Person.prototype);
If we would love to add more properties, and we want them to be particular to the Child
constructor, we can do so by
Child.prototype.cry = function () {
return `Baby crying...`;
};
We now have linked the Person
prototype with the Child
prototype. Eventually, we’ll get this linking for free with the class keyword, but seeing Object.create()
is really good because it demonstrates how the class
keyword works under the hood.
Now that we have created a Child constructor, let's introduce Ben to the family:
const ben = new Child({
age: NaN,
name: Ben Halpern,
occupation: Comedian
});
It's good to note we are using the prototype’s inheritance from the Child
constructor to access our Person
properties. Now we can call ben.speak() and see what happens.
Hello, my name is Ben Halpern
We just used inheritance from the Person
prototype to use ben.speak. Take a moment to reflect on that! and if you have any questions and feedback, please leave a note on the comments.
Cheers 🥂🎉🎉🎉
Top comments (0)