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.
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 objectPerson.prototype
.
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 ofthis
object get assigned toPerson.prototype
, namelythis.--proto-- = Person.prototype
.- It returns the object created.
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.
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.