JavaScript – A Different Beast, Part-7: Inheritance without Classes

Prototypes and Constructors

JavaScript provides a convenient mechanism to set a common prototype to all objects created using a constructor function (and that too in a cross-browser compatible way). All functions in JavaScript have a property called prototype (this is not the internal [[prototype]] property that we have seen earlier). Any object created using a function – using the new operator – will get the functions prototype object as its [[prototype]]. See code below:

//prototype for ferrari and fiat
var four_wheeler = {
	start: function() { console.log('vrooom'); },
	stop : function() { console.log('stopped'); },
	wheels: 4,
	type: '4wheeler'
}

//constructor function
function car(cname){
	this.name = cname;
}

//setting the prototype
car.prototype = four_wheeler;

//creating two objects
var ferrari = new car('ferrari');
var fiat = new car('fiat ');

console.log(ferrari.__proto__);//Object { wheels=4, type="4wheeler"}
console.log(fiat.__proto__);//Object { wheels=4, type="4wheeler"}

//prototypes in action!
console.log(ferrari); //Object { name="ferrari", type="4wheeler", wheels=4}
console.log(fiat); //Object { name="fiat", type="4wheeler", wheels=4}
ferrari.start();//vrooom
fiat.stop(); //stopped

De-Confuser: For the single concept of prototype, we have seen three different properties – [[prototype]], __proto__ and prototype. Obviously there is bound to be some confusion. This is smack-down on the three:

  • [[prototype]] is the Real McCoy. It’s an internal property in all JavaScript objects that point to an object’s prototype, if it has one. You can access this property directly from code.
  • __proto__ is one way to access the internal [[prototype]]. Object.getPrototypeOf() is another way. Both the mechanisms work only on some browsers.
  • prototype is an externally accessible property of all JavaScript functions, but they are meaningful only if the function is used as a constructor for creating objects. When an object is created using a function, the function’s prototype is set as the newly created instance’s [[prototype]]:
    var obj = new foo() ensures obj.__proto__ = foo.prototype

The Constructor Property

All functions by default has reference to a default prototype object which has only one property, called constructor, that always points back to the function object. So in the above code: foo.prototype.constructor === foo evaluates to true. Code below shows this in action.

//code-sample
//constructor function
function foo(){
	this.x = 10;
}

//inspecting foo's prototype
var foo_prototype = foo.prototype;
console.log(foo_prototype);//foo{}
console.log(typeof foo_prototype); //object
console.log(foo_prototype.constructor); //foo()
console.log(typeof foo_prototype.constructor); //function

//create an object using foo
var obj = new foo();

//inspecting obj's [[prototype]]
var obj_proto = Object.getPrototypeOf(obj);
console.log(obj_proto);//foo{}
console.log(obj_proto === foo_prototype);//true

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 June 13, 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: