Wednesday, April 16, 2014

OOP in Javascript

In this post we are going to discuss the object oriented side of Javascript and how it is different from the traditional OOP approach.

Class
Javascript is prototype based language and it doesn’t contain any class keyword to demonstrate the concept of Class. However in Javascript the concept of class can be easily demonstrated by using Functions. Defining a class is as simple as defining a function in Javascript.
Example
Function Employee ( ) { };
 
Object
To create the instance of a class (function) declared we can use “new” operator.
Example
function Employee(){ };

var emp1  = new Employee();
var emp2  = new Employee();
 
Constructor
In Javascript there is no need to explicitly define constructor method. Everything inside the function gets executed at the time of instantiation. In Javascript we have constructor as a property which return a reference to the object function that created the instance's prototype
Example
function Employee(){
    console.log("Employee instantiated");
};
var emp1  = new Employee();
// In the console Employee instantiated will be printed.
 
Property
Variables declared inside class is a property. Each instance of the class will have those properties.
Inside class(function) property is accessed by using “this” keyword and outside the class it can be used by instanceName.propertyName.
Example
function Employee(name){
    this.name = name;
};
var emp1  = new Employee("Ankit");
console.log("The Employee Name Is : " + emp1.name);
//This will print The Employee Name Is : Ankit in console
 
Methods
Methods are like properties except however they are functions and defined as functions.
Example
function Employee(name ){ 
        this.name = name;              
        this.getName = function(){
               return this.name;
        };
};

var emp1  = new Employee("Ankit");

console.log("The Employee Name Is : " + emp1.getName());
//This will print The Employee Name Is : Ankit in console
 
Prototype
Every function has a prototype property and it contains an object. We can add methods and properties to this empty object.
Example
function Employee(name ){ 
        this.name = name;              
};

Employee.prototype.getName = function getName(){
               return this.name;
    };

var emp1  = new Employee("Ankit");

console.log("The Employee Name Is : " + emp1.getName());
//This will print The Employee Name Is : Ankit in console
 
Inheritance
Javascript supports single class inheritance by using prototype property.
Example
function Employee(){
    this.getEmpId = function(){
            console.log("Fetching emp id");
    };
};

function Manager(){
    this.getManagerId = function(){
        console.log("Fetching Manger id");
    };
}
Manager.prototype = new Employee();// Inheritance
var manager = new Manager();
manager.getEmpId();// Fetching emp id
manager.getManagerId();//Fetching Manger id
 
Overriding
Example
function Employee(){
    this.getName = function(){
            console.log("Calling getName of Employee class");
    };
};

function Manager(){
    this. getName = function(){
        console.log("Calling getName of Manager class");
    };
}
Manager.prototype = new Employee();// Inheritance
var manager = new Manager();
manager.getName();// Calling getName of Manager class is printed

1 comment:

  1. How to get getName of Employee class in case of overriding

    Thanks...

    ReplyDelete