JavaScript is typically thought of as a procedural scripting language, however it contains many aspects that allow for Object Oriented style scripting. Below you will find a few examples of how to script JavaScript in an Object Oriented style.
Before you start
The best way of studying this tutorial is to have Firefox with Firebug handy. This way you can test the tutorial examples immediately.
Install both of them if you haven’t already done so.
Also review the tutorial on using Firebug and additional tips on debugging with firebug
{tip}
The Firebug command line, found at the bottom of the Console tab, is no different than any command line you’ve used in UNIX, DOS, or Windows—except that it accepts commands written in JavaScript.
The command line is more than just a place for one-liners. You can expand it to become a full-size editor. When you’re working in your external editor, you can quickly copy-and-paste code into the Firebug editor to execute them immediately and how they effect the live page. Once you’ve gotten the result you’d like, copy the finished code and paste it back into your editor.
{tip}
Variables
Global variable definition
var myVariable = "myVar";
function visibilityExample(){
/* visibility: public */
this.publicVar="";
/* visibility: private */
var privateVar="";
}
Methods
Simple method with return
function MyMethod1() {
var rtnVar1 = null;
this.pubVar1 = "1";
rtnVar1 = this.pubVar1
return rtnVar1;
}
alert(MyMethod1()); // returns 1
Static Objects
Demonstrates Object with static methods foo and bar
var MyObject2 = {
foo: function() {
var rtnVarFoo = null; //private variable
this.pubVar2 = "2"; //public variable
rtnVarFoo = this.pubVar2;
return rtnVarFoo;
}, // notice the comma
bar: function() {
var rtnVarBar = "2";
return rtnVarBar;
}
}
alert(MyObject2.bar()); //returns 2
Basic Object Instantiation
Demonstrates basic object instantiation
function MyObject3(r,g,b)
{
this.Red = r;
this.Green = g;
this.Blue = b;
this.bar = function(){
var rtnVarBar = "3";
return rtnVarBar;
}
}
myNewObj3 = new MyObject3("red","green", "blue");
alert("Bar: " + myNewObj3.bar()); //returns 3
Basic Prototype Example
/* Base object */
function MyObject4() {
// constructor code goes here
this.myVariable4 = 5;
this.bar = function(){
var rtnVarBar = "4";
return rtnVarBar;
}
}
/* Adds method to Base object */
MyObject4.prototype.memberMethod = function()
{
return this.myVariable4;
}
myNewObj4 = new MyObject4();
alert(myNewObj4.memberMethod());
Basic Inheritance Example
prototype = base object type (think extends)
objects not defining a prototype are thought to extend Object
(think extends Object)
objects (objA) that have their prototype set (to objB) are thought to extend the second object (objA extends objB)
// Base Object
function Employee () {
this.name = "";
this.dept = "general";
}
// Manager extends Employee
function Manager () { // defines initial Manager constructor
this.reports = "Bob, Jane";
}
Manager.prototype = new Employee; // sets Manager as an extention of Employee
// WorkerBee extends Employee
function WorkerBee () { // defines initial WorkerBee constructor
this.projects = "SalesProj, MarketingProj";
}
WorkerBee.prototype = new Employee; // Sets WorkerBee as extention of Employee
myManagerJohn = new Manager();
myManagerJohn.name="John";
alert("Name: " + myManagerJohn.name + "\nDept: " + myManagerJohn.dept + "\nReports: " + myManagerJohn.reports);
myWorkerBeeBob = new WorkerBee();
myWorkerBeeBob.name="Bob";
myWorkerBeeBob.dept="Sales";
alert("Name: " + myWorkerBeeBob.name + "\nDept: " + myWorkerBeeBob.dept + "\nProjects: " + myWorkerBeeBob.projects);
Extending the base prototype
Adds to base object AFTER child objects have been created aka. Dynamic Inheritance
// Base Object
function Employee () {
this.name = "";
this.dept = "general";
}
// Manager extends Employee
function Manager () { // defines initial Manager constructor
this.reports = "Bob, Jane";
}
Manager.prototype = new Employee; // sets Manager as an extention of Employee
// WorkerBee extends Employee
function WorkerBee () { // defines initial WorkerBee constructor
this.projects = "SalesProj, MarketingProj";
}
WorkerBee.prototype = new Employee; // Sets WorkerBee as extention of Employee
myManagerJohn = new Manager();
myManagerJohn.name="John";
alert("Name: " + myManagerJohn.name + "\nDept: " + myManagerJohn.dept + "\nReports: " + myManagerJohn.reports);
myWorkerBeeBob = new WorkerBee();
myWorkerBeeBob.name="Bob";
myWorkerBeeBob.dept="Sales";
alert("Name: " + myWorkerBeeBob.name + "\nDept: " + myWorkerBeeBob.dept + "\nProjects: " + myWorkerBeeBob.projects);
Employee.prototype.hourlyRate = "50"; // << Dynamic Inheritance
alert("Name: " + myManagerJohn.name + "\nDept: " + myManagerJohn.dept + "\nReports: " + myManagerJohn.reports + "\nHourly Rate: " + myManagerJohn.hourlyRate);
alert("Name: " + myWorkerBeeBob.name + "\nDept: " + myWorkerBeeBob.dept + "\nProjects: " + myWorkerBeeBob.projects + "\nHourly Rate: " + myWorkerBeeBob.hourlyRate);
Working With Constructor Parameters
/**
* Base Person object with empty constructor
* @constructor
*/
function Person(){
this.name="Name: ";
}
/**
* Base Person object with 1 element constructor
* @constructor
*/
function Person(name){
this.name="Name: " + name;
}
bob = new Person("Bob");
alert(bob.name);
/**
* Extended object with constructor
*/
function Teacher(name, subject){
this.base = Person;
this.base(name); // Think super(name) from java
this.subject="Subject: " + subject;
this.toString = function(){
return this.name + "\n" + this.subject;
}
}
Teacher.prototype= new Person; // Ensures dynamic inheritance
jim = new Teacher("Jim", "Math");
alert(jim);
/**
* Using ".call" for parent rather than ".base"
* for a 'cleaner' implementation
* .call was implemented in: JavaScript 1.3
*/
function Janitor(name, shift){
Person.call(this,name); // Think super(name) from java
this.shift="Shift: " + shift;
this.toString = function(){
return this.name + "\n" + this.shift;
}
}
Janitor.prototype= new Person; // Ensures dynamic inheritance
stan = new Janitor("Stan", "Night");
alert(stan);
