Object oriented JavaScript: Fundamental concepts

JavaScript is a dynamic, highly expressive[1] multi-paradigm language[2]. JavaScript has had it’s problems, from a weak specification and poor initial implementation it has matured as the Web has and become a ubiquitous Web technology. Commonly used for Web client interactions it has also proven itself capable of powering Web servers and other devices.[3].

As JavaScript development has matured Object Oriented programming has become the main programming paradigm, it is a paradigm shared with Java, C++ and many other languages. JavaScript is an object based language, lacking some of the traditional features of an Object Oriented language, it is a highly expressive language with alternative methods for classes, information hiding and inheritance[1].

Developing Object Oriented JavaScript has a number of benefits for code quality and reuse. This article will focus on Object Oriented Programming’s four fundamental concepts, abstraction, encapsulation, inheritance and polymorphism[7].

Abstraction

Only the possible states and behaviours of the abstracted object are accessible, the internal implementation of the object remains hidden. By abstracting the internal implementation of the object, we make the object’s purpose easier to understand[4].

function Video(element, options) {
	this.Volume = function(number) {
		var loudness = element.volume;
		loudness = loudness + number;
		...
			element.volume = loudness;
		...
	}
}	

When the Volume method is invoked there are a number of possible states for the volume. We don’t need to know what these states are, only that by invoking the Volume method we are attempting to change the volume by a given value.

Encapsulation

The object is structured to be self-contained, everything the object needs is available internally. The internal state of the object is not directly accessible externally except through the abstraction layer[5].

function Video(element, options) {
	this.Volume = function(number) {
		var loudness = element.volume;
		loudness = loudness + number;
		...
			element.volume = loudness;
		...
	}
}	

When Volume is given a value, what we need to alter the volume of the video element is available internally. We cannot alter loudness except through the Volume abstraction.

Inheritance

Through inheritance, one object can inherit the characteristics of another object, this allows an existing object to be extended and similar objects to share properties and behaviours[6].

function Video(element, options) {
	this.Play = function() {
		...
	}
}
function Audio(element, options) {
	...
}
Audio.prototype = new Video();
var audio = new Audio();
audio.Play();

Using prototype, Audio inherits the properties of Video allowing the audio instance to use Video’s Play method.

Polymorphism

Different objects can respond to the same name in different ways, with the response specific to the object[7].

function Video(element, options) {
	this.Play = function() {
		...
	}
}
function Audio(element, options) {
	this.Play = function() {
		...
	}
}
Audio.prototype = new Video();
var audio = new Audio();
audio.Play();	

Audio inherits a Play method from Video but we may want to alter the Play functionality for Audio. We can overload the Play method with a new Audio Play method.

Summary

Abstraction, encapsulation, inheritance and polymorphism are the building blocks of Object Oriented Programming. Abstraction and encapsulation share a similar conceptual space while inheritance and polymorphism are also linked, by understanding how these concepts work we can better structure our solutions to large programming problems.

Understanding these terms alone though does not necessarily lead to better code quality or reuse. In the next article i’ll look at Bertrand Meyer’s five criteria for modularity from his book Object Oriented Software Construction and how these criteria can guide development practice in creating modular, reusable code.

References

  1. http://javascript.crockford.com/javascript.html. Retrieved 29/05/2011.
  2. http://en.wikipedia.org/wiki/List_of_multi-paradigm_programming_languages. Retrieved 29/05/2011.
  3. http://javascript.crockford.com/popular.html. Retrieved 29/05/2011.
  4. http://en.wikipedia.org/wiki/Abstraction_(computer_science). Retrieved 31/05/2011.
  5. http://en.wikipedia.org/wiki/Encapsulation_(object-oriented_programming). Retrieved 31/05/2011.
  6. http://en.wikipedia.org/wiki/Inheritance_(object-oriented_programming). Retrieved 31/05/2011.
  7. http://en.wikipedia.org/wiki/Encapsulation_(object-oriented_programming). Retrieved 31/05/2011.

2 Responses to Object oriented JavaScript: Fundamental concepts

  1. Andrew says:

    Thank you so much for sharing this article with everyone….. This was really helpful to me to understand oop concept. I could not understand some concept like Abstraction,Encapsulation,Inheritance,Polymorphism before. But I got everything correctly after read this……. & I found similar article when I was searching @ http://www.techyv.com/article/object-oriented-programming-concepts This also will give you a better explanation…….

  2. George Paterson says:

    Good to hear the article helps, the article linked to is interesting but i wanted to focus on JavaScript based examples as i can then extend in to plugin development.

Comment on Object oriented JavaScript: Fundamental concepts

Your email address will not be published.

You may use these HTMLtags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>