ES5 v ES6 Pseudoclassical : Dawn of Inheritance

Hello! It is now week three of my wonderful journey through Operation Spark's immersion program. It has been a very eventful week. Due to COVID-19 we are now having class completely online. That didn't get in the way of us having to learn three different frameworks (BackBone, React, and AngularJS) in one week! Somehow I actually made it through, but it wasn't exactly easy. This has been a difficult transition for me, but it's not without its benefits. I'm now able to complete my project in the comfort of my pajamas! So that's nice. One of the things I learned while in my pajamas was ES6 pseudoclassical instantiation inheritance. I know that's a mouthful, so let's break it down!

So what is Pseudoclassical instantiation? Basically it's an instantiation pattern that allows you to put your function in the prototype of a constructor function. This, in my opinion, makes it better than functional of functional shared instantiation because you don't have to keep rewriting the same functions over and over again when trying to pass them down to a child, you just have to learn the proper way to access them from the parent. The way pseudoclassical instantiation was done in ES5 is considerably different from the new standard, so let's take a look at that first.

Let's take a look at myself:

const Nico = function(){ this.gender = 'male'; this.age = 20; this.height = '6ft 2in'; this.passesVibeCheck = true; }; Nico.prototype.birthday = function(){ this.age++; };

We have a constructor function, appropriately called Nico, and inside of that function we have several variables with attributes I may want to pass down to my children (height, passesVibeCheck, etc). And just outside of that constructor we are placing a function inside the prototype of the constructor function! Whenever we call the birthday function the birthday variable will increment by one.

Now let's look at what happens when I accidentally have a child:

const NicoJr = function(){ Nico.call(this); this.age = 1; this.height = '2ft'; } NicoJr.prototype = Object.create(Nico.prototype); NicoJr.prototype.constructor = NicoJr;

Just like with the parent function, we make a constructor function, and to get all of the variables from the parent we have to use the .call method. This will give us all of the variables with the same variables. But what baby do you know that's 20 years old?? So let's change that. All we have to do is re-declare the variable and it will properly change from its parent's value.

And you may be asking: what about the birthday function? And I'm glad you asked! In order to inherit that function we need to set the constructor function's prototype to calling Object.create on the parent's prototype. We then we need to assign the prototype's constructor to the child's constructor function.

ES6 pseudoclassical inheritance is a little different. Let's take a look at myself like that:

class Nico { constructor(){ this.gender = 'male'; this.age = 20; this.height = '6ft 2in'; this.passesVibeCheck = true; } birthday(){ this.age++ } }

Before we can create our constructor function, we have to create a class, and then inside of that class is where we can create our constructor function. Inside of our function we will do the same thing that we did before, creating our variables and assigning them to the values that we want. Now outside of the constructor but inside of the class is where we will get our method. The biggest difference here is that we will assign the function as a method in the class.

Now let's take a look at my child:

class NicoJr extends Nico{ constructor(){ super(); this.age = 1; this.height = '2ft'; } }

Instead of using .call to inherit properties, we need to create our class and use the extends keyword so we know what the parent class is. Now inside of our constructor we will use the super method, this will give us all of variable that are inside of our parent. If we want to reassign one of those variables we can do it right after calling super. The best part about ES6 is that we don' have to do anything else to inherit the birthday function, it is already inherited!

I understand that some people are too far deep in their ES5 ways, but I promise you that if you make the effort to switch over, it will be well worth it!