Whenever you try to access some property of a JavaScript object, it will look for that property in 2 places. First one is Object itself and second one is Object’s prototype. If prototype of that Object is another Object then search moves on that Object and that Object’s prototype. Search like this carried till it reach that accessed property to return value or native JavaScript Object, of which prototype is nothing but null and returns null. this feature of JavaScript is called as Prototype Chains
September 26, 2009
Objects in javaScript
An Object in JavaScript is a collection of un-ordered properties each of which contains a primitive value, object or function.
Simplest way of creating object is creating new instance of Object and add properties into it.
Example:
var pet = new Object()
pet.name = "Dev";
pet.age = 2;
pet.type = "dog"
pet.whatPet = function(){
alert(this.type);
}
But when you have to create many instances of a given object you need to use lot many redundant code. Hence to avoid programmers started introducing Factory pattern to create new objects.
Factory pattern is popular design-pattern which is used to abstract away process of creating specific objects.
Pet class creation code with Factory pattern looks like this.
function createPet(name, age,type){
var o = new Object();
o.name = name;
o.age = age;
o.type = type;
o.whatPet=function(){
alert(this.type);
}
return o;
}
var dog1= createPet("Dev",2,"dog");
var cat1= createPet("Cuty",1,"cat");
Using this method will soft problem of redundancy but by this way we cannot identify type of an object. This problem was again resolved using Constructor pattern.
function Pet(name, age,type){
this.name = name;
this.age = age;
this.type = type;
this.whatPet=function(){
alert(this.type);
}
}
var dog1= new Pet ("Dev",2,"dog");
A constructor function defers from normal function just in the way it is called, otherwise syntax remains same for both the functions. Constructor function can be called as follows:
var dog1 = new Pet ("Dev",2,"dog");
dog1.whatPet();
//or calling it like functions
Pet("Dev",2,"dog");
window.whatPet();
// all objects reside in global context can be referred by window.
var o = new Object();
Pet.call(o,"Dev",2,"dog");
o.whatPet();
Only problem with constructor is whatever methods you define they won’t share same instance of functions. Each instance of given object with create its own function instance for each method. There is no point in having multiple instances of the same Function.
to be continued…
September 19, 2009
Interface with JavaScript
Interface: An interface is an blue print of a class, it specify what methods an Object should have, that way it add some kind of predictability on what you can expect from that Class. For example, a Class that implement “Comparable” interface can be assumed to be comparable with other object that implement “Comparable” interface. It allows you to group objects on the features they provide. It make sure all Classes of required feature follows same methods, hence communication between them easier. In a way it also increases code re-usage.
JavaScript doesn’t have native support for interfaces along with normal object oriented features of other languages like C++ and Java. There is no interface keyword in JavaScript, apart from this emulating interfaces feature will add some performance over head and will reduce the flexibility of JavaScript to some extent. Transition for other language codes to JavaScript may be a tedious task, if you developing completely new Class, you can make sure all implementations are at their best ability. Biggest of the problems in using interfaces with JavaScript is there is no way you can force other programmers to use the interfaces you created.
Interface: An interface is an blue print of a class, it specify what methods an Object should have, that way it add some kind of predictability on what you can expect from that Class. For example, a Class that implement “Comparable” interface can be assumed to be comparable with other object that implement “Comparable” interface. It allows you to group objects on the features they provide. It make sure all Classes of required feature follows same methods, hence communication between them easier. In a way it also increases code re-usage.
JavaScript doesn’t have native support for interfaces along with normal object oriented features of other languages like C++ and Java. There is no interface keyword in JavaScript, apart from this emulating interfaces feature will add some performance over head and will reduce the flexibility of JavaScript to some extent. Transition for other language codes to JavaScript may be a tedious task, if you developing completely new Class, you can make sure all implementations are at their best ability. Biggest of the problems in using interfaces with JavaScript is there is no way you can force other programmers to use the interfaces you created.
Examples to follow
September 18, 2009
Flexibility & JavaScript
JavaScript is the most flexible and widely used language in current era of Internet, nobody expected JavaScript to grow this fast and wide, hence I say JavaScript is kind of under-developed but over used technology. But that doesn’t take the beauty of flexibility away from JavaScript even though security remains major concern in its implementation. Every day it keeps me interesting with it’s abilities, every time I think why did I miss that part it. In all it’s the most flexible language for OO coding, here is the small example which shows how you can easily organize and maintain JavaScript code.
Say I have to define 2 functions walk and run. you can define them as follows.
function walk(){
// do walking
}
function run(){
// do running
}
If you are defining this function as part of a Man class, code looks like this
var Man=function(){
//….
};
Man.prototype=function(){
// do walking
};
Man.prototype.run=function(){
// do running
};
/* Usage */
var ravi=new Man();
ravi.walk();
ravi.run();
If you want class encapsulated in one declaration you can do
var Man=function(){
//….
};
Man.prototype={
walk:function(){
// do walking
},
run:function(){
//do running
}
}
What’s next you can add a method to Function object that can be used to declare methods.
Function.prototype.method = function(name, fn) {
this.prototype[name] = fn;
};
var Man= function() {
//do something
};
Man.method(‘walk’, function() {
//do walking
});
Man.method(‘run’, function() {
//do running
});
As we saw earlier, flexibility of JavaScript is enviable, here every thing is an object (except primitive data types) and you can add attributes and methods to these Objects at any point of time, execution. You can even add methods and attributes to Functions as well. Here is an example:
function displayError (message){
displayError.numTimesExecuted++;
alert(message);
}
displayError.numTimesExecuted = 0;
here is another example with prototype:
function Man(weight, height){
this.height = height;
this.weight = weight;
}
Man.prototype={
getHeight:function(){
return this.height;
},
getWeight:function(){
return this.weight;
}
}
/* Initiating the class */
var ravi = new Man (80,164);
var suresh = new Man (75,169);
/* add new method to Class */`
Man.prototype.getGreeting=function(){
return "Hi your height and weight is " + this.getHeight() +" and " + this.getWeight() + " respectively";
}
ravi.getGreeting();
//output "Hi your height and weight is 164 and 80 respectively"
Object Oriented Javascript
I keep hearing now a days, OO Javascript is the buzz word, may be the time has come to think that who-ever can implement OO concepts in Javascript rule the front-end development. Is that completely true? I don’t think so, whatever technique people are using to do OO Javascript are outdated techniques in ActionScript. We with ActionScript started using prototype long before even Flash MX 2004 and ActionScript 2 arrived. That was the only way to write manageable code in ActionScript by then. I remember doing some games using such methods, we used to use #initclip #endinitclip to define ActionScript code that need to be executed before MovieClip is initialized. All done, but it’s OO Javascript creating a wave now in Front-End development. But I can say it’s time for us to do some thing interesting with JavaScript, when every body telling the OO JS is cool, that should have some thing super cool in it. Please join us in exploring super cool features on JavaScript in coming days.
Asv3's Blog 