In Depth OOP In JavaScript
Understanding Prototypal Inheritance In JavaScript
Let's learn how to do Object Oriented Programming JavaScript. It is not concept of JavaScript. It is paradigm of writing code . It is based on the concept of object. We used objects to model real worlds so Inside objects . There are two things . data and behaviors. The data is called properties and behaviors called methods of object.
The OOP is introduced to organize the code to make it more flexible and easier to maintain the codebase. If you do not maintain and organize the code then It will be totally mess in large codebase. so there are few structure or practice of organizing code. One of the is OOP.
User {
user
password
email
login(password) {
// login logic
}
upoadPhoto() {
// logic
}
Four Pillars of OOP
There are main 4 pillar or concept of oop :
Abstraction : In simple word abstraction means hiding the implementation of logic. example like in DOM there are many selectors given in document object like querySelector, addEventListner, which we can used it instead of knowing its actual implementation . we only need to just used it .It is great way of abstract the some methods from user.
Encapsulation : It is just making some properties and methods private so that They cannot be accessed outside of class.
Inheritance : It is known from itself meaning to make some property and method inherit from parent class. In JavaScript It is done by prototype so that it is called prototypal inherotance.
Polymorphism : It is taken from greek word . Its meaning is many form so The implementation of same methods in different way in different objects
Ways of OOP in JavaScript
In JavaScript there are 3 ways of creating blueprint of object. The blueprint means designing the model of objects, It is not real objects. It is just like map from which any number of real objects can create. so
1 . Constructor function : It is most used way of creating blueprints for object. It is just regular function but it is called by using new operator. The new operator does 4 things .
It create empty object .
It links the empty object with this keyword so that we can create property on object by using this keyword .
It assign the prototype of Object to newly created instance of objects with new keyword.
It implicitly return the objects.
2 . Es6 class : It is just Syntactic sugar of constructor function . In JavaScript The class is not behave as other programming language like Java, C++ . Under the hood it is just wrapper which do the same thing of constructor function . It is just easy to write and cleaner way because we do not have to manually set the prototype in it .
3 . Object.create : It is the way of creating object. It doesnot use any new operator, any prototype object. It is simple way and also easy to understand the way of JavaScript handle the inheritance by prototype. It shows clear picture. we have to set manually which object you want to set as prototype.
Constructor Function
// constructor function
function TataCar(chassisNumber, modelName) {
this.chassisNumber = chassisNumber;
this.modelName = modelName;
this.fuelLevel = 100;
// adding method inside function
// this is bad practice
this.start= function (){
console.log("Engine start")
}
}
const car1 = new TataCar("MH-101", "Nexon");
const car2 = new TataCar("DL-202", "Harrier");
console.log(car1) ;
car1.start() ;
We can add the methods inside the constructor function but it is bad practice because when you create any objects then the method created and copied that much times for object. so It is not good for memory and performance. suppose we have create 1000 objects then there are 1000 copies of that methods . Its make our website slow. so we used prototype for adding methods and also common properties.
Prototype is the object which JavaScript add to all objects which is constructed by constructor function . So any methods or properties which is not own property of object then it search to the prototype and used it .
function TataCar(chassisNumber, modelName) {
this.chassisNumber = chassisNumber;
this.modelName = modelName;
this.fuelLevel = 100;
}
TataCar.prototype.status = function () {
return `Tata \({this.modelName} #\){this.chassisNumber} | Fuel: ${this.fuelLevel}`;
};
const car1 = new TataCar("MH-101", "Nexon");
const car2 = new TataCar("DL-202", "Harrier");
console.log(car1.modelName);
console.log(car2.modelName);
console.log(car1.status());
console.log(car2.status());
Es6 Class
// Es6 class
class Person {
constructor(firstName, email, birthYear) {
this.firstName = firstName;
this.email = email ;
this.birthYear = birthYear ;
}
calcAge() {
return new Date().getFullYear() - this.birthYear ;
}
introduce() {
console.log(`Hi, Myself \({this.firstName} and I am \){this.calcAge()} years old `)
}
}
const shekhar = new Person("Shekhar", "shekhar12@mail.com", 1995) ;
const prahlad = new Person("Prahlad", "prahlad@mail.com", 2004) ;
console.log(shekhar);
// Person {firstName: 'Shekhar', email: 'shekhar12@mail.com'}
console.log(shekhar.email) ;
// shekhar12@mail.com
prahlad.introduce()
// Hi, Myself Prahlad and I am 22 years old
we have to keep following things into mind :
The class is not hoisted even it is wrapper of constructor function.
The code inside class is always executed in strict mode.
Object.create
It is very easy methods to do prototype chain and prototypal inheritance. It helps to set the object as the prototype.
const PersonProto = {
calcAge() {
return new Date().getFullYear() - this.birthYear ;
},
init(firstName, email, birthYear) {
this.firstName = firstName ;
this.email = email ;
this.birthYear = birthYear ;
}
}
const sunita = Object.create(PersonProto) ;
sunita.init("Sunita", "sunita@mail.com", 2000) ;
console.log(sunita) ;
// {firstName: 'Sunita', email: 'sunita@mail.com', birthYear: 2000}
Inheritance by Constructor function
We do inheritance in constructor by setting the prototype by using Object.create. This is shown in below code :
// Inheritance of constructor function
function Person(name,age) {
this.name = name ;
this.age = age ;
}
Person.prototype.introduce = function(){
return `Hello, I am \({this.name} of \){this.age} years old` ;
}
function Student (name,age,course) {
Person.call(this,name,age) ;
this.cource = course;
}
// set Person prototype to Student prototype
Student.prototype = Object.create(Person.prototype) ;
Student.prototype.enrolled = function () {
return `\({this.name} is enrolled in \){this.cource}` ;
}
// to set constructor function to Student
Student.prototype.constructor = Student ;
const dipesh = new Student("Dipesh Tharu", 23,"Cohort2026") ;
console.log(dipesh) ;
// Student {name: 'Dipesh Tharu', age: 23, cource: 'Cohort2026'}
console.log(dipesh.enrolled())
// Dipesh Tharu is enrolled in Cohort2026
console.log(dipesh.introduce())
// Hello, I am Dipesh Tharu of 23 years old
// lets see chain
// dipesh.__proto__ === Student.prototype
console.log(dipesh.__proto__);
// it is Student prototype
// {enrolled: ƒ}
console.log(dipesh.__proto__.__proto__);
// it is Person prototype
// {introduce: ƒ}
console.log(dipesh.__proto__.__proto__.__proto__);
// It is global Object prototype
// {__defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, __lookupSetter__: ƒ, …}
console.log(dipesh.__proto__.__proto__.__proto__.__proto__);
// it is null
// null
Inheritance by Es6 class
It is most easier to implement inheritance by class just by using extends keyword and used super keyword to set prototype of parent class.
// inheritance in class syntax
class Person {
constructor(name,age) {
this.name = name ;
this.age = age;
}
introduce(){
return `Hey,\({this.name} is of \){this.age} years old` ;
}
}
class Student extends Person {
constructor(name,age,course){
super(name,age)
this.course = course ;
}
enrolled(){
return `\({this.name} has enrolled in \){this.course}`
}
}
const mohan = new Student("Mohan" , 20, "Cohort 2026") ;
console.log(mohan.introduce()) ;
console.log(mohan.enrolled()) ;
Summary
This is the way of doing OOP in JavaScript. Class is easier to use but we must know the inheritance done by using prototypal chain and it is called prototypal inheritance.
