Javascript Concepts Simplified Part 4: The Prototype Property

All Javascript objects have a property called ‘prototype’ which can contain an object reference. Javascript uses this property to implement it’s inheritance hierarchy – by putting a reference to the parent object via the ‘prototype’ property. To see this try the following code,

// The base class
function Base() {
    // Public property
    this.aPublicProperty = "This is a public property of the type Base";
}

This initializes the prototype property (internally) to an empty class.

// 'prototype' is not null, it is initialized internally like this - Base.prototype = { }
alert(Base.prototype);   // [object Object]

Now we can add fields/properties to the (empty) object that the prototype refers,

// Add a new field/property
Base.prototype.newField = "This is a new field of the type Base's prototype";
Base.prototype.aPublicProperty = "This is a public property of the type Base's prototype";

Now here’s the trick that transforms this innocuous looking property into the basis of Javascript’s object oriented implementation: when you access a property on a class, if the class doesn’t have the property, Javascript will look for the property on the object the prototype refers to. Now we can see how this might lead to inheritance – the derived class (the object) can access the base class’s (the object’s prototype’s object) methods. Also if both the object and the object’s prototype referred object have the same property, the object’s property overrides the prototype referred object’s property.

var baseInstance = new Base();
alert(baseInstance.newField);        // Access the prototype's property
alert(baseInstance.constructor.prototype.aPublicProperty);  // Access the prototype's property - will see later
alert(Base.prototype.aPublicProperty);  // Access the prototype's property via Base
alert(baseInstance.aPublicProperty);    // Override the prototype's property

We are starting to see object-oriented behaviors implemented via the prototype property. The prototype property refer’s to the object’s base class. Let’s take this further,

// Derived from the base class
function Derived() { }
Derived.prototype = new Base();

// Another class derived from the base class
function AnotherDerived() { }
AnotherDerived.prototype = new Base();

// A class derived from the derived class
function DerivedDerived() { }
DerivedDerived.prototype = new Derived();

This results in a class hierarchy that looks like this,

Now that we have the class structure, let’s create some instances,

// Create some instances
var derivedInstance = new Derived();
var anotherDerivedInstance = new AnotherDerived();
var derivedDerivedInstance = new DerivedDerived();

Let’s add a new property to the Base’s prototype.

// Add a new property to the Base's prototype
Base.prototype.testInheritance = "Every object that derives from Base now has this property";
alert(derivedDerivedInstance.testInheritance);

And add a new property to the Derived’s prototype,

// Add a new property to the Derived's prototype
Derived.prototype.testInheritance = "Every object that derives from Derived now has this property";
// Does that mean the Base now has the property? No.
alert(baseInstance.testInheritance); // undefined
alert(derivedDerivedInstance.testInheritance);

For more information about Javascript prototypes see here.