var self this

Question

Using instance methods as callbacks for event handlers changes the scope of this from  My instance  to  Whatever just called the callback   So my code looks like this  function MyObject       this doSomething   function                    var self   this       foobar   bind  click   function        self doSomethng          this doSomething   would not work here          It works  but is that the best way to do it  It looks strange to me

User · Answer

I haven t used jQuery  but in a library like Prototype you can bind functions to a specific scope   So with that in mind your code would look like this        foobar   ready  click   this doSomething bind this      The bind method returns a new function that calls the original method with the scope you have specified

User · Answer

One solution to this is to bind all your callback to your object with javascript s bind method   You can do this with a named method   function MyNamedMethod          You can now call methods on  this  here     doCallBack MyNamedMethod bind this       Or with an anonymous callback  doCallBack function           You can now call methods on  this  here   bind this      Doing these instead of resorting to var self   this shows you understand how the binding of this behaves in javascript and doesn t rely on a closure reference    Also  the fat arrow operator in ES6 basically is the same a calling  bind this  on an anonymous function   doCallback       gt         You can reference  this  here now

User · Answer

If you are doing ES2015 or doing type script and ES5 then you can use arrow functions in your code and you don t face that error and this refers to your desired scope in your instance  this name    test  myObject doSomething data   gt      console log this name      this should print out  test       As an explanation  In ES2015 arrow functions capture this from their defining scope  Normal function definitions don t do that

User · Answer

I haven t used jQuery  but in a library like Prototype you can bind functions to a specific scope   So with that in mind your code would look like this        foobar   ready  click   this doSomething bind this      The bind method returns a new function that calls the original method with the scope you have specified

User · Answer

This question is not specific to jQuery  but specific to JavaScript in general  The core problem is how to  channel  a variable in embedded functions  This is the example   var abc   1     we want to use this variable in embedded functions  function xyz      console log abc      it is available here    function qwe        console log abc      it is available here too                 This technique relies on using a closure  But it doesn t work with this because this is a pseudo variable that may change from scope to scope dynamically      we want to use  this  variable in embedded functions  function xyz          this  is different here    console log this      not what we wanted    function qwe            this  is different here too      console log this      not what we wanted                 What can we do  Assign it to some variable and use it through the alias   var abc   this     we want to use this variable in embedded functions  function xyz          this  is different here  --- but we don t care    console log abc      now it is the right object    function qwe            this  is different here too  --- but we don t care      console log abc      it is the right object here too                 this is not unique in this respect  arguments is the other pseudo variable that should be treated the same way  mdash  by aliasing

User · Answer

If you are doing ES2015 or doing type script and ES5 then you can use arrow functions in your code and you don t face that error and this refers to your desired scope in your instance  this name    test  myObject doSomething data   gt      console log this name      this should print out  test       As an explanation  In ES2015 arrow functions capture this from their defining scope  Normal function definitions don t do that

User · Answer

I haven t used jQuery  but in a library like Prototype you can bind functions to a specific scope   So with that in mind your code would look like this        foobar   ready  click   this doSomething bind this      The bind method returns a new function that calls the original method with the scope you have specified

User · Answer

Yeah  this appears to be a common standard   Some coders use self  others use me   It s used as a reference back to the  real  object as opposed to the event   It s something that took me a little while to really get  it does look odd at first   I usually do this right at the top of my object  excuse my demo code - it s more conceptual than anything else and isn t a lesson on excellent coding technique    function MyObject      var me   this       Events   Click   onClick    Allows user to override onClick event with their own      Event Handlers   onClick   function args       me MyProperty   args    Reference me  referencing this refers to onClick               Do other stuff

User · Answer

I think it actually depends on what are you going to do inside your doSomething function  If you are going to access MyObject properties using this keyword then you have to use that  But I think that the following code fragment will also work if you are not doing any special things using object MyObject  properties   function doSomething                       foobar   ready  click   function

User · Answer

var functionX   function       var self   this    var functionY   function y           If we call  this  in here  we get a reference to functionY         but if we call  self   defined earlier   we get a reference to function X          edit  in spite of  nested functions within an object takes on the global window object rather than the surrounding object

User · Answer

var functionX   function       var self   this    var functionY   function y           If we call  this  in here  we get a reference to functionY         but if we call  self   defined earlier   we get a reference to function X          edit  in spite of  nested functions within an object takes on the global window object rather than the surrounding object

User · Answer

Yeah  this appears to be a common standard   Some coders use self  others use me   It s used as a reference back to the  real  object as opposed to the event   It s something that took me a little while to really get  it does look odd at first   I usually do this right at the top of my object  excuse my demo code - it s more conceptual than anything else and isn t a lesson on excellent coding technique    function MyObject      var me   this       Events   Click   onClick    Allows user to override onClick event with their own      Event Handlers   onClick   function args       me MyProperty   args    Reference me  referencing this refers to onClick               Do other stuff

User · Answer

Yeah  this appears to be a common standard   Some coders use self  others use me   It s used as a reference back to the  real  object as opposed to the event   It s something that took me a little while to really get  it does look odd at first   I usually do this right at the top of my object  excuse my demo code - it s more conceptual than anything else and isn t a lesson on excellent coding technique    function MyObject      var me   this       Events   Click   onClick    Allows user to override onClick event with their own      Event Handlers   onClick   function args       me MyProperty   args    Reference me  referencing this refers to onClick               Do other stuff

User · Answer

This question is not specific to jQuery  but specific to JavaScript in general  The core problem is how to  channel  a variable in embedded functions  This is the example   var abc   1     we want to use this variable in embedded functions  function xyz      console log abc      it is available here    function qwe        console log abc      it is available here too                 This technique relies on using a closure  But it doesn t work with this because this is a pseudo variable that may change from scope to scope dynamically      we want to use  this  variable in embedded functions  function xyz          this  is different here    console log this      not what we wanted    function qwe            this  is different here too      console log this      not what we wanted                 What can we do  Assign it to some variable and use it through the alias   var abc   this     we want to use this variable in embedded functions  function xyz          this  is different here  --- but we don t care    console log abc      now it is the right object    function qwe            this  is different here too  --- but we don t care      console log abc      it is the right object here too                 this is not unique in this respect  arguments is the other pseudo variable that should be treated the same way  mdash  by aliasing

User · Answer

I haven t used jQuery  but in a library like Prototype you can bind functions to a specific scope   So with that in mind your code would look like this        foobar   ready  click   this doSomething bind this      The bind method returns a new function that calls the original method with the scope you have specified

User · Answer

I think it actually depends on what are you going to do inside your doSomething function  If you are going to access MyObject properties using this keyword then you have to use that  But I think that the following code fragment will also work if you are not doing any special things using object MyObject  properties   function doSomething                       foobar   ready  click   function

User · Answer

I think it actually depends on what are you going to do inside your doSomething function  If you are going to access MyObject properties using this keyword then you have to use that  But I think that the following code fragment will also work if you are not doing any special things using object MyObject  properties   function doSomething                       foobar   ready  click   function

User · Answer

This question is not specific to jQuery  but specific to JavaScript in general  The core problem is how to  channel  a variable in embedded functions  This is the example   var abc   1     we want to use this variable in embedded functions  function xyz      console log abc      it is available here    function qwe        console log abc      it is available here too                 This technique relies on using a closure  But it doesn t work with this because this is a pseudo variable that may change from scope to scope dynamically      we want to use  this  variable in embedded functions  function xyz          this  is different here    console log this      not what we wanted    function qwe            this  is different here too      console log this      not what we wanted                 What can we do  Assign it to some variable and use it through the alias   var abc   this     we want to use this variable in embedded functions  function xyz          this  is different here  --- but we don t care    console log abc      now it is the right object    function qwe            this  is different here too  --- but we don t care      console log abc      it is the right object here too                 this is not unique in this respect  arguments is the other pseudo variable that should be treated the same way  mdash  by aliasing

User · Answer

Just adding to this that in ES6 because of arrow functions you shouldn t need to do this because they capture the this value

User · Answer

Yeah  this appears to be a common standard   Some coders use self  others use me   It s used as a reference back to the  real  object as opposed to the event   It s something that took me a little while to really get  it does look odd at first   I usually do this right at the top of my object  excuse my demo code - it s more conceptual than anything else and isn t a lesson on excellent coding technique    function MyObject      var me   this       Events   Click   onClick    Allows user to override onClick event with their own      Event Handlers   onClick   function args       me MyProperty   args    Reference me  referencing this refers to onClick               Do other stuff

User · Answer

This question is not specific to jQuery  but specific to JavaScript in general  The core problem is how to  channel  a variable in embedded functions  This is the example   var abc   1     we want to use this variable in embedded functions  function xyz      console log abc      it is available here    function qwe        console log abc      it is available here too                 This technique relies on using a closure  But it doesn t work with this because this is a pseudo variable that may change from scope to scope dynamically      we want to use  this  variable in embedded functions  function xyz          this  is different here    console log this      not what we wanted    function qwe            this  is different here too      console log this      not what we wanted                 What can we do  Assign it to some variable and use it through the alias   var abc   this     we want to use this variable in embedded functions  function xyz          this  is different here  --- but we don t care    console log abc      now it is the right object    function qwe            this  is different here too  --- but we don t care      console log abc      it is the right object here too                 this is not unique in this respect  arguments is the other pseudo variable that should be treated the same way  mdash  by aliasing

User · Answer

One solution to this is to bind all your callback to your object with javascript s bind method   You can do this with a named method   function MyNamedMethod          You can now call methods on  this  here     doCallBack MyNamedMethod bind this       Or with an anonymous callback  doCallBack function           You can now call methods on  this  here   bind this      Doing these instead of resorting to var self   this shows you understand how the binding of this behaves in javascript and doesn t rely on a closure reference    Also  the fat arrow operator in ES6 basically is the same a calling  bind this  on an anonymous function   doCallback       gt         You can reference  this  here now

User · Answer

Just adding to this that in ES6 because of arrow functions you shouldn t need to do this because they capture the this value

User · Answer

I think it actually depends on what are you going to do inside your doSomething function  If you are going to access MyObject properties using this keyword then you have to use that  But I think that the following code fragment will also work if you are not doing any special things using object MyObject  properties   function doSomething                       foobar   ready  click   function

[javascript] var self = this?

Examples related to javascript

Examples related to jquery

Examples related to scope

Examples related to closures