this and $(this) in widget

Question

What do this and $(this) mean inside a widget method like create?

For example, Having a widget like this,

$.widget("sample.CustomWidget", {
options:{
},
_create: function(){
// Here what do this and $(this) mean
}
});

Thanks in advance,

-Raja.

What exactly do you mean by "widget"? A plugin using jQueryUI's widget factory, or just a regular plugin? — Andrew Whitaker, Apr 03 '12 at 11:41
`this` refers to a function's context. RTFM: https://developer.mozilla.org/en/JavaScript/Reference/Operators/this — Bergi, Apr 03 '12 at 11:45

score 5 · Accepted Answer · answered Mar 30 '12 at 13:05

5

It basically depends on the caller of the _create method... anyway:

this refers to the 'owner' of the Function
$(this) is the above object wrapped into a jQuery object

see also:

http://www.quirksmode.org/js/this.html

http://www.bennadel.com/blog/1838-Wrapping-The-Window-Object-In-A-jQuery-Wrapper.htm

answered Mar 30 '12 at 13:05

mamoo

8,156
2
28
38

2

Yeah in general terms, but in the context of a widget "this" is a JQuery widget itself, as opposed to the wrapper. – Mathew Thompson Mar 30 '12 at 13:08
@mattytommo, could you tell the exact explanation – Rajagopal 웃 Mar 30 '12 at 13:21
Well basically what I said was, as long as you're not calling the _create method yourself and you're letting JQuery do that for you, then "this" will always be the widget object, if you try debugging you can do this.widgetName, this.widgetEventPrefix etc, where as when wrapped into a jQuery object it's no longer a jQuery widget object, it's just a generic jQuery object, therefore you can't access any of the widget object properties (widgetName etc.) :) – Mathew Thompson Mar 30 '12 at 13:24

score 3 · Answer 2 · answered Apr 03 '12 at 11:41

Within an event handler of a standard jQuery UI-style widget, this will refer to the DOM element related to the event, $(this) creates a jQuery wrapper around this, and the DOM element (again) is available as this.

But when your widget functions are called, typically this refers to the jQuery object on which the function was called, not a specific DOM element. You then operate on the matched set of elements within that jQuery object.

score 2 · Answer 3 · answered Apr 03 '12 at 11:45

In a method integrated with jQuery:

$.fn.yourFunction = function() {
  // ...
};

the value of this is the jQuery object itself. There's no reason, therefore, to wrap this with another call to jQuery, though it doesn't hurt.

In a callback to an event handler:

$('#myButton').click(function() {
  // ...
});

the value of this is the target DOM element of the event, or the target object if the event is triggered on something other than the actual DOM.

In other jQuery callback situations, like .each() for example, the value of this is generally determined by the nature of the jQuery object.

The upshot of all that is that inside an integrated-with-jQuery function (first sample), you generally don't wrap this in another call to jQuery; it's already a jQuery object. In all other cases, if you want to use this with jQuery facilities, you do have to wrap it.

score 1 · Answer 4 · answered Mar 30 '12 at 13:05

1

In that context, "this" is the actual JQuery widget object, which allows you to query things such as widgetName, widgetEventPrefix etc, whereas "$(this)" is just the JQuery object for "this", which you can't get the widget properties using.

answered Mar 30 '12 at 13:05

Mathew Thompson

55,877
15
127
148

From the posted source you cannot tell what type of callers the _create function will have, so this and $(this) could not be the same... – mamoo Mar 30 '12 at 13:08
It's a private function though? _create cannot be invoked from an external caller can it not? – Mathew Thompson Mar 30 '12 at 13:09
Raja's code could be referred to that factory: http://ajpiano.com/widgetfactory/ ...anyway you cannot assume that _create won't be called as an event callback (and in that case 'this' could potentially be whatever), nor that inside _create you won't have any other function. So, again, it basically depends on where these statements are placed ;) – mamoo Mar 30 '12 at 13:14
Okay fair enough, I agree as he hasn't specified the caller, you can't be too sure. +1 to your answer for that then, but don't I get a return +1 for mine? :P – Mathew Thompson Mar 30 '12 at 13:16

score 1 · Answer 5 · answered Apr 03 '12 at 12:02

this represents the contructor you are in. For example in a click event, the dom element being clicked, in a function the constructor of function;

function test{
    this.b = "hello jupiter";
}
var a = new test();
alert(a.b);

Acctually there is nothing special with $(this). There is a function called $ and "this" is it's parameter, like alert;

$(this);
//just like
alert("some string);

this and $(this) in widget

5 Answers5