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
Good work mate!!
ReplyDelete