How to call base class methods in JavaScript (with the help of "prototype")

by Jagadish Pulakhandam on 9/25/2012 3:42:54 PM
Rated 0 from 0 votes
Brief: Demonstrates on calling base class (function constructor) methods in JavaScript using "prototype"
Posted to: Advanced JavaScript Programming/Development tutorials/videos- Object Oriented Programming
Add to DiggAdd to del.icio.usAdd to FURLAdd to RedditAdd to YahooAdd to BlinklistAdd to GoogleAdd to ma.gnoliaAdd to ShadowsAdd to Technorati

Attached source code/video demonstrates the following:
  • How to implement inheritance between two simple classes (function constructors) using "prototype" in JavaScript
  • How to call or execute methods in base class from a child instance using "prototype"

Source Code:

01.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
03.<html>
04.<head>
05.    <title></title>
06.    <script type="text/javascript">
07.        //DEMO: Calling base methods from child methods (using prototype)
08. 
09.        //create parent class
10.        var Person = function (vId, vName, vSal) {
11.            this.Id = vId;
12.            this.Name = vName;
13.            this.Sal = vSal;
14.        };
15. 
16.        Person.prototype.Display = function () {
17.            alert("Id=" + this.Id.toString() +
18.                    ", Name=" + this.Name);
19.        }
20. 
21.        Person.prototype.DisplayAnnSal = function () {
22.            alert("Annual Sal=" + (this.Sal * 12).toString());
23.        }
24. 
25.        //create new class
26.        var Emp = function (vId, vName, vSal, vOfficeMail) {
27.            if (arguments.length < 4) return;
28.            Person.call(this, vId, vName, vSal)
29.            this.OfficeEmail = vOfficeMail;
30.            //this.DisplayAnnSal(); //calls with no probs.
31.        };
32. 
33.        //make Emp class as a child of Person class
34.        Emp.prototype = new Person();
35.        Emp.prototype.constructor = Emp;
36.        Emp.prototype.parent = Person.prototype; //assigning Person prototype to a new property "parent"
37. 
38.        //overriding method
39.        Emp.prototype.Display = function () {
40.            //this.Display(); //recursion - infinite loop
41.            this.parent.Display.call(this); //calls parent method "Display" first
42.            alert("Id=" + this.Id.toString() +
43.                    ", Name=" + this.Name +
44.                    ", OfficeMail=" + this.OfficeEmail);
45.        }
46. 
47.        //create instance of child class
48.        var oEmp = new Emp(1001, "Jag", 5400, "a@a.com"); //using Child's constructor
49.        //call display method in child class
50.        oEmp.Display(); //which in-turn calls parent "Display" method
51. 
52. 
53. 
54.    </script>
55.</head>
56.<body>
57. 
58.</body>
59.</html>



Rated 0 from 0 votes ( login  to rate)
DotnetKicks DotnetKicksDe DotNetShoutout

Attachments / Source Code
You need to Login or Join for FREE to download the following


Discussion
No comments yet!