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

this.XXX... and prototype.XXX...

dmjpro
100+
P: 2,476
my JavaScript code goes here .....
Expand|Select|Wrap|Line Numbers
  1. function MyClass(){
  2. this.prop1 = some_value;
  3. this.method1=some_value;
  4. }
  5.  
  6. MyClass.prototype.prop2 = some_value;
  7. MyClass.prototype.method2 = some_value;
  8.  
What is the difference between this.something and ClassName.prototype.something?
Aug 4 '08 #1
Share this Question
Share on Google+
9 Replies


rnd me
Expert 100+
P: 427
they are kind of the same, but different.

this.something used in a consrtuctor can make use of private variables in the constructor function, protos cannot, they can only act on MPE defined in the constructor.

also, the constructor function's prototype can be altered at run time, whereas it's harder to re-eval the constructor function to incorporate modifications.

also, using this.something will allow the function to perform more duties than a plain constructor. for example, it can be mapped to an array, or called by another function, replacing the this with any available object. in that manner, your myClass function can be used to modify existing objects, giving them the props of myClass.

also, you can filter out prototype MPEs during array and object iteration. things like hasOwnProperty, instanceOf, and .constructor help to control the behavior of inheritance and other object manipulation.

for simple tasks, they will both work about the same. the distinioins become more important in OOP and functional programming.

you should be aware that to check any path (eg myOb.prop1) JavaScript will iterate the current object, looking for matching keys (prop1). if none are found, it then checks the object's prototype chain for matching key names.

this post is an over simplification, and theres actually quite a bit going on here, but i hope it sheds a little practical light on this confusing and often misunderstood subject.

if you want to dig a little deeper, try to understand the relationship between "new", "this", and "prototype".

this article has a section (12: custom objects) that might be of interest. (the whole thing is good).
Aug 4 '08 #2

gits
Expert Mod 5K+
P: 5,343
nice explaination and good link to the 're-introduction' ... it is worth to understand this because there is one more noteworthy thing that is implied by all that:

member variables declared in the constructor (kind of instance variables) will lead to memory allocation for them everytime when a new instance is created (since there is the need for a unique reference to them), while using the prototype you just alter the 'template' for new and existing instances ... so having that in mind you could optimize a lot of your code regarding this (memory-usage) matter ;) ... use this and prototype together in a way that it fullfills what you want to do and makes good use of ressources and abilities of both of the constructs ... they are not for exclusive use :)

kind regards
Aug 4 '08 #3

dmjpro
100+
P: 2,476
First of all what is MPE?
Now have a look at the second example.
Expand|Select|Wrap|Line Numbers
  1. function SuperClass(param1,param2){
  2.     //this.param1 = param1;
  3.     //this.param2 = param2;
  4.  
  5.     this.showValues = function(){alert("Paramter1: "+this.param1+"\tParamtere2: "+this.param2);}
  6. }
  7.  
  8. SubClass.prototype = new SuperClass();
  9. SubClass.prototype.constructor = SubClass;
  10.  
  11. function SubClass(){
  12. }
  13.  
  14.  
Now this code fragment ...
Expand|Select|Wrap|Line Numbers
  1. var o = new SubClass("Debasis Jana","DMJPRO");
  2. o.showValues();
  3.  
shows that param1 and param2, both are undefined.
Why?
Aug 4 '08 #4

gits
Expert Mod 5K+
P: 5,343
hi ... there is one thing to note ... i comment it in the code:

Expand|Select|Wrap|Line Numbers
  1. function SuperClass(param1, param2) {
  2.     this.param1 = param1;
  3.     this.param2 = param2;
  4.  
  5.     this.showValues = function(){
  6.         alert("Paramter1: " + this.param1 + "\tParamtere2: " + this.param2);
  7.     };
  8. }
  9.  
  10. function SubClass() {
  11.     // we have to call the SuperClass constructor here again ... since it is 
  12.     // only called during the inheritance chain some lines below and 
  13.     // there the params are undefined -> so you get your result ...
  14.     // when you pass parameters or want to do something in the constructor
  15.     // of the SuperClass then you should call the 'parent'-constructor here 
  16.     // for executing the constructor again
  17.     SuperClass.prototype.constructor.apply(this, arguments);
  18. }
  19.  
  20. // that's what i said in the above comment
  21. SubClass.prototype = new SuperClass;
  22. SubClass.prototype.constructor = SubClass;
  23.  
  24. var o = new SubClass("Debasis Jana", "DMJPRO");
  25. o.showValues();
  26.  
kind regards
Aug 4 '08 #5

dmjpro
100+
P: 2,476
hi ... there is one thing to note ... i comment it in the code:

Expand|Select|Wrap|Line Numbers
  1. function SuperClass(param1, param2) {
  2.     this.param1 = param1;
  3.     this.param2 = param2;
  4.  
  5.     this.showValues = function(){
  6.         alert("Paramter1: " + this.param1 + "\tParamtere2: " + this.param2);
  7.     };
  8. }
  9.  
  10. function SubClass() {
  11.     // we have to call the SuperClass constructor here again ... since it is 
  12.     // only called during the inheritance chain some lines below and 
  13.     // there the params are undefined -> so you get your result ...
  14.     // when you pass parameters or want to do something in the constructor
  15.     // of the SuperClass then you should call the 'parent'-constructor here 
  16.     // for executing the constructor again
  17.     SuperClass.prototype.constructor.apply(this, arguments);
  18. }
  19.  
  20. // that's what i said in the above comment
  21. SubClass.prototype = new SuperClass;
  22. SubClass.prototype.constructor = SubClass;
  23.  
  24. var o = new SubClass("Debasis Jana", "DMJPRO");
  25. o.showValues();
  26.  
kind regards
Sorry i had a mistake .....
Actually i did not know ..how to make call to super constructor.
Basically i m from Java Domain ....which supports OOP ...anyway thanks for help...
It helps me to learn the how OOP supported by JS.
By the way Gits .....tell me what does Rnd mean by MPE?
Aug 4 '08 #6

gits
Expert Mod 5K+
P: 5,343
no need to apologize ;) ... you are welcome and this are interesting questions ... i'm glad when i could help you with this ...

kind regards
Aug 4 '08 #7

dmjpro
100+
P: 2,476
no need to apologize ;) ... you are welcome and this are interesting questions ... i'm glad when i could help you with this ...

kind regards

I think Gits MPEs are those which are instance variable.
Aug 4 '08 #8

gits
Expert Mod 5K+
P: 5,343
I think Gits MPEs are those which are instance variable.
i'm not sure ... rnd_me used this as a kind of synonym for the object's properties ... so may be (hopefully) he will elaborate the MPE a bit more when he reads this ... may be i should know what MPE means exactly ... but i don't ;) like i said i just thought it means the objects properties that even could be methods ...

kind regards
Aug 4 '08 #9

rnd me
Expert 100+
P: 427
methods, properties, and events.

object properties.


there's a lot of ways to play around with inheritance. here is my personal favorite way, in which you can avoid constructor memory leak by using any existing object as a template for another object using this simple prototype method:

Expand|Select|Wrap|Line Numbers
  1. Object.prototype.merge=function (ob) {var o = this;var i = 0;for (var z in ob) {if (ob.hasOwnProperty(z)) {o[z] = ob[z];}}return o;}
then you can do stuff like:
Expand|Select|Wrap|Line Numbers
  1. var employee= { store: 367, rate: 7.5, level: "trainee" };
  2.  
  3. var bob = employee.merge( { name: 'Bob', dept: 'service', rate: 8.25 } );
  4.  
  5. // bob == {store:367, rate:8.25, level:"trainee", name:"Bob", dept:"service"} 
if you are coming from a java background this is confusing, because instances can act like classes.
Aug 4 '08 #10

Post your reply

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