Object Oriented Programming (OOPs) in JavaScript
In this post basically I am trying to use Object Oriented Programming (OOPs) concept in JavaScript. Normally we tend to write just simple functions in JavaScript file, by this we are doing Procedural Programming. In this post I incorporated following OOPs concepts:
Object, Class, Inheritance, Encapsulation, Property, Polymorphism (Override).
Following is the sample code of JavaScript file (codes are self-explanatory with adequate comments):
//Class diagram --- Employee class inherits Person class and
// Person class itself contains Academic class.
//
// Person ---> Academic
// ^
// /|\
// |
// |
// Employee
//OOPS features ---
//Object, Class, Inheritance, Encapsulation, Property, Polymorphism (Override).
//==============================================================================//
//==============================================================================//
//Global functions, just like a Utility library.
//Function to display Academic's data.
Function.prototype.DisplayAcademic = function(paramAcademic)
{
alert("In DisplayAcademic -> " + "Degree :: " + paramAcademic.degree
+ ", Year :: " + paramAcademic.year + ", College :: "
+ paramAcademic.college + ", Percentage :: " + paramAcademic.percentage);
}
//Function to display Person's data.
Function.prototype.DisplayPerson = function(paramPerson)
{
alert("In DisplayPerson -> " + "Name :: " + paramPerson.name
+ ", Age :: " + paramPerson.age
+ ", Gender :: " + paramPerson.gender);
//Function call to display Academic's data.
Function.prototype.DisplayAcademic(paramPerson.GetAcademic());
}
//==============================================================================//
//==============================================================================//
//Person class definition.
function Person(paramName, paramAge, paramGender)
{
//Person class variable.
this.name = paramName;
this.age = paramAge;
this.gender = paramGender;
//Get/Set property of Person class.
var academic;
this.GetAcademic = function(){return academic;}
this.SetAcademic = function(paramAcademic){academic = paramAcademic;}
//Function to display Person's data.
this.display = function(objectEmployee)
{
Function.prototype.DisplayPerson(objectEmployee);
}
}
//Academic class definition.
function Academic(paramDegree, paramYear, paramCollege, paramPercentage)
{
//Academic class variables.
this.degree = paramDegree;
this.year = paramYear;
this.college = paramCollege;
this.percentage = paramPercentage;
}
//Employee class definition.
function Employee(paramCompany, paramExperience)
{
//Employee class variables.
this.company = paramCompany;
this.experience = paramExperience;
/*
//User inputs
var degree = prompt("Degree", "Please enter your degree.");
var year = prompt("Year", "Please enter your passing year.");
var college = prompt("College", "Please enter your college.");
var percentage = prompt("Percentage", "Please enter your percentage.");
*/
//Call to set the academic property in Person class.
//this.SetAcademic(new Academic(degree, year, college, percentage));
this.SetAcademic(new Academic("M.C.A", 2005, "D.D.U", 67.00));
//Function to display Employee class data.
this.displayEmployee = function()
{
alert("In Employee -> " + "Company :: " + this.company
+ ", Experience :: " + this.experience);
this.display(this);
}
//To override base class function, just keep the function name same.
//In above function, if we change the function name from 'displayEmployee'
//to 'display', then always child class function gets called.
}
//==============================================================================//
//==============================================================================//
//Page load function.
function load()
{
/*
//User inputs.
var name = prompt("Name", "Please enter your name.");
var age = prompt("Age", "Please enter your age.");
var gender = prompt("Gender", "Please enter your gender.");
var companyName = prompt("Company Name", "Please enter your company name.");
var experience = prompt("Experience", "Please enter your total experience.");
*/
//Create a Employee class instance.
//var avin = new Employee(companyName, experience, name, age, gender);
//Set the base (Person) class.
Employee.prototype = new Person("Avi", 28, "M");
var avin = new Employee("PSL", 4.00);
alert("Is Employee Object is instance of Employee class? "
+ (avin instanceof Employee)
+ "\nIs Employee Object is instance of Person class? "
+ (avin instanceof Person));
if(confirm("Do you want to display Employee data?"))
{
//Call to display Employee's data.
avin.displayEmployee();
//Direct base (Person) class function call.
avin.display(avin);
}
}
Following is the sample HTML file to test the above JavaScript file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OOPs in JavaScript</title>
<script src="OOPsInJavaScript.js" type="text/javascript"></script>
</head>
<body onload="javascript:load();">
OOPs in JavaScript sample.
</body>
</html>
Following image displays Employee's class object:
Following image displays Academic's class object:
Please feel free to write if I miss something or to improve the post.
References:
The JavaScript Object Model
Object Oriented Programming in JavaScript
_525_526_513.gif)
Posts
