Prototypal inheritance - A Trip back in time
Tags: javascript, prototypes, beginners, tutorial
Published: 2019-08-17 09:42:55

---
title: Prototypal inheritance - A Trip back in time
published: true
description: getting a clearer understanding of how es6 classes work behind the scene
tags: javascript, prototypes, beginners, tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/iiv5mrnn17v30l5hgtrs.png
---

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.

   ```javascript
   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

   ```javascript
   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

   ```javascript
   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

   ```javascript
   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:

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