JavaScript has a unique style for Object-Oriented Programming. The style is closer to the syntax of a functional language than a procedural language. The syntax is not difficult to learn, but it behaves completely unlike what you expect from a compiled language like Java or C++. Central to JavaScript OOP is the way that new functions may be attached to existing objects. Here are a few simple example of how a JavaScript object can be instantiated and manipulated.

JavaScript OOP supports private variables and functions declared using ‘var’. Public properties and Priviledged methods are declared by referencing ‘this’. Priviledged methods can access private variables and functions that are not accessible outside the class.

function Thing (name) {

	// private variable
	var name

	// private function
	function doSomething() { return "Done!"; }

	// priviledged method
	// May be called publically
	// Can call private variables and functions.
	this.toString = function() { return '[Thing ' + name + ']'; }
	this.getName = function() { return name; }
	this.setName = function(n) { name = n; }

	// public properties
	this.description = "none";
}

Public methods and properties may be added to the object by using ‘prototype’ even after the object has been created.

// public methods defined using prototype
Thing.prototype.getDescription
	= function() { return this.description; }
Thing.prototype.setDescription
	= function(desc) { this.description = desc; }

// public properties defined using prototype
Thing.prototype.location = "home";
Thing.prototype.color = "blue";

Inheritance

JavaScript support inheritance, but it is a little awkward. JavaScript needs three steps to create a derived class, and uses both ‘prototype’ and ‘constructor’ to do the work. Let’s create a new class called ‘Person’ that is derived from the Thing class.

Person.prototype = new Thing();
Person.prototype.constructor = Person;

The first line creates a new Thing() object and assigns it as a public method of person. The second line assigns a new constructor for the Person class, otherwise the Thing() constructor would be used.

Now we are ready to define the Person object constructor. We make a call to the parent class to set the name, and we override the parent class toString() method, be defining a new toString() method.

function Person(name) {

	// calls parent class method
	this.setName(name);

	// override parent class method
	this.toString = function() {
		return '[Person ' + this.getName() + ']';
	}
}

Example Use

function doit() {

	// test Thing
	var myThing = new Thing("Mr. Blob");
	window.alert(myThing.toString());
	myThing.setDescription("Creepy, scarey, slime!");
	window.alert(myThing.getDescription());

	// test Person
	var myPerson = new Person("Mrs. Crumbcake");
	window.alert(myPerson.toString());
	myPerson.setDescription("Sweet, cordial, rotund!");
	window.alert(myPerson.getDescription());
	window.alert(myPerson.color);
}

Extending Existing Objects With Prototype

JavaScript also allows you to add new properties and methods to system objects as well as custom objects that you have created. The new properties and methods can be added to an instance of the object.

// add a property to an instance of an Image object
var theImage = new Image();
theImage.description = "This is a photo of my favorite object.";

The new property is added only to the instance. Use prototype to add a property or method to any object that uses ‘new’ as a contructor.

// add a property to the Image class
Image.prototype.description = "This is an image description.";

Properties and Methods can be added to any JavaScript object that uses ‘new’ with the constructor. These include:

Image
String
Data
Array

References

http://phrogz.net/JS/Classes/OOPinJS.html
http://www.javascriptkit.com/javatutors/proto.shtml

Tags: JavaScript, oop, Programming