By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,340 Members | 1,715 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,340 IT Pros & Developers. It's quick & easy.

Again i got stuck in prototype chaining?

dmjpro
100+
P: 2,476
Hey Experts!
I want to know the prototype chaining? How does it take part in Inheritance in JavaScript?
Mar 30 '09 #1
Share this Question
Share on Google+
16 Replies


Dormilich
Expert Mod 5K+
P: 8,639
put in simple words, prototyping is the Javascript inheritance.

more info on google
Mar 30 '09 #2

dmjpro
100+
P: 2,476
I think it would be a best place to know how prototype chaining works ?
Mar 30 '09 #3

Dormilich
Expert Mod 5K+
P: 8,639
you mean an example?
Mar 30 '09 #4

dmjpro
100+
P: 2,476
See ....
I have this example.
Expand|Select|Wrap|Line Numbers
  1. function Super(){
  2. this.a = 100;
  3. }
  4.  
  5. function Sub(){
  6. Super.apply(this,arguments);
  7. }
  8.  
  9. function test(){
  10. Sub.prototype = new Super();
  11. Super.prototype.x = 200;
  12. Sub s = new Sub();
  13. alert(s.a); alert(s.x);
  14. }
  15.  
Actually I got a sample code ...i changed here in two places.
There it was .... Sub.prototype.constructor = Sub and Super.prototype.constructor.apply..
Actually what would be the benifit if i left the code as it was?
Could you explain?
Mar 30 '09 #5

Dormilich
Expert Mod 5K+
P: 8,639
@dmjpro
this re-sets the constructor function to Sub() (otherwise the Super() function would be called at: var obj = new Sub;)
@dmjpro
this calls Super's constructor function (which may not necessarily be named Super()) with the context of "this" set to your actual Sub object.

@dmjpro
probably less typing and less re-usability (though that may make hardly any difference in this case)
Mar 30 '09 #6

dmjpro
100+
P: 2,476
Still it's not clear.
Still it's calling Sub function on calling new Sub()
And what you told abut apply, i didn't get you ;(
Mar 30 '09 #7

Dormilich
Expert Mod 5K+
P: 8,639
@dmjpro
how do you know that?
@dmjpro
you know what the apply() function is for?
Mar 30 '09 #8

dmjpro
100+
P: 2,476
If i add something into Sub..

Expand|Select|Wrap|Line Numbers
  1. function Sub(){
  2. this.b = 200;
  3. .....
  4. }
  5.  
If I alert s.b then it's coming. i am getting the Sub's properties as well as of Super.

Yeah i know .. actually what apply does here .. it simply copies the Super's properties and put it into Sub object. I don't know whether it is correct or not ? ;)
Mar 30 '09 #9

Dormilich
Expert Mod 5K+
P: 8,639
@dmjpro
nearly, apply() runs the specified function in a different context (= your own definition of "this" inside the called function) (it does not copy anything) i.e. here it creates the property "a" but the property is attached to the Sub object not the window object (window is the global scope/object that is used, if no context is specified (like if you would simply call Super() (without the new keyword)))

see apply() MDC
Mar 30 '09 #10

dmjpro
100+
P: 2,476
That means the properties of Super set into Sub.
Then what's the difference ... Super.prototype.constructor.apply and Super.apply? ;)
Mar 30 '09 #11

Dormilich
Expert Mod 5K+
P: 8,639
in your case there isn't.
Mar 30 '09 #12

dmjpro
100+
P: 2,476
Then please give me an example ?
An one more thing .. where do i need to reset the constructor again ? Please give also an example of it .. ;)
Mar 30 '09 #13

Dormilich
Expert Mod 5K+
P: 8,639
@dmjpro
you'll need the correct constructor function if you want to use inherited methods. It seems not a problem when creating instances of an object, rather than using them.

example taken from http://phrogz.net/JS/Classes/OOPinJS2.html
Expand|Select|Wrap|Line Numbers
  1. function Mammal(name){ 
  2.     this.name=name;
  3.     this.offspring=[];
  4. Mammal.prototype.haveABaby=function(){ 
  5.     var newBaby=new this.constructor("Baby "+this.name);
  6.     this.offspring.push(newBaby);
  7.     return newBaby;
  8. Mammal.prototype.toString=function(){ 
  9.     return '[Mammal "'+this.name+'"]';
  10.  
  11.  
  12. Cat.prototype = new Mammal();        // Here's where the inheritance occurs 
  13. /*
  14.   comment out this line and compare the output to the original one
  15. */
  16. Cat.prototype.constructor=Cat;       // Otherwise instances of Cat would have a constructor of Mammal 
  17. function Cat(name){ 
  18.     this.name=name;
  19. Cat.prototype.toString=function(){ 
  20.     return '[Cat "'+this.name+'"]';
  21.  
  22.  
  23. var myPet = new Cat('Felix');
  24. myPet.haveABaby();                    // calls a method inherited from Mammal 
  25.  
  26. alert(myPet.offspring[0]);            // results in '[Cat "Baby Felix"]' 
Mar 30 '09 #14

dmjpro
100+
P: 2,476
And what about Apply?
Give me an example where those two make differences? ;)
Mar 30 '09 #15

Dormilich
Expert Mod 5K+
P: 8,639
@dmjpro
actually, you don't need Super.apply(), because the parent constructor is already called in Sub.prototype = new Super;
Mar 30 '09 #16

dmjpro
100+
P: 2,476
Cool Dude ;) It's really amazing.
Mar 31 '09 #17

Post your reply

Sign in to post your reply or Sign up for a free account.