The main idea in object oriented programming is organising our code by breaking things into objects. Doing so will help us with better maintainability, scalability, reusability etc. When we discuss object oriented programming, first thing to pop up would be the 4 pillars of oops, namely inheritance, abstraction, encapsulation and polymorphism. If we are relating those concepts to an abstract keyword or access specifiers like public or private, as it is available in java or C #, we can’t find those in javascript. But there are ways in which these concepts can be implemented in javascript. May be we can try explaining these concepts using typescript in another article, but for now it is javascript.
We need to understand that javascript is different, as we discussed in the prototype article. The whole concept of inheritance in javascript is based on prototype. In this article we are going to discuss ways and means by which we can create objects in javascript. In the process we will discuss, factory functions, constructor functions, javascript classes and how to extend classes. So let’s get started.
For an example, we will use the context of an Employee of a company and paying the employee. That will be a change from the usual vehicle, car, animal examples to explain the object oriented concept.
First we will see how to create objects using factory functions.
Here we will write a function which acts as an object creation factory, thus the name factory functions. Since we want make employee objects to align with our example of paying employees in a company. Let’s name our factory function as makeEmployee.
We are declaring an empty object inside our factory function and adding properties and methods to it before returning it.
We can make as many objects as we want using this factory function. e1 is one such employee objects that we created using our factory function.
If we see the object created, it will have the properties and methods as defined in the factory function, added to it. But those are not added to the __proto__ property.
What that means is, the computePay method on different employee objects created are not the same, computePay on each object even if, having same functionality are different copies of same method. But if we check a standard object like a string, methods available are the same across different string instances.
The triple equals checks if the methods are same. String objects gets its properties and methods through prototypes, so they are referring to same methods, whereas in our case each objects have different methods attached to it.
That leads us to constructor functions. Like what you see on the screen we create a function and instantiate it with new operator.
Please note the value of this, if used without new operator, value of this would be window. But with new operator it points to the object.
See the computePay method, though it is available to the object. It is not added to the __proto__ property.
To make it available to the __proto__ property, we will have to remove it from the function and add it to prototype object of employee.
Now the object will have the method, but more importantly it is available through the prototype, which avoids the creation of separate method for each object created.
One thing to note here would be not use arrow functions, as it will have a window as the value for this.
So, the constructor function and adding methods to the prototype does the trick. But it looks bit clumsy in terms of code readability. But javascript provides us with some syntactical sugar, which means under the hood the same thing happens, but we can write and represent that with a more cleaner, readable syntax.
So for this, we add a class, then adds a constructor which runs immediately on instantiation of the object. Then we add the properties with this keyword. In a class, we will add the method directly into the class, the syntax is almost like a function without the keyword function.
We create the objects with the new operator as we did with constructor functions. The method compute pay is available to the object through the __proto__ property(Like it is in pic4).
Now inheritance, we can have a contractor class extend the employee class. We can override the compute pay method. If there are any additional parameters to be passed to the constructor that can be accommodated. All the parameters shared with the parent constructor can be sent to parent constructor using super.
When we create objects from contractor class, it can have a diffrent implementation of computePay, as we did in the class definition. An object created with employee class will have the original computePay implementation. And also see the prototype of the contractor object it will be employee object as expected.
That covers the basics of object oriented concepts in javascript and the role of prototypal inheritance in it.