Understanding Classes (ES5) and Prototypal Inheritance in JavaScript
Tags: javascript, oops, prototypalinheritance, classes
Published: 2019-08-18 05:53:18

---
title: Understanding Classes (ES5) and Prototypal Inheritance in JavaScript
published: true
description: Constructor Classes and Prototypal Inheritance in JavaScript
tags: javascript, oops, prototypal-inheritance, classes
---


```javascript
function Person(name, age) {
    this.name = name;
    this.age = age;
}

const me = new Person('Joe', 20);

console.log(me); // {name: 'Joe', age: 20}
```
_In a nutshell the above snippet creates a Person class that can have multiple instances. By convention functional classes in javascript start with a capital letter._ 

### Let's dig deeper into what's going on here?? How a normal function can be used for classess?? 🤔🤔

The ``Person`` function is just like any other function which when called directly just returns ``undefined`` as we are not explicitly returning anything from it. But the real magic lies in the ``new`` keyword on line ``var me = new Person('Joe', 20)``.
**Lets understand that magic - There are a couple of steps that happen when we use the ``new`` keyword to initialize a function :**
1. An empty object ``{}`` is created.
2. ``Person`` is called by passing the reference of the object to it: ``Person.call({}, 'Joe', 20)`` 
3. Inside ``Person`` ``this`` now refers to the object passed in the above step.
4. The object's proto is set to the function's prototype using ``{}.__proto__ = Person.prototype.``
5. Finally return the object and that's what we get into ``me``

_Concept Aside_: Every function in javascript has a prototype object available on it. That's how you use ``Array.prototype.map``. And every object has a ``__proto__`` object on it. For further watch this great video [Discovering JavaScript](https://www.youtube.com/watch?v=ZUHyZHwZtUY).

Since the ``prototype`` and ``__proto__`` refer to the same object, whenever you add a new function on the ``prototype`` it becomes available on all instances.
```javascript
Person.prototype.greet = function() {
  console.log('Hi', this.name);
}

me.greet(); // Hi Joe

const you = new Person('Alice', 22);
you.greet(); // Hi Alice
```

So far we undestood how classes are created in javascript. Let's understand how to inherit classes in javascript.

**Let's create a new class called Employee that inherits the Person class**
```javascript
function Employee(name, age, title) {
  Person.call(this, name, age);
  this.title = title;
}

// create Employee prototype from Person prototype
Employee.prototype = Object.create(Person.prototype);

const joe = new Employee('Joe', 22, 'Developer');
console.log(joe.name); // Joe
joe.greet(); // Hi Joe
```

Woah, we have finally inherited our Person class to create an Employee class and we didn't have to rewrite the ``greet`` function.

**Let's see what just happened ??**
1. We created our ``Employee`` class just like we created ``Person`` class.
  * Inside our employee class we are calling the Person class by passing it ``this`` reference. This is just like using ``super`` keyword in ES6 classes.
2. This is the _most important part_. We are recreating the _Employee prototype_ from _Person's prototype_ to get access to all the methods available on the ``Person`` class.

**Now you may ask yourself _Why use ``Object.create`` and not just assign the Person prototype to Employee_.**
This is because we don't want Person and Employee to share the same prototype as objects in javascript are referenced. That's the whole point of inheriting Person.

So that's how we use prototypal inheritance in javascript. The new ES6 classes are basically a syntactic sugar on top of it. Basically this is what actually happens under the hood.

PS: You can find the complete code here [GitHub Repo](https://github.com/vyasriday/js-snippets/blob/master/src/js-concepts/prototypalInheritance.js)