Javascript Prototypes – Explain Javascript Prototype?

Every JavaScript function has a prototype property (this property is empty by default), and you attach properties and methods on this prototype property when you want to implement inheritance. This prototype property is not enumerable; that is, it isn’t accessible in a for/in loop. But Firefox and most versions of Safari and Chrome have a __proto__ “pseudo” property (an alternative syntax) that allows you to access an object’s prototype property. The prototype property is used primarily for inheritance; you add methods and properties on a function’s prototype property to make those methods and properties available to instances of that function.

Why is Prototype Important and When is it Used?

These are two important ways the prototype is used in JavaScript, as we noted above:

Prototype Property: Prototype-based Inheritance – Prototype is important in JavaScript because JavaScript does not have classical inheritance based on Classes (as most object oriented languages do), and therefore all inheritance in JavaScript is made possible through the prototype property. JavaScript has a prototype-based inheritance mechanism. In JavaScript, you implement inheritance with the prototype property. For example, you can create a Bear function (an object, since all functions in JavaScript are objects) and add properties and methods on the Bear prototype property, and all instances of the

Bear function will inherit all the Bear’s properties and methods.

function Bear(type) {
    this.type = type;
}

Bear.prototype.growl = function () {
    console.log("Bear Prototype Bear with type " + this.type + " grrrr....");
};

function Grizzly() {
    Bear.call(this, "grizzly");
}
Grizzly.prototype = new Bear();
var grizzly = new Grizzly();
grizzly.growl(); // Bear Prototype Bear with type grizzly grrrr....

Note that the growl method was inherited by the grizzly object even though it was defined all the way up the prototype chain on the Bear.prototype object. Indeed, any object that uses the Bear() constructor will inherit all the bear.prototype properties and methods and all the properties and methods from the Bear’s prototype. This is the principal manner in which inheritance is implemented in JavaScript and the integral role the prototype chain has in the process

Prototype Attribute: Accessing Properties on Objects:

Prototype is also important for accessing properties and methods of objects. The prototype attribute (or prototype object) of any object is the “parent” object where the inherited properties were originally defined.This is loosely analogous to the way you might inherit your surname from your father—he is your “prototype parent.” If we wanted to find out where your surname came from, we would first check to see if you created it yourself; if not, the search will move to your prototype parent to see if you inherited it from him. If it was not created by him, the search continues to his father (your father’s prototype parent).

Similarly, if you want to access a property of an object, the search for the property begins directly on the object. If the JS runtime can’t find the property there, it then looks for the property on the object’s prototype—the object it inherited its properties from.
If the property is not found on the object’s prototype, the search for the property then moves to prototype of the object’s prototype (the father of the object’s father—the grandfather). And this continues until there is no more prototype (no more great-grand father; no more lineage to follow). This in essence is the prototype chain: the chain from an object’s prototype to its prototype’s prototype and onwards. And JavaScript uses this prototype chain to look for properties and methods of an object. If the property does not exist on any of the object’s prototype in its prototype chain, then the property does not exist and undefined is returned.

This prototype chain mechanism is essentially the same concept we have discussed above with the prototype-based inheritance, except we are now focusing specifically on how JavaScript accesses object properties and methods via the prototype object.

This example demonstrates the prototype chain of an object’s prototype object:

function Bear(type) {
    this.type = type;
}

Bear.prototype.growl = function () {
    console.log("Bear Prototype Bear with type " + this.type + " grrrr....");
};

function Grizzly() {
    Bear.call(this, "grizzly");
}


Grizzly.prototype = new Bear();
Grizzly.prototype.growl = function () {
    console.log("grizzly Prototype Bear with type " + this.type + " grrrr....");
};

function Polar() {
    Bear.call(this, "Polar");
}
Polar.prototype = new Bear();

function BlackBear() {
    Bear.call(this, "BlackBear");
}
BlackBear.prototype = new Bear();


var grizzly = new Grizzly();
var polar = new Polar()
var blackBear = new BlackBear();
blackBear.growl = function () {
    console.log("Black Bear Original Class Bear with type " + this.type + 

" grrrr....");
};

//In this case growl is found on the object instance
blackBear.growl(); //Black Bear Original Class Bear with type BlackBear grrrr....

//In this case growl is not found on the object instance, but on the object prototype
grizzly.growl(); //grizzly Prototype Bear with type grizzly grrrr....

//In this case growl is not found on the object instance, not on the object prototype
//but on the parent objec prototype.
polar.growl(); //Bear Prototype Bear with type Polar grrrr....
Advertisements

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