ES6 Standard introduces classes in JavaScript, also this provides great new features which are useful for object-oriented programming.
Basic Syntax of Class
In JavaScript, the class is similar to a function. Like the function keyword, here it will be declared with the class keyword. In ES5, initialize a function using a new keyword but not with ES6 functions, the class can initialize with a new keyword.
new Employee() used to create an object for the class
constructor() will call automatically by invoking of new Employee(), so that we can initialize the object.
Instance method call Code Pen
The instance method is a method that requires an object of its class to be created before it can be called. In the below example creating the object for employee class, using the employee object to call the class methods.
In the example above, new Student() initialize the constructor with the argument “Thomas” and then accessing the class methods using the created object.
Static method call Code Pen
The methods can be called without creating an object, instead, it should call with the class name. For that, the method declaration must have a static modifier.
In the example above, the method profileData is having a static modifier of class Employee, so it called using the class name instead of an instance object.
Inheritance Concept Code Pen
Before we go to the concept just to know, what is a subclass? A subclass is a class that derives from another class. A subclass inherits state and behavior from all of its ancestors. The keyword extends is used to derive the subclass from the parent.
eg). class Rectangle extends Shape{}
Inheritance can be defined as the process where subclasses able to access the properties (methods and fields) of the parent class.
In a child class constructor, this cannot be used until super is called.
Use this.parent method() to access the parent method from the child class
Note: this keyword differs from Normal Functions vs Arrow Functions. In this example arrow functions are used, so the parent method from the child class using this.parent method(). In case if you are using ES5 functions, then super.parent method() used to call the parent method from the child.
Polymorphism Code Pen
It refers to one name having many forms of an object behavior depending on situations, and it can perform in method overriding and Method overloading.
Method overriding is nothing but the same method with the same signature in both parent and child classes.
In this example below, the Child class overrides the method findArea() from a parent with the same signature(function name and the parameters).
Method overloading is nothing but the same method name with different parameters in the same class.
Note: JavaScript not supported Method overloading
In the example below, the find Area () method tried to overload with the same method name with a different set of parameters, in such case JavaScript always takes the last defined function. Here we don’t have a height parameter, so the output is NAN, so it won’t support Method overloading
Hope it will give a clear view of Class, Inheritance & Polymorphism concepts. Please write your questions for any doubts or corrections.
Let’s discuss the next feature of ES6 in the next story.
Next topic: “this” object in ES5 vs ES6