Object Oriented Programming in Javascript

By Patrick Lin

Object-Oriented Programming is currently one of the most prominent aspects of programming. Many programming courses teach OOP, and PHP5 supports proper OOP. While Javascript as a language is not inherently well-suited for full fledged OOP, it is possible to make it work.

Here is a basic primer in using OOP in Javascript.

Methods vs Objects

In Javascript, both general methods and objects are defined using the function keyword. For example, the method and the object definitions below are both denoted by function.

function add( a, b ) {
	return a+b;
}

function sum( a, b ) {
	this.total = a+b;
}

The difference between a method call and an object instantiation call is the keyword new. The difference is illustrated in the example below:

var addition = add( 1, 2 );
var summation = new sum( 1, 2 );

Fields

In OOP in Javascript, objects have fields that store data. You have already seen an example of this earlier in the sum object, which stores the sum of a+b as total. All of these fields are public – that is to say, modifiable by elements other than the object itself. For example:

var summation = new sum( 1, 2 );
alert(summation.total); // shows 3
summation.total = 5;
alert(summation.total); // shows 5

Methods in Objects

Next, objects can declare their own methods. These methods can be defined within the object definition, or outside of the definition and assigned to a variable within the object definition.

This provides an example of the former:

function sum( a, b ) {
	this.total = add( a, b );
	this.print = function() {
		print(this.total);
	}
}

and this provides an example of the latter:

function sum( a, b ) {
	this.total = add( a, b );
	this.print = print;
}

function print( total ) {
	print(total);
}

Inheritance

Finally, a major part of OOP is inheritance. Inheritance is when a “subclass” takes on all the methods of a “superclass”. Inheritance in Javascript is done using two lines:

this.inheritFrom = ;
this.inheritFrom();

Here is an example of the subclass retaining the methods of the superclass while adding methods of its own.

function super() {
	this.alert = function() {
		alert("Hello!");
	}
	this.alert2 = function() {
		alert("Hello2!");
	}
}
function sub() {
	this.inheritFrom = super;
	this.inheritFrom();

	this.alert3 = function() {
		alert("Hello3!");
	}
}
var c = new sub();
c.alert(); // alerts "Hello!"
c2.alert2(); // alerts "Hello2!"
c2.alert3(); // alerts "Hello3!"

While this primer is not necessarily in-depth, it has hopefully given you a basic understanding how OOP works in Javascript.

Tags: javascript

This entry was posted on Saturday, September 5th, 2009 at 05:00:13. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

• RSS
• Delicious
• Facebook
• DFloat
• DMoo
• E-mail