|
Object Oriented JavaScript |
|
|
|
|
Most of the developers like to write programming by using Object Oriented Concepts. Because of getting more features like Reusability, Inheritance, Polymorphism.
For Web Development, JavaScript is a handy scripting language. Most of the Object Oriented features can be applied for JavaScript.
But, JavaScript does not formally support class inheritance like conventional OOP languages.
|
- In JavaScript, Classes are function definitions.
- The function keyword is overloaded and serves as both the constructor function for objects as well as identifying procedural function.
1. Empty Class Definition
function SteveClass(){}
2. Object Instantiation
var obj = new SteveClass();
1. procedural function
function getValue(){ return 10; }
2. Function Call.
var CurrentValue = getValue();
|
 top
|
|
Encapsulation
Wrapping up of Data Members and Methods.Encapsulation supports data hiding and the concept of viewing objects as self-contained entities providing services to consumers.
|
|
function SteveClass()
{
var iDeptID = 0;
var sDeptName = "Computer Science";
this.sDeveloper = "Shiny"; // Encapsulation
this.setDept = setDept; // Pass two parameters
this.getDept = getDept;
function setDept(dID, dName)
{
iDeptID = dID;
sDeptName = dName;
}
function getDept()
{
alert("DeptID:" + iDeptID + "\nDeptName:" + sDeptName + "\nDeveloper:" + this.sDeveloper);
}
}
function JSInvoke()
{
var SObj1, SObj2;
SObj1 = new SteveClass();
SObj2 = new SteveClass();
SObj1.setDept(1, ".Net Technologies");
SObj2.setDept(2, ".Net Web Services");
SObj1.getDept();
SObj2.getDept();
}
|
|
|
top
|
|
Inheritence
JavaScript supports inheritance through the use of object prototypes. A
prototype is a template of properties that is shared by all instances of the
object type. Thus instances of object types "inherit" the values of its
prototype property. In JavaScript, all object types have a prototype property
that can be both extended and inherited.
Whatever the functions to be published, should be declared by the current class by using prototype.
So, When we create the object for the Current class, it can be called by using prototype name.
But, if the function is used in derived class, the actual function definition should be mentioned.
|
Dept.prototype.GetDeptInfo = doGetDeptInfo;
Dept.prototype.SetDeptInfo = doSetDeptInfo;
function Dept()
{
this.DeptID = 1;
this.DeptName = "Computer Science";
}
function doGetDeptInfo()
{
alert(this.DeptID + "\n" + this.DeptName);
}
function doSetDeptInfo(dID, dName)
{
this.DeptID = dID;
this.DeptName = dName;
}
Employee.prototype = new Dept();
Employee.prototype.baseclass = Dept.prototype.constructor;
Employee.prototype.constructor = Employee;
Employee.prototype.EmployeeInfo = getEmployeeInfo;
function Employee(EmpID, EmpName, DeptID, DeptName)
{
this.EmployeeID = EmpID;
this.EmployeeName = EmpName;
doSetDeptInfo(DeptID, DeptName); // Calling base class method.
doGetDeptInfo(); // Calling base class method.
}
function getEmployeeInfo()
{
alert("EmployeeID:" + this.EmployeeID + "\nEmployeeName:" + this.EmployeeName);
}
function InheritDemo()
{
var objEmployee = new Employee(8266, "Stephen Raj", 101, "M.S.CyberTech");
objEmployee.EmployeeInfo();
}
|
|
|
top
|
|
Enum usage in Javascript
- Enum can be used in place of the values are defined.
For example, Color combination can be 'Red', 'Green', and 'Blue'. So, we can use it. |
|
function RGB()
{
return RGB;
}
RGB.Red = "R";
RGB.Green = "G";
RGB.Blue = "B";
RGB.All = "A";
function getColorCode(sSelectedValue)
{
var RGBCode;
switch(sSelectedValue)
{
case RGB.Red:
RGBCode = "#ff0000";
break;
case RGB.Green:
RGBCode = "#00ff00";
break;
case RGB.Blue:
RGBCode = "#0000ff";
break;
case RGB.All:
RGBCode = "#ffffff";
default:
RGBCode = "#000000";
}
return RGBCode;
}
|
