Basics of OOPS Concept in JavaScript

Javascript is one of the most popular programming language that is used to create interactive effects with web browsers. Like .net, java, php, c++ etc javascript is also a Object Oriented Programming Language but it does not supports OOPS in same way as all other languages does.
For eg. In javascript there is no classes but there’s a way in javascript through which we use classes concept.

In this article, I am going to discuss few features that OOPS offers in javascript.
1. Objects
2. Class
3. Property
4. Method
5. Constructor
6. Inheritance
7. Encapsulation
8. Abstraction
9. Polymorphism

1. Objects:
Objects are the instance of the class. Objects will have some properties contained in it as well as some functions.
In javascript object can be declared in different ways.
For eg:

a) Using new Keyword
Like in other programming language we can create an object of a class using new keyword. For eg:
var obj = new object();

b) Using Object.create
var obj = Object.create(object);

c) Using Literals
var obj= {};

2) Class:
Class concept in javascript is different from any other OOP language. In Javascript a function is a class. As javascript is a prototype based language so it has no class statement. For eg:

function Student(){
this.Name = 'Himanshu';
this.Age = 25;

this.studying = function(){
alert('I am studying');
}
}

This is the definition of class in JS. Here Student is a class and studying is a function.
To call this class we need to make object of class.
var objStud = new Student();

3) Property:
Property shows characteristics of an object. For eg. In above example Name and Age are proprties of Student class.

4) Method:
A method is the capability of object. A function associated with a class is a method.

5) Constructor:
Constructor is a method which is called during the instantiation of the object. It has the same name as that of class. Here, we can assign initial values to the properties associated with the class. For eg.

function Student(name, age){
this.Name = name;
this.Age = age;

this.studying = function(){
alert('I am studying');
}
}

var objStud = new Student('Himanshu', 25);

6) Inheritance:
Inheriting the feature of one class to another class is called inheritance. The class whose features are inherited is called parent class and to whom features are inherited is called child class.
Suppose we need to inherit Student class features to another class called Employee then we can write

function Employee(){}

Employee.prototype = new Student();
or
Employee.prototype = Object.create(Student);

var objEmp = new Employee();
alert(obj.studying);

7) Encapsulation:
Encapsulation is the feature of wrapping up private and public data into single unit. In other word wrapping everything in a single unit is called Encasulation. For eg:

function Student(){
var studentId = '1033'; // this is private variable

return{ // public properties and function
name: 'Himanshu',
age: 25
getId: function(){
return studentId;
}
}
}

8) Abstraction:
Abstraction is the concept of data hiding i.e. hiding the inner detail(implementation details) from the user and showing only the outer details.
For an eg. if we need to get element in javascript by id than we need to write document.getElementById(‘elementName’) and same can be achieved in jQuery with just $(‘#elementName’). So we don’t know what’s going behind $(‘#elementName’) and we are happy using $(‘#elementName’) without knowing inner details.

9) Polymorphism:
Polymorphism means having more than one form. For eg a property, method, object in js can have more than one form. Let illustrate this using an example.

function Student(){
this.studying = function(){}
}

function Employee(){
Employee.prototype = Object.create(Student);
Employee.prototype.studying = function(){
alert('I am employee');
}
}

function Boss(){
Boss.prototype = Object.create(Student);
Boss.prototype.studying = function(){
alert('I am Boss');
}
}

var objEmp = new Employee();
objEmp.studying();
var objBoss = new Boss();
objBoss.studying();

So these are some cool features in Object Oriented Javascript.

We will go into depth of all features in my next article. 🙂

Written By : Himanshu Dora, Software Engineer, Mindfire Solutions

Advertisements

Posted on September 24, 2014, in Javascript and tagged , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: