Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Monday, September 3, 2012

Prototype Introduction

Every object is an object of object. If we want to make the complex web application then we need to use prototype concept with Object Oritented at javascript in one level.

Object.prototype is an object whose properties and methods are inherited to new object when the new object is creating by using that constructor. The consctructor name would be same as for use to create new object.

Here we go for example.
var mydate = new Date();

Here via the Date.prototype, all the methods and properties of Date constructor would inherited to mydate object like getMonths() and getSeconds(). If you want to get month then you can simply do.
mydate.getMonths().
The getMonths() method is not user defined it is inherited from Date.prototype.

How do you use the prototype concept in your custom object. 
var mercidies = new Car();
function Car(name){
this.name = name;
}

Now if you want to add custom method to Car class then you can do.

Car.prototype.getValue = function (val){
var total = val + 100*(12.3/100);
}

For properites
Car.prototype.color = 'gray';

Now Every object is made by using Car() cunstroctur inherited getValue() method and color property.

So we can say prototype concept shares the information(properties and methods) to all those object which are created by using Car() cunstroctur.

So what is the main benfit of it?
It's main advantage is when we create the method and property by using object's prototype concept, methods and properties are shared to each instance made by using that paritcular cunstructor. Which means there is no need to make a copy of methods and properites for each instance.

And the result would be it uses less memory and the speed would be increase obviously.

What if the prototype concept is not exist?
For example simple class
function Car(){
this.name = name;
this.color = 'gray';
this.getValue  = function (){
var total = val + 100*(12.3/100);
}
}

When you make the instances by using that Car cunstructor then each instance/object copy those all properties and methods. Which is not good into complex web application.
If we use the concept of prototype then cunsctructor shares proprites and methods to each object. That's how its increase the speed.

Prototype Chains
By default every simple object has inherited the properties and methods from Object.prototype.
When the method and properties are accessing of objects, it travels through child to parent object.
For example

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

var myCar = new Car();
myCar.toString();

When the toString () is called first of all it sees that is it available in Car's prototype if yes then it returns particular value otherwise it heads to check for Object.prototype methods and returns the particular value if found the method otherwise returns null.



Friday, May 18, 2012

Hoisting Concept

Well I had the knowledge about variable scope in javascript but did not have the knowledge about hoisting, Two kind of variable scope we can get inside the javascript, first is global and other is local scope. 
The scope of variable is existing inside and outside of the function is called local and global scope respectively. 

In language C and the kind of language, a variable scope is rely under the opening and closing curly braces. In javascript the variable scope is live on under the function. for example 
function example(){
   var i = 100;
   if(i==number){
       if(i == 100){
           var j= 900;
       }
   }else(){
       var k=80;    
   }
} 
Inside the example() function all the variable i, j and k have same variable scope.  Which means a variable we can get inside the function before that variable is declared, the process is known as 'hoisting', which means the variable do behave like they all are declared at very start of function. 

Lets understand it with example. Before that we should know one thing, If we declared the variable without 'var' keyword then its behave like a global variable of particular object under it's chain. 
 Here is the example of hoisting 
var mycar = 'bmw'
function example(){
   alert(mycar);
   var mycar = 'toyata';
   alert(mycar);
} 

It seems that first alert would be the value with 'bmw' but its not like this but it would be alert with value 'undefined' because of hoisting concept(because it's behave like the variable is declared at very start of function). The first 'mycar' would be  hidden because with the same name another variable is declaring inside the function. 

At first alert of 'mycar', the value 'totyata' is not alerting because the line(var mycar = 'toyata';) of function is not executed yet. The 'toyata' would be displayed into second alert. 

It is good practice to declare the variable near where the variable would be used.