This in prototype function vs this in object literal function

Question

I am very new to coding javascript plugin and i have in the last half year or so build about 2 plugins of my own, basically gallery plugins for my own personal use. now i usually use the following pattern in an IFFE.

$.Mypluginname = function() {
    this.anotherfunction(); // works !! 
}

$.mypluginname.prototype.anotherfunction(){
     // this points to $.Mypluginname awesome!!!
}

$.mypluginname.prototype.anotherfunction(){
    // this points to $.Mypluginname awesome!!!
}

But recently i have found a better JS plugin pattern, It looks like so,

$.Mypluginname = function() {

}

$.mypluginname.prototype = {

   anotherfunction : function(){
     // this points to $.Mypluginname awesome!!!  ... but how ? 
   }

   mypluginname : anotherfunction(){
    // this points to $.Mypluginname awesome!!!  ... but how ? 
   }

}

See how this still points to the main function, My question really is how ?

how is the this inside the below function:

$.Mypluginname = function() {
          this.anotherfunction(); // works !! ... can you answer this quinten.
    }

?

Can anybody explain ?

EDIT :: There are 12 answers in this thread. none of which answer my question , which was not "how does prototype work" in the first place. reading that thread will certainly enhance my knowledge of JS prototype , but i don't see how it would explain how this works in the below design pattern.

$.mypluginname.prototype = {

       anotherfunction : function(){
         // this points to $.Mypluginname awesome!!!  ... but how ? 
       }

       mypluginname : anotherfunction(){
        // this points to $.Mypluginname awesome!!!  ... but how ? 
       }

    }

Thank you.

Alex-z.

Half the code in your question is not valid Javascript. Can you post actual code? — Frédéric Hamidi, Jul 29 '15 at 13:44
`this` should *not* point to `$.Mypluginname` but to the respective instance you've called you method on. — Bergi, Jul 29 '15 at 13:45
@FrédéricHamidi edited , i think it should make sense how . — Alexander Solonik, Jul 29 '15 at 13:47
Why the downvote ? i have edited the question to make sense ! — Alexander Solonik, Jul 29 '15 at 14:00
I seriously fail to understand why this question was downvoted. I mean i have followed all the guidelines of SO, edited my question multiple times, answered. and i still get a downvote . — Alexander Solonik, Jul 29 '15 at 14:05
@FrédéricHamidi , i guess mistakes happen right ? when you post a question the right away and that why they have the `edit` button ! — Alexander Solonik, Jul 29 '15 at 14:07
@Alexander, erm, yes, they do. There are still syntax problems left after your edits though. (If you were inquiring about the downvotes, none of them are mine.) — Frédéric Hamidi, Jul 29 '15 at 14:24
@FrédéricHamidi The lack of `,` in the object literals ! ? — Alexander Solonik, Jul 29 '15 at 14:38
@Alexander, indeed, and also the `$.mypluginname.prototype.anotherfunction() {}` constructs. — Frédéric Hamidi, Jul 29 '15 at 14:50
@AlexanderSolonik not to mention the case issues between your constructor and where you are assigning the prototype — Evan Davis, Jul 29 '15 at 14:51
@FrédéricHamidi thanks ! i guess being specific helps everybody , as does sometimes overlooking minor details. but TY again for pointing out. — Alexander Solonik, Jul 29 '15 at 14:55

score 1 · Accepted Answer · answered Jul 29 '15 at 14:08

It looks like you are asking how

$.mypluginname.prototype.anotherfunction = function() {
 // this points to $.Mypluginname awesome!!!
}

works the same as

$.mypluginname.prototype = {
   anotherfunction : function(){
     // this points to $.Mypluginname awesome!!!  ... but how ? 
   }
}

and the answer is that they are functionally the same; (one is replacing a key, one is replacing the whole prototype, but) in both cases you are setting anotherFunction on the prototype.

score 0 · Answer 2 · answered Jul 29 '15 at 13:44

0

The value of this depends on how you call a function, not how or where you define it. All the different variations of code you have in the question are about the definition of the function, not the calling of it, so they don't make any difference.

answered Jul 29 '15 at 13:44

Quentin

914,110
126
1,211
1,335

i am sure your answer makes sense , but i am a JS newbie relatively , can you explain your answer , using the context i have provided . Thank would be more helpful ! TY. – Alexander Solonik Jul 29 '15 at 13:48
@AlexanderSolonik — As the answer says, none of the context you have provided is relevant to the value of `this`, so no, I can't. – Quentin Jul 29 '15 at 13:51
i have commented out a peice of of specially for you `this.anotherfunction(); // works !! ... can you answer this quinten.` , check it out and tell me if it still lacks context. – Alexander Solonik Jul 29 '15 at 13:58

Max Bumaye · Answer 3 · 2015-07-30T08:05:35.407

0

this is always a reference to its Object. What you are creating is a constructor function. Javascript is a language which does inheritance with prototypes (prototypal inheritance). So once you have called your constructor function with the new operator like this:

var someObj = new myConstrFunction(param);

it will return you an Object with your variables and functions.

console.log(someObj)
//basicly returns something like this (simplyfied) 
//{anotherFunction:function(){},someVal:"",someOtherval:true};

these functions and variables can reference to their objects by using "this" in most cases.

edited Jul 30 '15 at 08:05

answered Jul 29 '15 at 13:53

Max Bumaye

1,017
10
17

Except that there are several ways to call the functions defined on the prototype such that within those functions `this` will *not* be `someObj`. – nnnnnn Jul 29 '15 at 23:00
valid point please give an example :) – Max Bumaye Jul 30 '15 at 07:06
1

`someObj.anotherFunction.call(someOtherObject)` – nnnnnn Jul 30 '15 at 07:59

This in prototype function vs this in object literal function

3 Answers3