#TECH

Basic Concepts of Object Oriented Programming Implemented in JavaScript

Javascript, every web developer knows about it. In today’s world, it is common programming language used among every web application. But how many of us know that it is object oriented also. Yes, Javascript is object oriented but it is Prototype based object oriented.

Prototype based programming is an OOP model that does not use classes. Instead it first accomplish its behavior using constructor functions and then reuse it using prototype property.

Prototype is a special property of functions which can store complete objects.

Almost every feature of object oriented programming is supported by JavaScript. Now let us see what all are the features and how they are supported by javascript.

Namespace:

Namespace is a container which  bundle up functionality under a unique name. In JavaScript a namespace is just another object containing methods, properties, and objects. It helps to group specific functionality together. Moreover it reduces the chances of name conflicts.

For creating a namespace, just create a global object and place all properties and method in that object.

Source

var myNamespace = {};

It will create a namespace with name myNamespace. Now we can add properties and method in this namespace just like we do in objects.

Object :

In javascript, there is no class but everything is object except few primitive types. Even functions are also objects. Like variables, functions can be assigned to variables, can be deleted at runtime. Moreover, like every object functions also have a property – constructor which stores the name of the constructor. And as we all know constructor is only for objects, so functions are also objects.

Source

function displayText(){
    console.log("This is a function");
}

console.log("Function displayText's constructor :" + displayText.constructor);

Output 

Function displayText’s constructor :function Function() {
[native code]
}

So from above code we can see that function’s constructor is Function.

Encapsulation:

As we know, encapsulation is wrapping up of data and functions that operate on data together as one unit. In OOJS also, objects have data i.e. properties and methods together.

Source

var myObject = {
  name : "Kimmi",
  
  getName :function(){
    console.log("Name :" + this.name);
  }
}

myObject.getName();

 

Output
Name :Kimmi

Constructor Function: As there are no classes, so question comes that how can we create object. So answer is “Constructor Functions”. Constructor functions are functions which create object and initialise it. Syntax to create object is :

function <class_name>(){

     property1 : value1,

     property2 : value2,

     method1 :method,

. . .

}

var <object_name> = new <class_name>();

Source

function Employee(profile) {
        this.profile = profile;
        this.write = function () {
            console.log("My profile is " + this.profile);
        };
    }
   
var emp = new Employee("Sofware Engineer");
emp.write();

 

Output

My profile is Software Engineer

In above code Employee is a constructor function which has properties and methods. When object is created using new, Employee constructor is invoked and property naming profile is initialised in it. By using constructor functions we can create multiple objects with same property as we do using classes in other programming languages.

Inheritance:

Inheritance is implemented using Prototype property of functions.

Source

function Employee(profile) {
        this.profile = profile;
        this.write = function () {
            console.log("My profile is " + this.profile);
        };
    }
   
Employee.Prototype = {
  salary : "$20,000",
  getSalary : function(){
    console.log("Salary :"+ salary);
  }
}

console.log(Employee.Prototype);

 

Output

Here, I set Employee’s prototype to an object which contains a property salary and a method getSalary().

By using this property, inheritance can be implemented in OOJS. So when we call any function of object, firstly own methods of the objects are checked. If that method exist in own property then its good, otherwise that property or method is looked in the Prototype’s method and then prototype’s prototype property and so on until the parent class is checked i.e. Object class.

Source

function Person() {
  this.name = "Kimmi";
  this.toString = function () {
    console.log("My name is " + this.name);
  };
  this.write = function () {
    console.log("Hello from Person");
  };
}


function Employee(profile) {
  this.profile = profile;
  this.write = function () {
    console.log("My profile is " + this.profile);
  };
}
Employee.prototype = new Person();
Employee.prototype.constructor = Employee;

var emp = new Employee("QA");
emp.write();

Output
My profile is QA

So, in above code Person is the parent object and Employee is the child object. Person object is assigned in the prototype property of Employee. So object created using Employee constructor has all the properties of Person also.

Overriding :

Overriding can also be implemented in OOJS using prototype property. For that, if we have method in parent constructor function and have method with same name and signature in child constructor function then the child object’s function is invoked.

Source

function Person() {
  this.name = "Kimmi";
  this.toString = function () {
    console.log("My name is " + this.name);
  };
  this.write = function () {
    console.log("Hello from Person");
  };
}


function Employee(profile) {
  this.profile = profile;
  this.toString = function () {
    console.log("My profile is " + this.profile);
  };
}
Employee.prototype = new Person();
Employee.prototype.constructor = Employee;

var emp = new Employee("QA");
emp.toString();

Output
My profile is QA

So, in above example, both Person and Employee have method with same signature i.e. toString. But when that method is invoked, Employee’s toString method is invoked because of overriding.

So these are the basic concepts of Object Oriented Programming which can be implemented in Javascript. I hope this blog will help you in understanding Object oriented concepts of javascript.

You might also like