Object-Oriented in JavaScript

JavaScript Published on 15 February 2020

As JavaScript is widely used in Web Development, in this article we would explore some of the Object Oriented mechanism supported by JavaScript to get most out of it. Some of the common interview question in JavaScript on OOPS includes,- “How Object-Oriented Programming is implemented in JavaScript? How they differ from other languages? Can you implement Inheritance in JavaScript and so on…”

There are certain features or mechanisms which makes a Language Object Oriented like:

  1. Object
  2. Classes
  3. Encapsulation
  4. Inheritance

Let’s dive into the details of each one of them and see how they are implemented in JavaScript.




  2. Note:A Method in javascript is a property of an object whose value is a function.
  3. Object can be created in two ways in JavaScript:
  4. Using anObject Literal
filter_none

brightness_4
//Defining object
let person = {
first_name:'Mukul',
last_name: 'Latiyan',

//method
getFunction : function(){
return(`The name of the person is 
${person.first_name} ${person.last_name}`)
},
//object within object
phone_number : {
mobile:'12345',
landline:'6789'
}
}
console.log(person.getFunction()); 
console.log(person.phone_number.landline);
  1. Output:
  3. Using anObject Constructor:
filter_none

brightness_4
//using a constructor
functionperson(first_name,last_name){
this.first_name = first_name;
this.last_name = last_name;
}
//creating new instances of person object
let person1 = newperson('Mukul','Latiyan');
let person2 = newperson('Rahul','Avasthi');

console.log(person1.first_name);
console.log(`${person2.first_name} ${person2.last_name}`);
  1. Output:
  3. UsingObject.create() method:The Object.create() method creates a new object, using an existing object as the prototype of the newly created object.
filter_none

brightness_4
// Object.create() example a
// simple object with some properties
const coder = {
isStudying : false,
printIntroduction : function(){
console.log(`My name is ${this.name}. Am I 
studying?: ${this.isStudying}.`)
}
}
// Object.create() method
const me = Object.create(coder);

// "name" is a property set on "me", but not on "coder"
me.name = 'Mukul'; 

// Inherited properties can be overwritten
me.isStudying = 'True'; 

me.printIntroduction(); 
  1. Output:
  3. Classes– Classes areblueprintof an Object. A class can have many Object, because class is atemplatewhile Object areinstancesof the class or the concrete implementation.
  4. Before we move further into implementation, we should know unlike other Object Oriented Language there isno classes in JavaScriptwe have only Object. To be more precise, JavaScript is a prototype based object oriented language, which means it doesn’t have classes rather it define behaviors using constructor function and then reuse it using the prototype.
  5. Note:Even the classes provided by ECMA2015 are objects.
JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript’s existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance.
–Mozilla Developer Network
  1. Example:
  2. Lets use ES6 classes then we will look into traditional way of defining Object and simulate them as classes.
filter_none

brightness_4
// Defining class using es6
class Vehicle {
constructor(name, maker, engine) {
this.name = name;
this.maker = maker;
this.engine = engine;
}
getDetails(){
return(`The name of the bike is ${this.name}.`)
}
}
// Making object with the help of the constructor
let bike1 = newVehicle('Hayabusa', 'Suzuki', '1340cc');
let bike2 = newVehicle('Ninja', 'Kawasaki', '998cc');

console.log(bike1.name);   // Hayabusa
console.log(bike2.maker);  // Kawasaki
console.log(bike1.getDetails());
  1. Output:
  3. Traditional Way.
filter_none

brightness_4
// Defining class in a Traditional Way.
functionVehicle(name,maker,engine){
this.name = name,
this.maker = maker,
this.engine = engine
};

Vehicle.prototype.getDetails = function(){
console.log('The name of the bike is '+ this.name);
}

let bike1 = newVehicle('Hayabusa','Suzuki','1340cc');
let bike2 = newVehicle('Ninja','Kawasaki','998cc');

console.log(bike1.name);
console.log(bike2.maker);
console.log(bike1.getDetails());
  1. Output:
  3. As seen in the above example it is much simpler to define and reuse object in ES6. Hence, we would be using ES6 in all our examples.
  4. Encapsulation– The process ofwrapping property and functionwithin asingle unitis known as encapsulation.
  5. Let’s understand encapsulation with an example.
filter_none

brightness_4
//encapsulation example
class person{
constructor(name,id){
this.name = name;
this.id = id;
}
add_Address(add){
this.add = add;
}
getDetails(){
console.log(`Name is ${this.name},Address is: ${this.add}`);
}
}

let person1 = newperson('Mukul',21);
person1.add_Address('Delhi');
person1.getDetails();
  1. Output:
  3. In the above example we simply create anpersonObject using the constructor and Initialize it property and use it functions we are not bother about the implementation details. We are working with an Objects interface without considering the implementation details.
  4. Sometimes encapsulation refers tohiding of dataordata Abstractionwhich means representing essential features hiding the background detail. Most of the OOP languages provide access modifiers to restrict the scope of a variable, but their are no such access modifiers in JavaScript but their are certain way by which we can restrict the scope of variable within the Class/Object.
  5. Example:
filter_none

brightness_4
// Abstraction example
functionperson(fname,lname){
let firstname = fname;
let lastname = lname;

let getDetails_noaccess = function(){
return(`First name is: ${firstname} Last 
name is: ${lastname}`);
}

this.getDetails_access = function(){
return(`First name is: ${firstname}, Last 
name is: ${lastname}`);
}
}
let person1 = newperson('Mukul','Latiyan');
console.log(person1.firstname);
console.log(person1.getDetails_noaccess);
console.log(person1.getDetails_access());
  1. Output:
  3. In the above example we try to access some property(person1.firstname) and functions(person1.getDetails_noaccess) but it returnsundefinewhile their is a method which we can access from thepersonobject(person1.getDetails_access()), by changing the way to define a function we can restrict its scope.
  4. Inheritance– It is a concept in which some property and methods of an Object is being used by another Object. Unlike most of the OOP languages where classes inherit classes, JavaScript Object inherits Object i.e. certain features (property and methods)of one object can be reused by other Objects.
  5. Lets’s understand inheritance with example:
filter_none

brightness_4
//Inhertiance example
class person{
constructor(name){
this.name = name;
}
//method to return the string
toString(){
return(`Name of person: ${this.name}`);
}
}
class student extends person{
constructor(name,id){
//super keyword to for calling above class constructor
super(name);
this.id = id;
}
toString(){
return(`${super.toString()},Student ID: ${this.id}`);
}
}
let student1 = newstudent('Mukul',22);
console.log(student1.toString());
  1. Output:
  3. In the above example we define anPersonObject with certain property and method and then weinheritthePersonObject in theStudentObject and use all the property and method of person Object as well define certain property and methods forStudent.
  4. Note:The Person and Student object both have same method i.e toString(), this is called asMethod Overriding. Method Overriding allows method in a child class to have the same name and method signature as that of a parent class.
  5. In the above code, super keyword is used to refer immediate parent class instance variable.


Computer Programming Web Development IIT-JEE
Important | 1 Comment
Write a comment...