Prototypal inheritance - A Trip back in time

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 🥂🎉🎉🎉