JavaScript – A Different Beast, Part-6: Objects without Classes

Private Members

Properties of an object are always public. As shown in previous examples, the methods and member variables of car could be accessed outside the function. Private variables and methods are crucial for object oriented programming. For example, in Code-4, the cars do not have any member variables that maintain its state – running/not-running. To fix this we need to add a variable and maybe a function to check whether the car is running. Since the new property and method should not be visible outside, we need to define them with private visibility. This can be done by declaring the variable or function within the constructor without attaching it to the object – i.e. define them inside the constructor, but don’t make it a member. See code-5 below.

//Code - 3.5 - Private members
function car(name,color){
	this.name = name;
	this['color'] = color;
	var running = false; //private var
	function isRunning()  { //private method
		return running;
	}

	//fixed run method
	this.run = function() {
		if(isRunning()) //accessing private method
			console.log(this.name + ' already running');
		else{
			running = true; //accessing private variable
			console.log('started ' + this.name);
		}
	}

	//fixed brake method
	this['brake'] = function(){
		if(isRunning()) {
			running = false;
			console.log(this.name + ' stopped');
		} else {
			console.log(this.name + ' not running');
		}
	}
}

var lamborgini = new car('lamborgini', 'green');
var ferrari = new car('ferrari', 'red');

lamborgini.run(); //started lamborgini
lamborgini.run(); //lamborgini already running
ferrari.brake(); //ferrari not running

Runtime modification of objects

Objects in JavaScript can be modified dynamically by addition or manipulation of its members. See Code-6 below.

//Code-6 - Object modification
//using the constructor from previous code
var ferrari = new car('ferrari', 'red');
var lamborgini = new car('lamborgini', 'green');

ferrari.honk  = function(){ //see how we added a new method
	console.log('honk honk i am a '+this.name);
}

ferrari.honk(); //works. But, lamborgini cannot honk!

Now, what if one wants to add the method to both ferrari and lamborgini? That’s where prototype comes in handy. Prototype is a special property of constructor functions which is shared by all the objects created by the constructor. Therefore, adding a property to a function’s prototype object makes it available for all the instances. See code-7 below.

//Code-7 - Enter Prototype

car.prototype.turn = function() { //enter prototype!!
console.log(this.name + ' turning');
}

ferrari.turn(); //turns
lamborgini.turn(); //turns

Dynamically adding new methods to an object’s prototype is a useful technique for adding methods to host objects or third party libraries. This technique is known as monkey-patching and is generally discouraged. However, it is a great fix to cross-browser compatibility issues. By monkey-patching the host-objects, one can set up a ‘level playing field’ across browsers. For example, the filter method in Array object is not implemented by some versions of IE. By adding that method dynamically as shown in code-8 below, the developers can use the filter method without worrying about cross-browser compatibility issues.

//Code - 3.8 - x-browser compatibility
if (!Array.prototype.filter) {
	Array.prototype.filter = function(filterFunc) {
		//write filtering code here….
	}
}

Smart, eh? JavaScript is all about such smart hacks.

Another useful technique using prototypes is to define object inheritance without classes. My next post in this series will cover it in detail.

Advertisements

About Rahul Mohan

Technical researcher interested in model-driven development of enterprise business applications. Passionate about web technologies and a huge admirer of open-source especially in the Java landscape. When I am not doing any of the above you can find me with my camera (www.flickr.com/photos/rahulmohan/) or listening to music. (In fact, the title of the blog is inspired by Led Zeppelin's Physical Graffiti. )

Posted on May 21, 2011, in JavaScript, Tutorial and tagged , , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: