Javascript classes : class, constructor, new, extends, super
Tags: javascript, webdev, vscode, es6
Published: 2020-12-16 14:15:54

ES6 (2015) comes with new js features. One of them is the class keyword. 

We know that javascript is a prototype-based language. That is to say all javascript objects inherit properties and methods from a `prototype` object, for example `Array` objects inherit from `Array.prototype` its properties and methods like `Array.prototype.length` and `Array.prototype.push()`.Besides, `Array.prototype` itself has a reference to `Object.prototype` creating a prototype chain, in other words, `Array` objects has access also to `Object.prototype` methods and properties.And the same is valid for all other javascript objects.
This link between Object and prototype insured through `--proto--` property created by default in every object and has a reference to the prototype.

**NB :** `Object.prototype` is on the top  of the prototype inheritance chain , its `--proto--` has a reference to `NULL` . 

_So, how prototype chaining works with es6 classes?_

To answer this question, we have to understand how this magic word `class` works really under the hood with a concrete example.
# Class & constructor & new
We are going to create a class person with a constructor taking a `name` and `lastName` parameters besides a `sayHello` method.


![Person class](https://dev-to-uploads.s3.amazonaws.com/i/92eufj2a0u8rnj1csnp9.png)

Declaring a class makes a lot of work under the hood thanks to `Class` keyword. 
>* It creates a function as well as an object both called "Person", the Person function has a subtitle `constructor` that gets invoked when we instantiate the class. 
* It adds the `sayHello` method to the prototype property of the Person object `Person.prototype`.
![Class keyword](https://dev-to-uploads.s3.amazonaws.com/i/cpruey42e2ja52sqic5l.JPG)


When class Person is instantiated with "Harry" and "Kane" arguments, they get assigned respectively to `this.name` and `this.lastName`. 

But wait what is `this` here?

When we instantiate a class with the `new` keyword three things happen behind the scene :
>* A new empty object gets created and assigned to `this`. 
* `--proto--`property of `this` object get assigned to `Person.prototype`, namely `this.--proto-- = Person.prototype`.
* It returns the object created.
![New keyword](https://dev-to-uploads.s3.amazonaws.com/i/awi7exq7qk6vqmp14yo8.JPG)

Therefore , `person` will hold an object with two properties: `name`="Harry", `lastName`="Kane" and `person.--proto-- = Person.prototype`.
#Extends & super
Now let's dive deep into this paradigm and create a new class Employee that "inherits" from Person class.  

To do that we use the `extends` keyword as demonstrates the example below. 

![Employee class](https://dev-to-uploads.s3.amazonaws.com/i/rfmtshggiel6ra6n64x9.png)


When we instantiate Employee class the constructor gets invoked with the additional function `super`. 
`super(name,lastName)` is equivalent to `this= new Person(name,lastName)` , excepting, the object created will not be linked to `Person.prototype` but to `Employee.prototype`. In other words, `this.--proto-- = Employee.prototype`.

#Conclusion

**From this example we conclude that Class feature is just a facade to object-oriented languages with a prototypal environment. It is syntactic sugar to prototype nature of javascript.**