STEPPING INTO JS OOPS - CHAPTER 2

Hi Friends,

In this chapter we are going to delve deeper into inheritance and objects. I will suggest you here that you install firebug for your mozilla . Because a lot of this will be done using firebug script editor and console .

If you have mozilla 3.0 uptill 8.0 , i suggest you use firebug 1.7.3 xpi .

Install it from this link :  http://getfirebug.com/releases/firebug/1.7/



If you have mozilla 9 and above , i suggest you download firebug 1.8 xpi .

These are the most stable versions of firebugs  for the above versions of mozilla.

Now, Let's get started , shall we ?

I WILL INHERIT MY DAD'S  PROPERTY (Probably) :

Suppose I have an object 'x'  and it inherits all the properties of the object 'y', then in this jargon we shall say that y is the prototype of the object x and  the properties of x override the properties of  y .

I know, i know ... you are going to say what every one else said to me : "I DON'T BELIEVE  YOU" .

Well, what if i give you live examples here .

Inside the script - editor of firebug :

var alpha = {firstName: 'Kunal', lastName: 'Bhowmick'} ;
var beta = {firstName: 'Anirban'};
beta.__proto__ = alpha ; // Making beta inherit everything from alpha

beta.lastName; // O/P : Bhowmick--> in the console .

Whoa, what is this ??

Well, this is actually nothing but inheritance at it's mischievous best .

alpha is my JavaScript variable which contains firstName and lastName .

beta ,however, consists of only the firstName.

Now , to make alpha the parent of beta, we have used  '__proto__'. This is like the 'extends' keyword used in java .

Hence beta.lastName takes the lastName of alpha since it does not have a last name of it's own.

Still, you don't believe me , do yah ?

If so, then have a look at the screen shot below :

EDITOR :

CONSOLE :

 But what happens , when you try to print the firstName of beta :

beta.firstName;
O/P : Anirban

This is because, the properties of the child , present in the child overrides that of the parent .

What if we introduce last name for beta :

beta.lastName = 'Bhattacharjee';
beta.lastName;
O/P : Bhattacharjee

So , it again overrides its parent alpha .

Let's delete the lastName of beta :

delete beta.lastName;
beta.lastName;

O/P : Bhowmick

Since, we have deleted the last name of beta, it inherits the last name of alpha again.

Now, what if try to find the prototype of alpha, the parent .
Ok, so let's have :

alpha.__proto__;

This gives the output as :

Object {}

This in actuality represents the object Object.prototype --> which is the godfather of all objects .




I HAVE GOT  BAD  NEWS  AND BAD NEWS :




Well, the problem is __proto__ cannot be used in internet explorer and some other browsers because it is not in the ECMA script specification .


But, hang on, before you guys curse my head off, let me tell you that, even though it cannot be used in those browsers, it does not mean that it does not exist there . It is still there, however we deal with it in a roundabout way .


So that is prototype inheritance in a nutshell. 
That is why, though java script does not contain classes, yet still it uses inheritance in this way and hence it is an OOP construct.


HOW DOES THIS INHERITANCE WORK :

 


Alright, alright i am getting into it . 
Have  a  little patience, yea of little faith .


Let us describe an ordinary function :

function Apple(name){ 
    this.name = name;  
}


var apple1 = new Apple('White Apple'); // create an object for Apple

Apple.prototype.greet = function(){
    console.log('Eat me, I am a : ' + this.name);
}

As a result of this, Apple.prototype becomes the prototype of each object that's created via new Apple() such as : apple1 .


So, we have used this prototype to define the function greet() and we will call it in this way :


apple1.greet();


O/P : Eat me, I am a : White Apple

In this way , we can create any number of  methods like greet() and they will be available for all the instances  of the apple object created there of .


This is exactly how, inheritance is used  in java script .


Hope you enjoyed this one .


Good bye .