It is known to many, that JavaScript is a very handy programming language when it comes to dynamically handing the content and elements of a web client. In addition to the above-mentioned, it also has the ability to support the Object-Orientation (OO). Although, the OO concepts and their implemenations in JavaScript are not as suave or refined as they are in the case of the pure object-oriented langauges like Java and C#. However, its still worth understanding the JavaScript version of OO.
The emphasis of this article is on discussing the concept and implementation of inheritance in Javascript. Lets consider a very simplified and generalised scenario of a base class named Person and a derived class named Student. The following block of code illustrates the underlying concept of inheritance in JavaScript.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> OO-1 in Javascript </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.normal
{
font-size: 11px;
font-family: Verdana;
}
</style>
</HEAD>
<BODY BGCOLOR="#FFFFFF" class="normal">
<script language="javascript">
//------------------------------------------------------------------------------
/*Constructor for the Person class (P.S. This is a very simplified representaion
of a person class, designed primarily for the purpose of understanding the concept of
class and inhertiance in JavaScript.
*/
function Person(name,gender,dateOfBirth)
{
//Initialising the attributes of the Person class
this.name = name;
this.gender = gender;
this.dob = dateOfBirth;
}
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
/*Constructor for the Student class, which has inherited the common attributes
of the Person class (i.e. name, gender and dateOfBirth) and also defined its own attributes
of studId and degree
*/
function Student(name,gender,dateOfBirth,studId,degree)
{
//Setting a reference to the Person class as the base for the Student class
this.base = Person;
//Initialising the base attributes
this.base(name,gender,dateOfBirth);
//Initialising the attributes of the student object
this.studId = studId;
this.degree = degree;
}
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
/*
In the following line of code we have set the reference for the prototype of Stduent class to the
person class. This basically implies that the object(s) that are instantiated for the Student class
can use the methods of its base class (i.e Person)
(P.S. If the following line code is not written immediately after the derived class constructor,then
an exception will be thrown)
*/
Student.prototype = new Person();
//------------------------------------------------------------------------------
//A base class method that displays the basic personal information
Person.prototype.display = function()
{
document.write("{<strong>Name: </strong>" + this.name + ",<strong> Gender: </strong>" + this.gender + ", <strong>Date of Birth: </strong>" + this.dob + "}");
}
//Testing the classes and its members------
var p1 = new Person("Hardika", "Female", "December 12 1984");
p1.display();
document.write("<br>");
var s1 = new Student("Abc","Female","January 15 1985","s001","B.E");
s1.display();
document.write("<br>");
//individually accessing the base class and derived class members-----
document.write("<strong>Student's Degree: </strong>" + s1.degree + ", <strong>Student's Name: </strong>" + s1.name);
</script>
</BODY>
</HTML>
Posts
No comments:
Post a Comment