JavaScript supports Object Oriented Programming but not in
the same way as other OOP languages(c#, c++, php, Java, etc.) do. The main
difference between JavaScript and the other languages is that, there are no
Classes in JavaScript whereas Classes are very important for creating objects.
However there are ways through which we can simulate the Class concept in
JavaScript.
Another important difference is Data Hiding. There is no
access specifier like (public, private and protected) in JavaScript but we can simulate
the concept using variable scope in functions.
Object Oriented Programming Concepts
- Object
- Class
- Constructor
- Inheritance
- Encapsulation
- Abstraction
- Polymorphism
Preparing the work space
Create a new file "oops.html" and write this code
on it. We will write all our JavaScript code on this file.
<html>
<head>
<title>JavaScript Object Oriented
Programming(OOPs) Tutorial</title>
</head>
<body>
<script type="text/javascript">
//Write your code here.....
</script>
</body>
</html>
1) Object
Any real time entity is considered as an Object. Every
Object will have some properties and functions. For example consider a person
as an object, then he will have properties like name, age, etc., and functions
such as walk, talk, eat, think, etc. now let us see how to create objects in
JavaScript. As mentioned previously there are so many ways to create objects in
JavaScript like:
//1)Creating Object through literal
var obj={};
//2)Creating with Object.create
var obj= Object.create(null);
//3)Creating using new keyword
function Person(){}
var obj=new Person();
We can use any of the above way to create Object.
2) Class
There are no classes in JavaScript as it is Prototype based
language. But we can simulate the class concept using JavaScript functions.
function Person(){
//Properties
this.name="aravind";
this.age="23";
//functions
this.sayHi=function(){
return this.name
+" Says Hi";
}
}
//Creating person instance
var p=new Person();
alert(p.sayHi());
3) Constructor
Actually Constructor is a concept that comes under Classes.
Constructor is used to assign values to the properties of the Class while
creating object using new operator. In above code we have used name and age as
properties for Person class, now we will assign values while creating new
objects for Person class as below.
function Person(name,age){
//Assigning values
through constructor
this.name=name;
this.age=age;
//functions
this.sayHi=function(){
return this.name
+" Says Hi";
}
}
//Creating person instance
var p=new Person("aravind",23);
alert(p.sayHi());
//Creating Second person instance
var p=new Person("jon",23);
alert(p.sayHi());
4) Inheritance
Inheritance is a process of getting the properties and
function of one class to other class. For example let’s consider
"Student" Class, here the Student also has the properties of name and
age which has been used in Person class. So it's much better to acquiring the
properties of the Person instead of re-creating the properties. Now let’s see
how we can do the inheritance concept in JavaScript.
function Student(){}
//1)Prototype based Inhertance
Student.prototype= new Person();
//2)Inhertance throught Object.create
Student.prototype=Object.create(Person);
var stobj=new Student();
alert(stobj.sayHi());
We can do inheritance in above two ways.
5) Encapsulation
Before going on to Encapsulation and Abstraction first we
need to know what Data Hiding is and how can we achieve it in JavaScript. Date
hiding is protecting the data form accessing it outside the scope. For example,
In Person class we have Date of Birth (dob) properties which should be
protected. Let's see how to do it.
function Person(){
//this is private
variable
var dob="8 June
2012";
//public properties
and functions
return{
age:"23",
name:"aravind",
getDob:function(){
return dob;
}
}
}
var pobj=new Person();
//this will get undefined
//because it is private to Person
console.log(pobj.dob);
//Will get dob value we using public
//funtion to get private data
console.log(pobj.getDob());
Wrapping up of public and private data into a single data
unit is called Encapsulation. The above example is the one that best suites
Encapsulation.
6) Abstraction
Abstraction means hiding the inner implementation details
and showing only outer details. To understand Abstraction we need to understand
Abstract and Interface concepts from Java. But we don't have any direct
Abstract or Interface in JS.
Ok! now in-order to understand abstraction in JavaScript
lets take a example form JavaScript library JQuery. In JQuery we will use
$("#ele")
to select select an element with id ele on a web page.
Actually this code calls negative JavaScript code
document.getElementById("ele");
But we don't need to know that we can happy use the $("#ele")
without knowing the inner details of the implementation.
7) Polymorphism
The word Polymorphism in OOPs means having more than one
form. In JavaScript a Object, Property, Method can have more than one form.
Polymorphism is a very cool feature for dynamic binding or late binding.
function Person(){
this.sayHI=function(){}
};
//This will create Student Class
function Student(){};
Student.prototype=new Person();
Student.prototype.sayHI=function(l){
return "Hi! I am
a Student";
}
//This will create Teacher Object
function Teacher(){};
Teacher.prototype=new Person();
Teacher.prototype.sayHI=function(){
return "Hi! I am
a Teacher";
}
var sObj=new Student();
//object is instance of
Person or not
//if not it won't execute
our alert code.
if (sObj instanceof
Person) {
alert("Hurry! JavaScript supports
OOps");
}
JavaScript
supports Object Oriented Programming (OOP) Concepts. But it may not be the
direct way. We need to create some simulation for some concepts.
About the author:
Deepak Shinde is technology lover and is important part of Systems Plus technology Think Tank. He works in systems Plus and actively contributes to technology. He can be contacted at: deepak.shinde@spluspl.com
About the author:
Deepak Shinde is technology lover and is important part of Systems Plus technology Think Tank. He works in systems Plus and actively contributes to technology. He can be contacted at: deepak.shinde@spluspl.com
