Why should "this" be assigned to variable in jQuery?

Question

often in some jQuery code I see that this is assigned to the variable in jQuery and I do not understand the reason for this approach?

This is an example of a jQuery plugin constructor:

    //constructor
    function Nullpoll(element, options){
        var widget = this;
         widget.config = $.extend({}, defaults, options);
         widget.element = element;

         widget.element.on( "click", function() {
            alert("Test")
           });

         widget.element.one("change", function(e){
           widget.element.find("button").removeProp("disabled");
         });

         this.init();
        }

Because, in this case, inside the listeners `this` is not the `widget` but the `widget.element`. Declaring it on top is more readable — Luca Rainone, Oct 28 '14 at 10:08

score 1 · Answer 1 · edited Oct 28 '14 at 10:09

http://learn.jquery.com/javascript-101/this-keyword/

In JavaScript, as in most object-oriented programming languages, this is a special keyword that is used in methods to refer to the object on which a method is being invoked. The value of this is determined using a simple series of steps:

If the function is invoked using Function.call() or Function.apply(), this will be set to the first argument passed to .call()/.apply(). If the first argument passed to .call()/.apply() is null or undefined, this will refer to the global object (which is the window object in web browsers).
If the function being invoked was created using Function.bind(), this will be the first argument that was passed to .bind() at the time the function was created.
If the function is being invoked as a method of an object, this will refer to that object.
Otherwise, the function is being invoked as a standalone function not attached to any object, and this will refer to the global object.

This answer describes `this`, but doesn't answer the OP's question about why `this` is being assigned to a variable in their code. — jfriend00, Oct 28 '14 at 10:22

score 1 · Accepted Answer · answered Oct 28 '14 at 10:07

The value of this is determined by how the function it appears in was called.

You assign it to a different variable either:

To give it a more informative name or
(more commonly) so that the value is available in a different function which has access to the scope of the first function

In this particular case, the anonymous function passed to widget.element.one() uses the value of this from the call to Nullpoll. If it tried to use the this keyword, it would get a different value (what that value was would depend on how the one function called the anonymous function)

score 1 · Answer 3 · edited May 23 '17 at 12:27

When using inline callbacks within your scope (such as the event handlers in your example), the value of this within the callbacks is often not the same as the parent scope. So, if you want access to the value of this in the parent scope from within those callbacks, then it is a common design pattern to save it to a local variable in the parent scope. Then, within the callbacks, you can still refer to that value from the parent scope even though this may have a different value within the callback.

As a secondary benefit, some minimizers can make smaller code by using a local variable rather than this because a local variable can be renamed to a single character variable by the minimizer, but this cannot be renamed.

Similar question with a bunch of answers here: What is the value of var me = this;

M Reza Saberi · Answer 4 · 2014-10-28T10:42:06.843

-1

this points to the element on the page that a specific method is being invoked on!

refer to http://learn.jquery.com/javascript-101/this-keyword/

edited Oct 28 '14 at 10:42

answered Oct 28 '14 at 10:06

M Reza Saberi

7,134
9
47
76

Why should "this" be assigned to variable in jQuery?

4 Answers4